PHASE 2Beginner ~26 min· topic 1 of 7

Topic 2.1

Block and Inline Elements

In one line

Some elements stack on top of each other as full-width boxes (block), others sit inside a line of text like words (inline); knowing which is which, and what may go inside what, is the base of every layout.

Think of it like this

A notebook page. Paragraphs are like blocks of writing: each one starts on a new line and takes the whole width of the page. Words you underline or highlight inside a sentence are inline: they stay in the line, next to the other words, and only take as much room as they need.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Normal flow: The default way the browser places boxes on the page when you add no layout CSS: blocks top to bottom, inline content left to right in lines.
Block element: An element that starts on a new line and takes the full width available, like <p> or <div>.
Inline element: An element that sits inside a line of text and is only as wide as its content, like <strong> or <a>.
Replaced element: An element whose content comes from outside the HTML, like <img> or <video>. It has its own size even when inline.
display: The CSS property that decides how an element's box behaves: block, inline, flex and more.
Content model: The rule for each element saying what it may contain. For example, <p> may contain only text-level content.
Phrasing content: Text and text-level elements (span, em, a, img and so on): what you'd find inside a sentence.
div / span: Generic containers with no meaning: div is a block box, span an inline box. Used for grouping and styling.

Step by step

01Look at blocks stacking

Write three paragraphs. Each <p> starts on a new line and reaches across the whole width, even if its text is one word. Give them a background colour and you can see the full-width boxes.

index.htmlwhole filehtml

<p>One</p>
<p>Two</p>
<p>Three</p>

02Look at inline boxes sharing a line

Now mark words inside one paragraph. <strong>, <em> and <a> stay in the sentence. When the line runs out of space, inline content wraps onto the next line, and a single inline box can even be split across two lines.

index.htmlwhole filehtml

<p>I like <strong>tea</strong>, <em>coffee</em> and <a href="#">juice</a>.</p>

03Group with div, mark with span

Use <div> to wrap a group of blocks (for example a card with a heading and a paragraph) and <span> to mark part of a line that has no special meaning, only a special look.

index.htmlwhole filehtml

<div class="card">
  <h2>Plan A</h2>
  <p>Price: <span class="price">₹199</span> a month</p>
</div>

Group with div, mark with spandiagram

Rendering diagram…

04Know what may nest in what

Inline elements go inside blocks: a <strong> inside a <p> is right. Blocks inside a paragraph are not allowed: <p> can hold only phrasing content.

One useful exception: <a> is transparent, meaning it may contain whatever its parent may contain. So a link may wrap a whole card made of blocks, as long as it doesn't contain another link or a button.

index.htmlwhole filehtml

<!-- Fine: a link wrapping block content -->
<a href="/plans/a">
  <h2>Plan A</h2>
  <p>Start here</p>
</a>

<!-- Wrong: a block inside a paragraph -->
<p>Intro <div>box</div></p>

05See the parser repair a bad nest

When the parser meets <div> while a <p> is open, it closes the <p> first. Your later </p> then has no paragraph to close, so the parser creates an empty <p></p> for it. The page now has two paragraphs you never meant to write, which can break your CSS and JavaScript.

See the parser repair a bad nestdiagram

Rendering diagram…

06Change display with CSS when you need to

If you need a link to look like a full-width button, don't swap it for a <div>: keep the <a> and set display: block in CSS. The meaning stays in the HTML, the look goes in the CSS. You'll study display in depth in the CSS course (/css).

style.csswhole filecss

a.big {
  display: block;
  padding: 12px;
}

Try it yourself

1
Predict, then turn a block inline
In the first example's CSS, add p { display: inline; }. Predict first: what happens to the three paragraphs? Run it. They now flow in one line like words, and the console reports inline for each p.
2
Fix the broken nest
In the second example, change the <div class="box"> to <span class="box"> (and its closing tag). Predict the paragraph count before you run. You'll get 1, and the box is now inside the paragraph.
3
Find the defaults in DevTools
Right-click any word in a preview → Inspect. In the Styles pane, scroll down to the rule marked user agent stylesheet: that's where display: block for p comes from.

Code & diagrams

Blocks stack, inline boxes share a line New tab

The blue boxes reach the full width; the yellow ones are only as wide as their words. The script asks the browser for each element's default display.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

p is block
p is block
p is block
strong is inline
em is inline
span is inline

A div inside a p gets split apart New tab

One p was written, two exist. Inspect the preview: the second red strip is the empty <p></p> made from the stray </p>.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Paragraphs on the page: 2
First paragraph text: "Before "
Is the div inside a p? false

Width does nothing on an inline span New tab

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Put a list inside a paragraph

Write <p>Shopping:<ul><li>milk</li></ul></p> and style p with a red border.

terminal

$ DevTools → Elements

── what you'll see ──

<p>Shopping:</p>

<p></p> (two red boxes: one with "Shopping:", one empty)

Break #2

Size an inline element

Set width: 300px; margin-top: 40px; on a <span> or <a>.

terminal

$ the page shows

── what you'll see ──

The span is still only as wide as its text, and the lines above it don't move.

Myth vs fact

Myth

<div> is the basic building block of every page.

Fact

<div> is the fallback when no meaningful element fits. Most page parts have a better element: header, nav, main, section, article, p, ul.

Myth

Inline elements can never contain block elements.

Fact

Mostly true, with exceptions: <a> is transparent and may wrap blocks (a whole card), as long as it contains no other interactive element.

Myth

An element is block or inline because of its HTML.

Fact

The look comes from CSS display, set by the browser's default stylesheet. HTML decides only what an element may contain and what it means.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The HTML Living Standard no longer uses the words block and inline for content rules; it uses content categories (flow, phrasing, heading, sectioning, embedded, interactive). Block/inline survive in CSS as the outer display type of a box.
▸
display: inline-block is a box that is inline on the outside (it sits in the line) and block on the inside (it takes width, height and vertical padding). Modern CSS writes it as the two-value syntax display: inline flow-root.
▸
Inline boxes split across lines are called fragments; padding and borders apply to each fragment's start and end only. CSS box-decoration-break: clone repeats them on every line (support varies; Chromium needs the -webkit- prefix).
▸
Whitespace between inline-block elements is rendered as a space (about 4px at default font sizes). It's real text in the DOM, which is why gaps appear between inline-block cards; flexbox and grid ignore it.

Remember this

1
The browser places elements in normal flow: the default way boxes are laid out when you add no CSS. Normal flow has two directions. Block boxes stack from top to bottom, one under the other. Inline boxes run from left to right (in English) inside a line, and wrap onto the next line when there's no room.
2
A block-level element starts on a new line and stretches to fill the full width of its container. <p>, <h1>–<h6>, <ul>, <li>, <blockquote>, <div> and the layout elements you'll meet in Topic 2.2 are block by default. An inline element sits inside the text and is only as wide as its content: <a>, <strong>, <em>, <span>, <code>, <img> and <br> are inline by default.
3
Inline boxes ignore width and height, and their top and bottom margins don't push other lines away. That's why setting width: 200px on a <span> does nothing. <img> is a special case: it's inline, but it's a replaced element (its content comes from outside the HTML, the image file), so it does take a width and height and sits in the line like one big letter.
4
Block and inline are really CSS, not HTML: each element has a default display value (block or inline) from the browser's built-in stylesheet, and you can change it with CSS (display: block, inline, inline-block, flex, grid). The HTML rule that matters is a different one: the content model, the list of what each element is allowed to contain.
5
Modern HTML groups elements into content categories. Flow content is almost everything that can go in <body>. Phrasing content is the text-level subset: text and inline elements like <span>, <em>, <a>, <img>. The key rule: <p> and the headings may contain only phrasing content. A <div>, a list or another <p> inside a <p> is invalid, and the parser closes the paragraph before it (you'll see this live below).
6
<div> and <span> are the two generic elements: they mean nothing at all. <div> is a generic block box for grouping things so CSS or JavaScript can target them; <span> is a generic inline box for marking part of a line. Use them when no meaningful element fits. Reach for <p>, <nav>, <em> and friends first, because a meaningful element tells browsers, search engines and screen readers what the content is, while a div tells them nothing.

Explain it without notes

What is the difference between a block-level element and an inline element? Give two examples of each.

Why does <p>Intro <div>box</div></p> produce two paragraphs in the DOM?

When should you use div and span, and when should you avoid them?

Why does width have no effect on a <span>, but does on an <img>?

Practice

Mark the price in <p>Only 499 rupees today</p> so it can be styled bold and green, without giving it extra meaning.

This HTML is invalid: <p>Steps:<ol><li>Mix</li><li>Bake</li></ol></p>. Rewrite it correctly.

Make a link Read more that takes the full width of its container and has 12px padding, without changing it into a different element.

Trade-offs

↔
Wrapping everything in extra divs makes styling hooks easy but deepens the DOM, which slows style and layout work on big pages and adds noise for anyone reading the code; add a wrapper only when you need one.
↔
Changing display in CSS keeps meaning and look separate, but can confuse readers of the HTML: a <li> styled inline still reads as a list item to a screen reader, which is usually what you want.

Done when you can

I can say whether a common element is block or inline by default.
I can explain normal flow in one sentence.
I know <p> and headings may contain only phrasing (text-level) content.
I can predict how the parser repairs a block inside a paragraph.
I use div and span only when no meaningful element fits.

Command Palette

Words you'll meet

Step by step

01Look at blocks stacking

02Look at inline boxes sharing a line

03Group with div, mark with span

04Know what may nest in what

05See the parser repair a bad nest

06Change display with CSS when you need to

Try it yourself

Predict, then turn a block inline

Fix the broken nest

Find the defaults in DevTools

Code & diagrams

Break it on purpose

Put a list inside a paragraph

Size an inline element

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can