Block-Level and Inline Elements

HTML elements behave in two main categories: block-level and inline. This behavior determines how the element is displayed on the page and how it interacts with surrounding elements.

Block-Level Elements

Block-level elements always start on a new line and take up the full available width. Examples include <div>, <p>, <h1>–<h6>, <ul>, <ol>.

<div>This is a block element</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Inline Elements

Inline elements do not break the line; they stay within the current line and only take up as much width as necessary. Examples include <span>, <a>, <strong>, <em>.

<span>This is inline</span>
<a href="#">This is a link</a>
<strong>This is bold</strong>

Key Differences

Block elements stack vertically, while inline elements appear side by side. Understanding this difference is crucial for building correct HTML structure.

<div>
  <p>This is a paragraph inside a block element.</p>
  <a href="#">Link</a> and <span>text</span> are inline.
</div>

Inline Inside Block — and Vice Versa

Inline elements are often nested inside block-level elements — for example, <strong> or <a> inside a <p>. The reverse is not recommended: never place a block element like <div> inside an inline element like <span>, as it's invalid HTML.

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

How It Affects Appearance

Block elements appear on separate lines and stretch across the full width, while inline elements stay within the same line and occupy only the space they need. This difference becomes visually clear when you apply a background color.

<div style="background: lightblue;">Block</div>
<span style="background: lightgreen;">Inline</span>

display: block and display: inline

Using CSS, any element's display type can be changed: an inline element can become 'display: block' and vice versa. This lets you adjust appearance flexibly while keeping the HTML structure unchanged.

When to Use Each Type

Use block elements to create entire content sections. Use inline elements when you want to style or emphasize part of a sentence or a few words.