HTML Block and Inline Elements

Block-Level Elements

Block-level elements start on a new line and take up the full width available, stretching from left to right. They stack vertically, with each element appearing below the previous one.

Common block elements include div, p, h1-h6, ul, ol, li, form, header, footer, section, article, nav, and main. These elements create distinct blocks of content.

Block elements can contain other block elements and inline elements. For example, a div can contain paragraphs, headings, lists, and other divs.

<!-- Block elements stack vertically -->
<div>This is a div (block element)</div>
<p>This is a paragraph (block element)</p>
<h2>This is a heading (block element)</h2>

<!-- Each appears on a new line -->
<div style="background: lightblue;">First div</div>
<div style="background: lightgreen;">Second div</div>
<div style="background: lightyellow;">Third div</div>

Inline Elements

Inline elements don't start on a new line and only take up as much width as necessary. They flow with text, appearing alongside adjacent content.

Common inline elements include span, a, strong, em, code, img, input, button, and label. These elements style or add functionality to text.

Inline elements can only contain other inline elements and text. You cannot put block elements inside inline elements.

<!-- Inline elements flow with text -->
<p>
  This paragraph contains <strong>bold text</strong>, 
  <em>italic text</em>, and <a href="#">a link</a>.
</p>

<!-- Multiple inline elements on one line -->
<span>First</span> <span>Second</span> <span>Third</span>