</>
Skip to content
HTML lessons (26/60)

HTML — Layout

Friendly intro (what & why)

When you write a page, the browser shows the content in a vertical stack by default.
A layout is the way you organize that stack into sections, columns, or grids.
Good layout helps readers find information quickly and makes a page look polished.

1. The natural flow

The simplest layout is the normal flow.
Every block element starts on a new line and stretches to the full width of its container.

<!DOCTYPE html>
<html>
<head>
  <title>Flow layout</title>
</head>
<body>
  <h1>My Blog</h1>
  <p>This is the first paragraph of the blog post.</p>
  <p>This is the second paragraph.</p>
</body>
</html>

What the browser displays

A big title at the top, followed by two paragraphs stacked vertically.

2. Grouping with <div>

A <div> is a generic container that has no semantic meaning.
It is useful when you need to apply styles or group content.

<div class="post">
  <h2>Post Title</h2>
  <p>Some interesting text.</p>
</div>

Good to know: Use <div> only when no semantic element fits.

3. Semantic sections

HTML5 introduced elements that describe the role of the content.

ElementTypical useExample
<header>Header of a page or section<header><h1>Site Title</h1></header>
<nav>Navigation links<nav><a href="#">Home</a></nav>
<main>Primary content<main><article>...</article></main>
<footer>Footer of a page<footer>© 2026</footer>
<header>
  <h1>My Website</h1>
</header>
<nav>
  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Contact</a>
</nav>
<main>
  <article>
    <h2>Article 1</h2>
    <p>Content goes here.</p>
  </article>
</main>
<footer>
  © 2026 My Website
</footer>

What the browser displays

A header with the site title, a horizontal navigation bar, main article content, and a footer at the bottom.

4. Using <section> and <article>

<section> groups related content.
<article> represents a self‑contained composition that could stand alone.

<section>
  <h2>News</h2>
  <article>
    <h3>Headline 1</h3>
    <p>Summary of the first news item.</p>
  </article>
  <article>
    <h3>Headline 2</h3>
    <p>Summary of the second news item.</p>
  </article>
</section>

Common mistake: Mixing <section> and <article> without a clear purpose.
Use <section> for thematic grouping, <article> for independent content.

5. Adding spacing: margins and padding

Margins create space outside an element; padding creates space inside.

<div style="margin: 20px; padding: 10px; border: 1px solid #ccc;">
  <p>This box has outer space and inner space.</p>
</div>

What the browser displays

A bordered box with space around it and inside it, keeping the text from touching the border.

6. Creating a simple grid with <table>

Tables were originally for tabular data, but you can use them for simple grids.

<table border="1" cellpadding="5">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.20</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>$0.80</td>
    <td>30</td>
  </tr>
</table>

What the browser displays

A simple table with a header row and two data rows, each cell separated by borders.

7. Comparison: Block, Inline, Inline-block

Element typeDefault behaviorWhen to use
BlockStarts on a new line, full widthHeaders, paragraphs, divs
InlineNo line break, width of contentLinks, spans, icons
Inline-blockLike inline but respects width/heightButtons, small cards

Good to know: <span> is inline, <div> is block.

8. Simple two‑column layout with <aside> and <section>

<section style="float: left; width: 70%;">
  <h2>Main Content</h2>
  <p>Lots of text goes here.</p>
</section>
<aside style="float: right; width: 25%;">
  <h3>Sidebar</h3>
  <p>Links, ads, or notes.</p>
</aside>
<div style="clear: both;"></div>

What the browser displays

A left‑aligned main section taking most of the width, and a right‑aligned sidebar taking a smaller portion, with a clear below to keep them together.

9. Using <figure> and <figcaption> for images

<figure>
  <img src="photo.jpg" alt="A scenic view" width="300">
  <figcaption>Figure 1: Sunset over the hills.</figcaption>
</figure>

What the browser displays

An image with a caption underneath, treated as a single unit.

10. Summary of layout building blocks

  • Use semantic elements (header, nav, main, article, section, footer) for structure.
  • Group non‑semantic content with <div> when needed.
  • Add spacing with margin and padding.
  • Create grids with <table> or sidebars with float.
  • Keep accessibility in mind: use meaningful headings and alt text.

Common mistakes checklist

  • ❌ Mixing <div> and semantic tags without clear intent.
  • ❌ Using tables for layout instead of CSS.
  • ❌ Forgetting to clear floats, causing layout collapse.
  • ❌ Relying on inline styles for large projects.
  • ❌ Not adding alt attributes to images.

Mini Practice

  1. Build a simple page skeleton with <header>, <nav>, <main>, and <footer>.
  2. Inside <main>, create two <article> elements, each with a heading and a paragraph.
  3. Add a sidebar using <aside> floated to the right with a width of 25%.
  4. Insert a <figure> containing an image and a caption below it.
  5. Style the page with basic margins and padding using inline styles.

Related Topics

HeadResponsiveComputercodeSemantics

Frequently Asked Questions about Layout

What is Layout in HTML?

Layout is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Layout?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Layout.

Why is Layout important in HTML?

Layout is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.