Block and inline elements

Two ways of taking up space

Every HTML element has a default way of behaving on the page, and most fall into one of two groups.

• Block elements start on a new line and stretch to fill the full width of their container. Each block stacks below the previous one.
• Inline elements sit within a line of text, one after another, and take only as much room as their content needs.

Seeing both at once makes the difference obvious:

<p style="background:#dbeafe">A paragraph is a block. It fills the width.</p>
<p style="background:#dcfce7">Another block starts on its own line.</p>
<p>
  Inside a block, <strong style="background:#fde68a">strong</strong>,
  <em style="background:#fbcfe8">em</em> and
  <a href="#" style="background:#e9d5ff">a link</a> are inline: they stay in the line.
</p>

The background colours show each element's box. The paragraphs are wide bands; the inline elements hug their words.

Common block elements

div, p, h1–h6, ul, ol, li, table, form, blockquote, pre, hr, header, nav, main, section, article, aside, footer, figure.

Common inline elements

a, strong, em, span, code, abbr, time, mark, small, sub, sup, br, img, button, input.

img is a special case you will meet in CSS: it is inline, but has a width and height like a block. These are sometimes called "replaced" elements because the browser replaces them with an external picture or control.

Nesting rules

The main rule: blocks may contain blocks and inline elements; inline elements should contain only inline elements.

<!-- Fine -->
<div>
  <p>A paragraph with <strong>bold</strong> and a <a href="/">link</a>.</p>
</div>

<!-- Wrong: a block inside an inline -->
<span><p>Do not do this.</p></span>

Browsers try to cope with mistakes, but the result is unpredictable and validators flag it. One exception exists in modern HTML: an a element may wrap a block such as a whole card, because its content model is "transparent": it follows the rules of whatever contains it.

<a href="/post/1/">
  <h3>Article title</h3>
  <p>A short intro.</p>
</a>

Width, height and margins

Block elements respond to width, height and vertical margins in the way you would expect. Ordinary inline elements ignore width and height and their top and bottom margins have no effect on layout. That surprises many beginners: "I set the width on my link and nothing happened."

When you need inline items that also accept a size, CSS offers a third kind of behaviour called inline-block. You will learn it in the display lesson of the CSS course.

Line breaks and whitespace

Because inline elements flow with the text, the browser puts them on one line and wraps at spaces. A line break in your HTML file is treated as a space, not as a new line (you saw this in the whitespace lesson). To force a new line inside text, use <br>; to start a new block, use a block element.

display can change the default

The groups above are defaults. CSS can change behaviour with the display property: you can make a span act like a block, or turn a list into a horizontal menu. The element's meaning stays the same, and only how it is laid out changes.

<style>
  .tag { display: block; background: #fef3c7; margin: 4px 0; }
</style>
<span class="tag">I am a span</span>
<span class="tag">acting as a block</span>

Common mistakes

• Putting a block inside a span or a p. A p cannot contain a div or another p; the browser closes the first paragraph for you.
• Expecting width on an inline element, like a link, and wondering why nothing changes.
• Using <br><br> instead of paragraphs to create gaps. Use p elements for paragraphs.
• Choosing elements by their default look. Choose by meaning; use display and other CSS to change layout.

Exercise

Write a paragraph that contains the sentence "Learn HTML for free" where "HTML" is bold and "free" is a link to /learn/. Then, below it, add a second paragraph. Which parts are blocks and which are inline?

<p>Learn <strong>HTML</strong> for <a href="/learn/">free</a>.</p>
<p>This is the next paragraph.</p>