Skip to content

Block Tags vs Inline Tags

A short, friendly guide to understanding the difference between block-level and inline-level HTML elements.

Definition

  • Block elements (block-level): start on a new line and take up the full available width by default. Examples: <div>, <p>, <h1>–<h6>, <ul>, <li>.
  • Inline elements (inline-level): flow inside a line of text and only take as much width as their content. Examples: <span>, <a>, <strong>, <img>, <em>.

Why this matters

  • Layout: block vs inline behavior affects how elements are stacked and how space is used on the page.
  • Semantics: choosing the right element conveys meaning (e.g., use <p> for paragraphs, not a <span>).
  • CSS & responsiveness: you control layout with CSS (e.g., display, float, flex), but knowing defaults helps avoid surprises.

Real-world analogy

Think of a block element as a full-width bookshelf (one shelf per row) and an inline element as books placed next to each other on that shelf. Books (inline) sit side-by-side; a shelf (block) takes the full row.

Examples

Example — Block elements

Code

<div style="background:#eef;padding:10px;">
 <h1>Heading</h1>
 <p>This paragraph is a block element — it starts on a new line.</p>
 <p>Another paragraph appears below the first one.</p>
</div>

Output (rendered)

  • Heading appears on its own line.
  • Each paragraph appears on its own line, stacked vertically.

Example — Inline elements

Code

<p>
 This is a <span style="color:crimson;">red span</span> inside a paragraph. 
 Here is a <a href="#">link</a> and some <strong>bold text</strong>.
</p>

Output (rendered)

  • All inline elements appear within the same line flow of the paragraph.
  • The red span, link, and bold text do not force line breaks by themselves.

Example — Inline-block & changing display

Use display to change behavior. inline-block acts like an inline element but accepts width/height.

Code

<style>
 .box { display: inline-block; width: 120px; height: 80px; background:#ddd; margin:6px; vertical-align:top; }
</style>

<div>
 <div class="box">Box 1</div>
 <div class="box">Box 2</div>
 <div class="box">Box 3</div>
</div>

Output (rendered)

  • Boxes appear side-by-side on the same line until the viewport is too narrow.
  • Each box accepts width and height because of inline-block.

Semantics and accessibility

  • Prefer semantic tags for meaning: use <p> for paragraphs, <nav> for navigation, <button> for actions. Styling should not replace proper semantic structure.
  • Screen readers and other assistive tech rely on semantic structure—using the correct element type improves accessibility.

Quick CSS tips

  • display: block — element behaves like a block.
  • display: inline — behaves inline (no width/height).
  • display: inline-block — inline flow but accepts width/height.
  • display: flex or display: grid — used for layout; usually applied to containers (block-level by default).

Summary

  • Block elements start on a new line and usually fill horizontal space; inline elements sit within lines of text.
  • Use the proper tag for semantics and use CSS to fine-tune layout when needed.

Practice exercise

Create a horizontal navigation bar from a list of links using only semantic HTML and CSS. Hint: make the <li> elements display: inline-block or use Flexbox on the <ul>.

Example starter:

<nav>
 <ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

<style>
 .nav { list-style:none; padding:0; margin:0; }
 .nav li { display:inline-block; margin-right:12px; }
</style>

Try: convert the starter to use Flexbox instead of inline-block and add a hover background on links. Good luck!