Semantic HTML5 Elements

Introduction

You can build a whole page out of div elements, and it would look fine. But a div says nothing about its purpose. Semantic elements have a meaning built into their name. HTML5 added several of them, and they make pages easier to read, to maintain, and to use with a screen reader.

What does semantic mean?

Semantic means the tag describes what the content is, not how it looks.

Compare these two:

<div class="top">...</div>
<header>...</header>

The div is a mystery box. The header clearly says "this is the introductory part". Browsers, search engines and assistive technology can all use that meaning.

The page-structure elements

• header: introductory content, often with a logo and title.
• nav: a block of main navigation links.
• main: the unique main content of the page. Use one per page.
• section: a themed group of content, usually with a heading.
• article: a self-contained piece that makes sense on its own, like a blog post or news story.
• aside: related side content, like a tip box or sidebar.
• footer: closing content such as copyright and links.

section or article?

Ask: "Could this be shared on its own and still make sense?"

• If yes, use article (a blog post, a comment, a product card).
• If it is just one themed part of a larger page, use section.

Both should usually have a heading inside.

When div is still right

div and span are not bad. Use them when no semantic element fits, such as a wrapper that only exists for layout or styling. A good rule: reach for a semantic element first, and use div as the fallback.

Try it yourself

Turn this page into a semantic one. Replace the div elements with header, main and footer and press Run. It will look the same, but the structure is now meaningful.

Summary

• Semantic elements describe meaning: header, nav, main, section, article, aside, footer.
• Use article for self-contained content and section for themed groups.
• Use div only when no semantic element fits.