20 min read

Semantic Page Layout

header, nav, main, section, article, aside and footer — elements that describe the regions from your wireframe — plus div and span.

What Does Semantic Mean?

Remember the regions in your wireframe: header, navigation, main content, sidebar and footer. HTML has an element for each one.

Semantic layout elements
Semantic layout elements

How the tea room home page is structured

The same header, nav and footer appear on every page; only main changes.

The Home Page Structure

index.html (body only)HTML

1<body>2  <header>3    <a href="index.html"><img src="images/logo.svg" alt="Ceylon Leaf Tea Room home" width="200"></a>4    <nav>5      <ul>6        <li><a href="index.html">Home</a></li>7        <li><a href="menu.html">Menu</a></li>8        <li><a href="gallery.html">Gallery</a></li>9        <li><a href="order.html">Order</a></li>10        <li><a href="about.html">About</a></li>11      </ul>12    </nav>13  </header>14 15  <main>16    <section>17      <h1>Welcome to the Ceylon Leaf Tea Room</h1>18      <p>Fresh Ceylon tea and homemade cakes in the heart of Galle Fort.</p>19    </section>20 21    <section>22      <h2>Why visit us?</h2>23      <article>24        <h3>Fine Ceylon teas</h3>25        <p>Twelve teas from the hill country.</p>26      </article>27      <article>28        <h3>Homemade sweets</h3>29        <p>Love cake, Swiss roll and kokis, baked every morning.</p>30      </article>31    </section>32  </main>33 34  <footer>35    <p>12 Church Street, Galle Fort · Open daily 9 am – 7 pm</p>36  </footer>37</body>

What the browser shows

Without CSS the page looks plain — that is expected. The structure is now clear to browsers, screen readers and search engines, and it is ready to be styled.

div and span

Generic containers

$<div>$	$<span>$
$A block container — starts on a new line and takes the full width$	$An inline container — sits inside a line of text$
$Groups larger chunks for layout, e.g. a row of cards$	$Wraps a few words, e.g. to colour a price$
$<div class="cards">\dots</div>$	$<p>Only <span class="price">LKR 650</span></p>$

div and span have no meaning of their own. Use a semantic element when one fits; use div/span only for styling hooks.

Practice

Select the semantic layout elements.

Choose all that apply.

More lessons in HTML · Next: HTML Tables · Previous: Links Between Pages