Semantic markup and headings

Semantic markup is elements like header, nav, main, article, section and footer that name the parts of a page, with headings h1 to h6 in order.

Markup with meaning

In the last lesson you built a page from a table. To the eye it looked like a site, but to a program it was cells: no heading, no menu, no main part. And a page has other readers besides the eye.

• A screen reader. A blind person listens to the page. A good program can list the areas (header, menu, main content, footer) and the headings, and the person jumps between them instead of listening to everything in a row. In WebAIM’s surveys, screen reader users most often say they begin looking for something by going through the headings.
• A search engine. It needs to know what is the main thing on a page and what repeats on every one.
• Reader mode and the translator in a browser pull the main text out of a page if it is marked up by meaning.
• You yourself. Opening the file a year from now, you’ll understand <nav> faster than <div class="m2">.

Meaning is written with elements. They color nothing and move nothing: CSS will do that. They only name what a piece of the page is.

The main elements

• <header> is the header of a page or a section: a name, a logo, a menu.
• <nav> is navigation: the main menu or another block of links around the site. It’s usually made as a list, because a menu is a list of items.
• <main> is the main content of the page. There is one: it’s what people came for.
• <section> is a section with a heading of its own.
• <article> is a self-contained piece that makes sense outside the page: a service card, a post, a review.
• <aside> is something extra to the main content: contacts, a sidebar, related links.
• <footer> is the page footer: an address, rights, secondary links.

And where there is no meaning, there is still <div>, a “box with no meaning”. You need it to group pieces for layout, for example. The problem isn’t that div exists. It’s when it replaces elements that have meaning.

An element can be given a name with the class attribute: <article class="card">. It means nothing in HTML, but CSS can later use it to find the elements it needs. We use it in this course so that the page is ready for styles.

Check yourself: how many main elements are on a page, and why?

One: it’s the main content that people came for. A second main would confuse a program that is looking for where the “main part” is.

What a program sees

This diagram shows a page the way a program takes it apart: a list of areas and a table of contents made from the headings. Try both examples and edit the markup: delete main, change an h2 to h4, add a second h1. The diagram will tell you what got worse.

Semantic markup All divs

Markup (you can edit it) <header> <p>Project name</p> <nav aria-label="Sections"><ul><li><a href="#a">About me</a></li></ul></nav> </header> <main> <h1>Project name</h1> <section> <h2>Services</h2> <article><h3>First service</h3><p>Description.</p></article> <article><h3>Second service</h3><p>Description.</p></article> </section> <section> <h2>Contact</h2> </section> </main> <aside><h2>Get in touch</h2></aside> <footer><p>Address and copyright</p></footer>

Landmarks

No landmarks at all. A screen reader can only read everything in a row, from top to bottom.

Headings

No headings at all. You cannot move around the page by sections.

Check yourself: what will a program see in a page made entirely of divs?

Nothing: no areas and no headings. Only flat text that has to be read in a row.

A table of contents from headings

Headings from h1 to h6 work as a table of contents. They follow simple rules:

1. One h1 per page: it says what the page is about.
2. Sections get h2. Inside a section, subsections get h3, and so on deeper.
3. The levels go in order. After h2 you don’t jump to h4: the table of contents would have a hole.
4. You choose the level by position in the structure, not by letter size. If h3 is too small, that is a job for CSS, not a reason to use h2.

There was a temptation to simplify: it was said that in HTML5 you could put an h1 in every section and the browser would work out the level itself. A so-called “document outline algorithm” was planned, but no browser and no screen reader ever supported it, and in 2022 its description was removed from the specification. So you set the levels by hand.

What about <b> and <i>? For meaning there are <strong> (important) and <em> (stress emphasis). The tags b and i stayed, but they now mean only “set in bold” and “set in italics” with no importance attached. Choose by meaning.

Check yourself: can you put an h4 straight after an h2?

No: a level is skipped, and the table of contents gets a hole. After h2 comes h3.

What they did in 2005, and what we do now

In 2005 there were no semantic elements yet: they were invented in HTML5, which only became a Recommendation in 2014. The web standards movement, which had begun earlier (Jeffrey Zeldman, the book “Designing with Web Standards”, 2003), demanded that meaning be separated from looks. Structure was then written from div elements with clear names: <div id="header">, <div id="nav">, <div id="content">. It was an attempt to express meaning with what was at hand.

We write a 2005 page with modern elements. The idea is the same as it was then, only the language is richer. That’s a fair trick: in this course we repeat the eras by approach, but we don’t make you write worse than you can.

Practice

In front of you is a page in the spirit of 2005: a grid made of a table, and labels made with font. Rewrite it by meaning. All your details are already in the page: the name, the sections, the services and the contacts. You need to move them into semantic elements and write a couple of sentences about each section in place of the ellipses.

This version goes into era 2 of your time machine, and further on in this era you’ll keep building it up: links, pictures, a table, and in the CSS part the looks.

What was wrong with 2005

Pages were already split into structure and looks, but the structure was written from nameless div elements, and programs still didn’t know where the header was and where the main content was. Several big things were missing too: sites could hardly adapt to a screen, and accessibility was a matter of goodwill. All of that comes in the next eras.