Semantic page structure

Most pages share the same rough shape: a header, a menu, the main content and a footer. HTML has an element for each, and screen readers let users jump straight to them.

From div soup to landmarks

For years, pages were built from <div> elements with class names such as header or menu. A <div> is a generic box with no meaning at all, so the class name was the only clue, and only people reading the code could see it. HTML now has elements that say what each region is. Browsers, search engines and assistive technology understand them, and screen reader users can open a list of these regions, called landmarks, and jump to the one they want, the same way sighted users glance at the layout.

The main regions

• <header>: introductory content, usually the site name or logo and often the main menu. An article can have its own header too.
• <nav>: a block of major navigation links, such as the site menu or a table of contents. Not every group of links needs one.
• <main>: the content that is unique to this page. Use exactly one visible <main> per page, and do not put it inside header, nav, aside or footer.
• <article>: a self-contained piece that would make sense on its own, such as a blog post, a news story or a product card.
• <section>: a thematic part of a page or article, normally with its own heading.
• <aside>: content related to the main content but separate from it, such as a sidebar, a glossary box or related links.
• <footer>: closing information such as the author, copyright and contact links.

These elements describe meaning, not position. A <nav> does not have to sit at the top, and an <aside> does not have to be on the right; on a phone the aside usually ends up below the main content. Positions come from CSS. Choose the element by asking what the content is, the same way you chose heading levels by structure rather than size.

article or section?

The question to ask is whether the piece would make sense on its own somewhere else, for example in a news reader or shared as a link. If yes, it is an <article>. If it only makes sense as part of something larger, like the Ingredients part of a recipe, it is a <section>. Both should normally start with a heading. Articles can contain sections, and a section can contain articles, such as a Latest posts section holding several post cards.

div and span still have a place

When no element fits, use <div> for a block and <span> for a few words inside a line. They are useful as hooks for CSS, for example a <div class="cards"> that arranges cards in a grid. The rule is to reach for a meaningful element first and fall back to a generic one only when nothing describes the content. A page made only of divs works, but it hides its structure from everyone who does not look at the code.

A quick test: open your page with CSS switched off, or read the outline of headings and landmarks a browser extension shows you. If the page still reads in a sensible order, with a clear header, menu, main content and footer, the structure is doing its job.

Native elements before ARIA

You may meet the role attribute, part of a W3C standard called WAI-ARIA, written as <div role="navigation">. It gives a generic element a meaning for assistive technology. The W3C guidance on using ARIA starts with a simple rule: if a native HTML element already has the meaning you need, use it instead. <nav> is shorter, works everywhere and cannot be forgotten in one place and remembered in another. The same idea applies to buttons: a real <button> can be focused with Tab and pressed with Enter or Space for free, while a clickable <div> needs extra code to do the same.