Inline vs Block Elements

In HTML, elements are categorized as either inline or block-level based on their default display behavior in the document flow.

Block-Level Elements

Block-level elements take up the full width available, starting on a new line. They are typically used for structural layout.

<div>
<p>
<h1> to <h6>
<ul>, <ol>, <li>
<section>, <article>, <header>, <footer>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. They are typically used for formatting text.

<span>
<a>
<strong>, <em>
<img>
<br>, <input>, <label>

Visual Example


<!-- Block Element -->
<div>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

<!-- Inline Element -->
<p>This is an <span>inline</span> element.</p>

← Previous: HTML Entities Next: HTML DOM →