Block vs. Inline Elements

🌐 HTML Basics Lesson 11 Intermediate

HTML elements are rendered differently based on their display behaviors. In this lesson, we will cover the differences between Block-level and Inline-level elements.

1 Block Display vs. Inline Display

Every HTML element has a default display type:

Block-Level Elements: Always start on a new line and stretch to fill the full width of the parent container (e.g. `<div>`, `<p>`, `<h1>`-`<h6>`, `<ul>`, `<li>`).
Inline-Level Elements: Do not start on a new line and only occupy as much width as their content requires. Block elements cannot be nested inside inline elements (e.g. `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`).

2 Display Elements Code

Let's see how block and inline elements wrap text:

HTML — Display elements

<!-- Block level elements stack on top of each other -->
<div style="background-color: lightgrey;">Div is Block 1</div>
<div style="background-color: lightblue;">Div is Block 2</div>

<!-- Inline elements sit side-by-side on the same line -->
<p>This is a paragraph with <span style="color: red;">inline span 1</span> and <span style="color: blue;">inline span 2</span>.</p>

3 Code Challenge

Challenge: Write a text layout wrapping key terms in `<span>` tags. Explain why wrapping a `<div>` tag inside a `<span>` tag violates HTML specifications.