Semantic HTML

Your page already has headings, lists, links, tables and a form. Today you give it a clear structure with tags that say what each part is.

Quick check: how many h1 headings does a page have?

One: the main title of the page.

Tags that say what they are

Look at this page made only of <div> boxes. Which box is the menu? The code does not tell you.

Semantic tags have names that say what their content is. Screen reader users can jump straight to the menu or the main content, search engines understand the page, and other developers read it faster.

Tag	What it holds
<header>	The intro area: logo, site name, sometimes the menu or a search box. An article or section can have its own header too.
<nav>	The main menu links.
<main>	The unique content of this page. Only one per page, without the parts every page repeats (logo, menu, side area, copyright).
<section>	One topic, with a heading.
<article>	Content that makes sense alone: a blog post, a comment, a review.
<aside>	Side content: related links, a note, a tip box. The side area of the page goes next to main.
<footer>	The bottom area: copyright, contact, quick links, social links.

Placement

Build the page

Required 15 XP

Section or div?

A section is a topic with a heading. A div is only a box for CSS or JavaScript, with no meaning. If you only need a box for styling, use a div.

<section>
  <h2>About us</h2>
  <p>Our small team started in 2026.</p>
</section>

Grouping

Semantic or not?

Required 15 XP

The page template, corrected

The last slide of Part 2 gives a page template. It puts <aside> inside <main>, but the slides also say that main holds no side areas, and their drawing shows aside next to main. So the aside goes after </main>. A <div class="columns"> holds both, so that CSS can put them side by side later.

Practice

Semantic page template

Required 30 XP

This is the page template from the last slide of Part 2, corrected: the side area goes next to main, not inside it. Put the lines in order.

Small helpers with meaning

• <details> makes an open-and-close box. <summary> is the title you always see. Without a summary the browser shows a default word, so always write one.
• <time datetime="2026-10-29">29 October</time> shows a date for people and gives computers a date they can read.
• <address> holds the contact details of the page owner. <abbr title="telephone">Tel.</abbr> explains a short form. On your own page, an email link is enough: no home address.
• A favicon is the small icon in the browser tab: <link rel="icon" href="icon.png"> in the head. Today it is often a small square PNG or SVG image.

Practice

Questions and answers

Required 30 XP

Write two questions and their answers for a "Questions and answers" part of a page. Each answer is hidden until people tap the question. Ideas are in the empty boxes.

Key words

Semantic

About meaning. A semantic tag says what its content is.

Region

A big part of a page: header, menu, main content, side area, footer.

Favicon

The small icon of a website in the browser tab.

In short

• header, nav, main, aside and footer name the big parts of a page.
• One main per page; the side area goes next to it.
• section = a topic with a heading; article = makes sense alone; div = only a box.
• details/summary, time and address add meaning to small parts.

Sources

1. MDN Web Docs (2026). Structuring documents.
2. W3C WAI (2024). Page Regions.
3. MDN Web Docs (2026). <details>: The Details disclosure element.
4. MDN Web Docs (2026). <time>: The (Date) Time element.
5. MDN Web Docs (2026). <address>: The Contact Address element.
6. MDN Web Docs (2026). Favicon.