In HTML, elements are classified as either block-level elements or inline elements. This classification determines how the elements are rendered on the web page.
Block-Level Elements
Always start on a new line.
Take up the full width available (stretches out to the left and right as far as it can).
Have top and bottom margins.
Can contain other block-level elements and inline elements.
Examples of block-level elements include:
- <div>
- <p>
<h1>to<h6><ul>and<ol>- <li>
- <table>
- <header>
- <footer>
- <section>
- <article>
Example:
<div>
<h1>Title</h1>
<p>This is a paragraph inside a div.</p>
</div>
Inline Elements
Do not start on a new line.
Only take up as much width as necessary.
Do not force other content to move to a new line.
Can only contain other inline elements or text content.
Examples of inline elements include:
- <span>
- <a>
- <img>
<strong>and<b><em>and<i>- <code>
- <br>
Example:
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
Key Differences
- Rendering: Block-level elements create larger blocks of content, whereas inline elements are contained within block-level elements and do not disrupt the flow of content.
- Containment: Block-level elements can contain both block-level and inline elements, while inline elements can only contain other inline elements or text.