Html5 Semantic

Semantic HTML5 elements such as <header> , <nav> , <main> , <article> , and <footer> describe the meaning of each region of a page, giving browsers, search engines, and screen readers a real document structure instead of anonymous <div> wrappers.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll be able to replace generic < div > soup with meaningful HTML5 elements that give your page a real document outline — making it easier for search engines to index and for screen-reader users to navigate.

What You'll Learn

💡 Think of It Like This

A web page is like a newspaper. It has a masthead at the top ( < header > ), a table of contents linking sections ( < nav > ), the main story area ( < main > ) full of individual articles ( < article > ), a sidebar of related snippets ( < aside > ), and the fine print at the bottom ( < footer > ).

Now imagine a newspaper printed entirely in one font, with no headlines, columns, or boxes — just an undifferentiated wall of text. That is what a page of nothing but < div > s looks like to a screen reader or a search engine: every box says "I am a box" and nothing more. Semantic elements are the headlines and column rules that let a machine read your page the way a person reads a paper.

1. The Landmark Elements

A semantic element is a tag whose name describes the meaning of its content, not how it looks. Most of them render as a plain block box — visually identical to a < div > — but each one carries a built-in landmark role that browsers, search engines, and screen readers can act on. Here is the core set you will reach for on almost every page.

Element

Meaning / when to use

Screen-reader role

Run the worked example below. Notice that every landmark is just a labelled box — but a screen-reader user can jump straight to "main" or "navigation" because of those labels, something impossible with bare < div > s.

2. < article > vs < section > — the one test

This is the pairing that trips everyone up. The deciding question is simple: would this content still make sense lifted out of the page and published on its own? If yes — a blog post, a news item, a product card, a comment — it is an < article > . If it is just one labelled part of a bigger whole — a chapter, a "Features" block, a tab panel — it is a < section > .

A second rule helps too: a < section > should always have a heading ( h2 – h6 ). If a chunk has no natural heading and is only there for layout, you probably want a plain < div > instead. They can also nest: an < article > can contain < section > s, and a < section > can contain < article > s.

3. Content-level semantics: < figure > , < time > , < mark >

Semantics are not only about page-level landmarks; smaller elements add meaning inside your content too:

• < figure > wraps a self-contained illustration — an image, chart, code block, or quote — and < figcaption > gives it a caption that is programmatically linked to it (better than a loose paragraph underneath).
• < time datetime="..." > marks up a date or time in a machine-readable format. The visible text can read "last Tuesday" while datetime="2026-06-09" tells machines the exact value.
• < mark > highlights text for relevance — like the yellow highlighting of your search term in results. It means "noteworthy here", not just "make it yellow".

4. Div Soup vs Semantic HTML

"Div soup" is markup where every region is a < div > with a class — < div class="header" > , < div class="nav" > — that looks right but means nothing to a machine. The classes are for you ; the elements should be for everyone else . Swapping each wrapper for the matching landmark is usually a one-for-one rename, and it instantly gives you the document outline below.

🎯 Your Turn #1 — Refactor div soup into landmarks

The page below works visually but is pure div soup. Replace each labelled < div > with the matching semantic element. Fill in the blanks marked ___ , then run it and check the comments.

🎯 Your Turn #2 — article, figure, time and mark

Finish this blog post so it uses content-level semantics: wrap it in an < article > , add a machine-readable date, highlight a key term, and caption the image. Fill in the blanks and verify against the comments.

🧩 Mini-Challenge — Build a semantic page from scratch

Support is faded now — only an outline is given. Build a small but complete semantic page. Use the worked examples in sections 1 and 2 as your reference if you get stuck.

⚠️ Common Errors (and the fix)

• More than one < main > . A page must have exactly one main landmark; a second one confuses assistive tech and is invalid HTML. Fix: keep a single < main > and use < section > s inside it for sub-areas.
• < section > with no heading. A section is meant to be a titled region; one with no h2 – h6 adds an empty entry to the outline. Fix: give it a heading, or use a plain < div > if it is only a styling wrapper.
• Wrapping everything in < article > . Article is for self-contained, syndicatable content — not a generic box. Fix: apply the "would it make sense published alone?" test; if no, use < section > or < div > .
• < time > without datetime . If the visible text is not a valid machine format ("last Tuesday"), machines get nothing. Fix: add datetime="2026-06-09" in ISO format.
• Using < mark > just to colour text. Mark means "relevant / noteworthy here", and screen readers may announce it. Fix: for purely visual styling with no meaning, use a < span > with a class instead.

📋 Quick Reference

What it means

❓ Frequently Asked Questions

🎉 Lesson Complete

You can now architect pages with semantic HTML5 instead of div soup. The essentials:

• ✅ Use < header > , < nav > , < main > (just one), < aside > , and < footer > for page-level landmarks
• ✅ Use < article > for syndicatable content and < section > for titled thematic groups
• ✅ Add meaning inside content with < figure > / < figcaption > , < time > , and < mark >
• ✅ Every landmark builds the document outline screen readers and search engines rely on
• ✅ Refactoring div soup is usually a one-for-one rename — and a free accessibility and SEO win

Next up: Accessibility Deep Dive & ARIA , where you'll extend these landmarks with ARIA roles and attributes for richer, more dynamic interfaces.

Practice quiz

Continue this course

• Previous: Web Accessibility
• Next: Accessibility Deep Dive & ARIA