Semantic HTML: eight elements to use instead of div

A div tells the browser nothing about its content. Screen readers still read the text inside it, but they cannot announce it as a region, so users cannot jump to it. Search engines have to guess its role, and the developer who opens your code next has to read the CSS to understand the layout. These eight elements carry meaning on their own.

1. header

Use it for the top of the page with your logo and navigation, or for the top of an article with its title and date. You can have more than one on a page.

2. nav

Wrap your main menus in nav. Screen reader users can jump straight to it. Give it an aria-label when you have two, for example "Main" and "Footer".

3. main

One per page. It holds the content that is unique to that page. The skip link at the top of your page should point to it.

4. article

Use article for content that would make sense on its own: a blog post, a product card, a comment. Ask yourself whether you could paste it into another site and keep its meaning.

5. section

A section groups related content under a heading. If you cannot think of a heading for it, you probably want a div.

6. aside

Put related but secondary content here: a sidebar, a pull quote, a list of related links.

7. footer

The bottom of the page or of an article. Contact details, copyright and legal links go here.

8. button

If clicking it does something on the page, use a button. A div with a click handler cannot receive keyboard focus, and Enter and Space do nothing on it unless you write extra code. The button element gives you all of that for free.

Check your work

Open your page, press Tab and walk through it with the keyboard. Then turn on VoiceOver on a Mac or NVDA on Windows and open the landmarks list (VoiceOver rotor, or NVDA elements list with Insert+F7). Screen readers use ARIA role names, so a page-level header shows up as "banner", nav as "navigation", main as "main" and a page-level footer as "content info". If you see those four, your structure works.