Chapter 11 — Layout Basics

Learning Outcome

Understand block vs inline elements, and use <div> and <span> to structure and style content.

← 10 - Forms & User Input | Next → 12 - CSS JS Integration & Accessibility

11.1 Block vs Inline Elements

This is one of the most fundamental concepts in HTML layout.

Block-Level Elements

Start on a new line
Take up the full width available (by default)
Can have width, height, margin, padding applied
Stack vertically

<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<!-- Each starts on its own line -->

Common block elements: <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <blockquote>, <pre>, <hr>

Inline Elements

Flow within text — no line break
Width/height = determined by content (can't set with CSS by default)
Sit side by side in the same line

<p>
  I love <strong>HTML</strong> and <em>CSS</em> and
  <a href="#">web development</a>.
</p>
<!-- All flow within the same paragraph line -->

Common inline elements: <span>, <a>, <strong>, <em>, <mark>, <code>, <img>, <input>, <label>, <button>, <abbr>, <sub>, <sup>, <br>

Inline-Block

Behaves inline (no line break) but accepts width and height. <img> and <input> are naturally inline-block. You can make any element inline-block with CSS: display: inline-block;

11.2 Quick Comparison Table

11.3 `<div>` — The Block Container

<div> (division) is a generic block-level container with no visual style and no semantic meaning on its own.

Use <div> when:

No semantic tag fits the purpose
You need to group elements for CSS/JS targeting
Creating layout sections that will be styled with CSS

<!-- Grouping for CSS styling -->
<div class="card">
  <div class="card-header">
    <h2>Product Name</h2>
    <span class="badge">New</span>
  </div>
  <div class="card-body">
    <p>Product description here.</p>
    <p class="price">₹999</p>
  </div>
  <div class="card-footer">
    <button>Add to Cart</button>
  </div>
</div>

Semantic First, div Second

Before reaching for <div>, ask: "Is there a semantic tag for this?"

Navigation? → <nav>
Article? → <article>
Page section? → <section>
Top of page? → <header> Only use <div> when none of the above fit.

11.4 `<span>` — The Inline Container

<span> is a generic inline element — it wraps part of text within a line without breaking flow.

Use <span> when:

You want to style or target part of text within a paragraph
No semantic inline tag fits (like <strong>, <em>, <mark>)

<!-- Style part of a sentence -->
<p>
  The price is <span style="color: red; font-weight: bold;">₹499</span> only.
</p>

<!-- Target text with a class for JS -->
<p>
  Your score: <span class="score" id="score-value">87</span>/100
</p>

<!-- Multiple uses in one paragraph -->
<p>
  Temperature: <span class="temp hot">42°C</span> in
  <span class="city">Chennai</span> today.
</p>

11.5 `<div>` vs `<span>` — Side by Side

<!-- div: wraps a BLOCK of content -->
<div class="alert-box">
  <strong>Warning:</strong> This action cannot be undone.
</div>

<!-- span: wraps a WORD or PHRASE within text -->
<p>
  This action <span class="danger-text">cannot be undone</span>.
</p>

11.6 Nesting Rules

Block elements can contain both block and inline elements. Inline elements should only contain inline elements — not block elements.

<!-- ✅ Correct: block contains block and inline -->
<div>
  <h2>Title</h2>
  <p>Some <strong>bold</strong> text.</p>
</div>

<!-- ✅ Correct: inline contains inline -->
<p>Text with <a href="#"><strong>bold link</strong></a>.</p>

<!-- ❌ Wrong: inline element containing block element -->
<span>
  <div>This is invalid HTML</div>
</span>

<!-- ❌ Wrong: inline inside inline that can't nest -->
<a href="#">Click <a href="#">nested link</a></a>

🚀 Recommended Projects

Project 1 — Product Card Layout

Create 3 product cards using <div> containers. Each card should contain:

<img> for product image
<h3> product name
<p> with <span class="price"> for price
<button> Buy Now All 3 cards side by side using display: flex in CSS.

Project 2 — Magazine-style Layout

Build a two-column page layout using <div> containers:

Left <div> (width 70%) for main article
Right <div> (width 30%) for sidebar
Use <span> to highlight key terms in the article text

📌 Quick Recall

Block = new line, full width (<div>, <p>, <h1>) — stacks vertically
Inline = flows in text, content-width (<span>, <a>, <strong>) — sits side by side
Inline-block = inline flow but accepts dimensions (<img>, <input>)
<div> = block container — group elements for layout/styling
<span> = inline container — style part of text without line break
Inline elements must not contain block elements
Prefer semantic tags (<header>, <nav>, <section>) over <div> when possible