HTML Block and Inline Elements

What are Block and Inline Elements?

Every HTML element is displayed in one of two ways: block-level or inline. Understanding the difference helps you control how your webpage looks!

Block Elements: Take up the full width (like building blocks)
Inline Elements: Only take up necessary space (like words in a sentence)

Think of it like this: Block elements are like LEGO bricks stacked vertically. Inline elements are like words flowing in a sentence!

Block-Level Elements

Block elements always start on a new line and take up the full width available.

Example: Block Elements


<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>

<!-- Each starts on a new line -->
<h2>Heading 2</h2>
<p>Another paragraph.</p>

Key Behavior: Block elements push other elements down to the next line!

Common Block Elements

<div> – Generic container
<p> – Paragraph
<h1> to <h6> – Headings
<ul>, <ol>, <li> – Lists
<header>, <footer>, <nav> – Semantic sections
<section>, <article> – Content sections
<form> – Forms
<table> – Tables

How Block Elements Behave

Example: Block Element Behavior


<div style="background: lightblue;">First Div</div>
<div style="background: lightgreen;">Second Div</div>
<div style="background: lightyellow;">Third Div</div>

<!-- Result: Each div takes full width and stacks vertically -->

Always starts on a new line
Takes up 100% width by default
Can have width and height set
Can contain other block and inline elements

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

Example: Inline Elements


<p>
    This is <strong>bold text</strong> and this is 
    <em>italic text</em> in the same line.
</p>

<p>
    Click <a href="#">here</a> to visit our 
    <span style="color: red;">special offers</span> page.
</p>

Key Behavior: Inline elements flow like words in a sentence!

Common Inline Elements

<span> – Generic inline container
<a> – Links
<strong> – Bold text (important)
<em> – Italic text (emphasis)
<img> – Images
<b> – Bold text (visual only)
<i> – Italic text (visual only)
<code> – Code snippet
<small> – Small text

How Inline Elements Behave

Example: Inline Element Behavior


<p>
    <span style="background: yellow;">Word 1</span>
    <span style="background: lightblue;">Word 2</span>
    <span style="background: lightgreen;">Word 3</span>
</p>

<!-- Result: All spans appear on the same line -->

Does NOT start on a new line
Only takes up necessary width
Width and height properties don't work (usually)
Can only contain other inline elements

Block vs Inline: Side by Side

Example: Direct Comparison


<!-- Block Elements: Stack Vertically -->
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

<!-- Output:
Block 1
Block 2
Block 3
-->

<!-- Inline Elements: Flow Horizontally -->
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span>

<!-- Output:
Inline 1 Inline 2 Inline 3
-->

The <div> and <span> Elements

Example: Div vs Span


<!-- DIV: Block container (for sections) -->
<div class="container">
    <h2>Section Title</h2>
    <p>Section content goes here.</p>
</div>

<!-- SPAN: Inline container (for words/phrases) -->
<p>
    This is a <span class="highlight">highlighted word</span> 
    in a sentence.
</p>

Remember: Use <div> for sections, use <span> for styling parts of text!

Nesting Rules

Example: What Can Go Inside What?


<!-- ✅ Good: Block inside block -->
<div>
    <p>Paragraph inside div</p>
</div>

<!-- ✅ Good: Inline inside block -->
<p>
    This has <strong>bold text</strong> inside.
</p>

<!-- ✅ Good: Inline inside inline -->
<a href="#">Link with <strong>bold</strong> text</a>

<!-- ❌ Bad: Block inside inline -->
<span>
    <div>Don't do this!</div>
</span>

Rule: Block elements can contain inline elements, but inline elements should NOT contain block elements!

Changing Display Behavior with CSS

Example: Override Default Behavior


<!-- Make inline element behave like block -->
<span style="display: block;">
    This span acts like a block element now!
</span>

<!-- Make block element behave like inline -->
<div style="display: inline;">
    This div acts like an inline element!
</div>

<!-- Inline-block: Best of both worlds -->
<div style="display: inline-block; width: 100px;">
    Flows inline but accepts width/height!
</div>

Pro Tip: display: inline-block; is great for creating side-by-side boxes!

Practical Example

Example: Building a Simple Layout


<!-- Block elements for structure -->
<header>
    <h1>My Website</h1>
    <nav>
        <!-- Inline elements for navigation -->
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

<main>
    <section>
        <h2>Welcome</h2>
        <p>
            This is a <strong>block paragraph</strong> with 
            <em>inline emphasis</em> and a 
            <a href="#">link</a>.
        </p>
    </section>
</main>

<footer>
    <p>© 2026 My Website</p>
</footer>

Quick Reference Table

Block vs Inline Comparison


┌─────────────────┬──────────────────┬──────────────────┐
│   Property      │   Block          │   Inline         │
├─────────────────┼──────────────────┼──────────────────┤
│ New Line        │ Yes              │ No               │
│ Full Width      │ Yes              │ No               │
│ Width/Height    │ Settable         │ Not settable*    │
│ Contains        │ Block & Inline   │ Inline only      │
│ Examples        │ div, p, h1       │ span, a, strong  │
└─────────────────┴──────────────────┴──────────────────┘

* Unless using display: inline-block

Best Practices

Use block elements for layout structure
Use inline elements for text formatting
Don't put block elements inside inline elements
Use <div> for grouping block content
Use <span> for styling parts of text
Consider semantic tags over generic divs when possible

Remember: Block elements build structure, inline elements add detail!