Semantic tags

header, nav, main, article, section and footer are div with meaning. They look the same and tell readers and search engines what each part of the page is.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

A screen reader can jump straight to main or to the navigation, but only if they are marked. A page built from divs is a page without landmarks.

How to think about it

Sketch the page as regions: the top bar, the links, the one main area, the pieces inside it, the end matter. Give each its tag; use div only for boxes that are purely visual.

Worked example

<header><h1>Site</h1><nav><a href="/">Home</a></nav></header>

The top of the page: the name and the links for getting around.

<main><article><h2>Post</h2><p>Body</p></article></main>

main once per page; article is a self-contained piece that would make sense on its own.

<footer><p>Made by us</p></footer>

The end matter: credits, legal links, contact.

Your turn

Wrap the page's unique content.

<><h1>Today's post</h1></>

The trap

Several main elements, or main wrapped around the header and footer too. One main, holding only what is unique to this page.

Practise semantic tags on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.