HTML — Block and Inline

Every element is one of two kinds

HTML elements come in two display personalities:

• Block-level elements claim the full width available and always start on a new line.
• Inline elements sit inside text, only taking the space they need.

Understanding this split explains 90% of "why did that element move to a new line?" confusion.

Block elements

Common ones:

<div>   <p>    <h1>–<h6>   <ul> <ol> <li>
<table> <form> <section>   <header> <footer> <article>

Behavior:

<p>First paragraph.</p>
<p>Second paragraph.</p>

<h2>A heading</h2>
<p>Text after it.</p>

What the browser displays

First paragraph. Second paragraph.

A heading

Text after it.

(Each block stacks vertically — even if its content is one short word, nothing can sit beside it.)

Think of blocks as stacked boxes:

┌────────────────────────────┐
│ First paragraph            │
├────────────────────────────┤
│ Second paragraph           │
├────────────────────────────┤
│ A heading                  │
├────────────────────────────┤
│ Text after it              │
└────────────────────────────┘

Inline elements

Common ones:

<a>   <strong>  <em>   <img>   <span>   <code>   <b>   <i>   <br>   <input>

Behavior — they flow with the text like words do:

<p>
    This sentence has a <strong>bold word</strong>,
    an <a href="https://example.com">important link</a>,
    and an <em>emphasized phrase</em>.
</p>

What the browser displays

This sentence has a bold word, an <ins>important link</ins>, and an emphasized phrase.

(Everything stays on one flowing line; the inline elements simply style their slice of it.)

┌─────────────────────────────────────────────┐
│ This sentence has a ▓bold▓ word, an ▓link▓… │
└─────────────────────────────────────────────┘
         ↑ inline pieces live inside the line

Side-by-side comparison

Behavior	Block	Inline
Starts on new line?	Always	No
Takes full width?	Yes (even if content is short)	Only as wide as content
width/height respected?	Yes	Ignored by default
Top/bottom margins work?	Yes	Not reliably
Can contain paragraphs?	Yes	No

That third row is a classic gotcha:

<!-- Does nothing visible on an inline element -->
<a href="#" style="width: 500px; height: 100px;">Wide link?</a>

Inline elements shrug off width/height. Fix coming below.

Nesting rules

Blocks can contain both kinds:

<!-- Valid -->
<p>You can read the <a href="specs.html">full specs</a> online.</p>
<div>
    <h2>Title</h2>
    <p>Body with <strong>bold</strong>.</p>
</div>

Inline elements must not contain block elements:

<!-- INVALID: block inside inline -->
<a href="report.html">
    <p>Read the report</p>
</a>

Browsers will "repair" this unpredictably — often splitting your anchor into multiple broken links. (Modern HTML5 does allow anchors to wrap large content groups, but wrapping literal <p> tags inside inline flow still misbehaves.)

Safe mental model:

Block → can hold: blocks + inlines
Inline → can hold: inlines only

<div> and <span> — the generic containers

Every element above carries meaning (<p> = paragraph, <ul> = list). Two elements mean nothing on purpose — they exist purely for grouping and styling:

• <div> — generic block container
• <span> — generic inline container

<div class="card">
    <h3>Card title</h3>
    <p>Card body with a <span class="highlight">highlighted bit</span>.</p>
</div>

Use them when no semantic element fits. Reach for real semantic tags first (<section>, <article>…) — but know that <div>/<span> are the web's duct tape, used everywhere.

Inline-block — the bridge

A third display value solves the width problem while keeping side-by-side layout:

<style>
    .box {
        display: inline-block;
        width: 120px;
        height: 60px;
        background: teal;
        color: white;
        text-align: center;
        line-height: 60px;
    }
</style>

<a href="#a" class="box">Box A</a>
<a href="#b" class="box">Box B</a>
<a href="#c" class="box">Box C</a>

What the browser displays

(Three teal rectangles sitting side by side — each sized exactly 120×60 despite being links, which are normally inline and size-ignoring.)

Display value	New line?	Width/height?
block	Yes	Yes
inline	No	No
inline-block	No	Yes

Classic uses: styled buttons from <a> tags, nav items with padding, image grids.

For modern page layouts, Flexbox and Grid have largely replaced inline-block gymnastics — but you'll meet it constantly in existing code.

Changing display with CSS

Display is just a property — any element can switch teams:

li { display: inline; }       /* turn list into horizontal menu */
a  { display: block; }        /* make whole menu row clickable */

This is how every horizontal navigation bar is born: a semantic list, restyled via CSS.

Mini Practice

Build flow.html:

1. Two short block paragraphs — add borders so you can see each box claiming full width
2. Inside one paragraph, three inline <span>s with backgrounds — watch them flow mid-sentence
3. Try setting width on an inline span (nothing happens), then switch it to display: inline-block and try again
4. Build three inline-block boxes side by side
5. Make a <ul> horizontal using display: inline on the <li>s

Next: div →