Block and Inline Elements

Block and Inline Elements

Every HTML element is either a block element or an inline element. This decides how it sits on the page.

Block elements: building blocks

A block element always starts on a NEW line and takes the full width. Think of it like a brick in a wall.

• <div>: the generic block box
• <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <form>
• <header>, <footer>, <section>, <article>, <nav>, <main>

<p>Block 1</p>
<p>Block 2</p>

Block 1 and Block 2 appear on separate lines, each full-width.

Inline elements: beads on a string

An inline element sits WITHIN a line of text and takes only the space it needs. Think of beads strung on a thread.

• <span>: the generic inline helper
• <a>, <img>, <strong>, <em>, <b>, <i>, <code>, <br>

<p>Text with <span>a span</span> and <strong>bold</strong> inside.</p>

Everything flows on the same line.

The two helpers: <div> and <span>

• <div>: a block-level box. Great for grouping sections.
• <span>: an inline label. Great for styling a bit of text.

<div style="background-color: lightgray;">
  <p>Everything here is inside a div box.</p>
  <p>I like <span style="color: blue;">blue</span> words.</p>
</div>

Can you change it?

Yes! With CSS you can switch them:

• display: block; makes an inline element behave like a block.
• display: inline; makes a block element behave inline.

span { display: block; }

TL;DR

• Block elements start on a new line and take full width.
• Inline elements sit inside a line and take only what they need.
• <div> is the generic block; <span> is the generic inline.
• CSS display can switch behaviors.