Every HTML element has a default display value, depending on what type of element it is.
The two most common display values are block and inline.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
<p> Hello World </p>
<div> Hello World </div>
Here are the block-level elements in HTML:
| <address> | <article> | <aside> | <blockquote> | <canvas> | <dd> |
| <div> | <dl> | <dt> | <fieldset> | <figcaption> | <figure> |
| <footer> | <form> | <h1> - <h6> | <header> | <hr> | <li> |
| <section> | <table> | <tfoot> | <ul> | <video> | <main> |
| <nav> | <ol> | <p> | <pre> | ||
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<span> Hello World </span>
Here are the inline elements in HTML:
| <a> | <abbr> | <acronym> | <b> | <bdo> | <big> |
| <br> | <button> | <code> | <cite> | <em> | <dfn> |
| <i> | <img> | <input> | <kbd> | <label> | <map> |
| <small> | <span> | <strong> | <sub> | <sup> | <textarea> |
| <time> | <tt> | <var> | |||
Note: An inline element cannot contain a block-level element.
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>