HTML Block and Inline Elements

HTML elements are either block or inline. This affects how they appear on the page.

1. Block Elements

Block elements take the full width of the page and start on a new line. Examples: <div>, <p>, <h1>.

<div class="block">This is a div (block)</div>
<p class="block">This is a paragraph (block)</p>

This is a div (block)

This is a paragraph (block)

Inline elements only take the space they need and do not start on a new line. Examples: <span>, <a>, <b>.

<span class="inline">Hello</span>
<span class="inline">World</span>
<b class="inline">Bold</b>

Hello World Bold

Block: Starts on a new line, full width.
Inline: Stays in the same line, only as wide as content.

Previous Lesson → HTML Colors