Module 4 of 10 · 5 lessons

Semantic HTML Tutorial: Landmarks, Article and Section

Q: What is semantic HTML?

It is markup that describes what content means. A <nav> says "this is navigation" and an <article> says "this is a self-contained piece". A <div> says nothing at all. Browsers, screen readers and search engines use that meaning to understand a page and move around in it. How the page looks is a separate job, and CSS does it.

Q: What is the difference between article and section in HTML?

Use <article> for content that makes sense on its own and could be shared or reused somewhere else: a blog post, a news story, a product card. Use <section> for a themed group of content inside a page or article, usually with its own heading. If all you need is a box to style, use a <div> .

Generic boxes, page landmarks and what meaningful tags buy you.

Start: div and span

Illustration of a web page drawn like a floor plan with header, navigation, main content, sidebar and footer

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Semantic HTML means picking elements for what the content is. How it looks is a question for CSS. In this module you give a whole page a structure that a browser can read, where before there was a pile of anonymous boxes.

You begin with div and span, the two generic containers. They are handy hooks for styling and tell nobody what is inside them. Next, header, nav, main and footer introduce landmarks. These are regions that browsers and assistive technology recognize, so a screen reader user can jump straight to the navigation or the main content. The W3C landmark regions guide (opens in a new tab) describes how. Article, section and aside split the main content into self-contained pieces, themed groups and side notes.

Then you do it for real. Fix the Div Soup hands you a page built only from <div> elements, and you swap them for the right semantic tags. You will do this exact refactoring on old projects at work, probably more than once.

Semantic markup (opens in a new tab) helps screen reader users, makes the code easier to maintain and gives search engines less to guess. It costs you nothing. Typing <nav> takes less effort than typing <div class="nav">, and the browser learns far more from it.

The module ends with a blog page project: a header, navigation, an article and a footer. Plan about 45 minutes. Keep the main and article reference pages open while you work. The free HTML5 starter templates (opens in a new tab) at html5-templates.com show the same landmarks in complete page layouts.

What you will learn

Say what semantic HTML is and why it beats a page built from divs
Reach for div and span only when no meaningful element fits
Lay out a page with header, nav, main and footer landmarks
Pick the right one of article, section and aside
Turn a page made of divs into clean semantic HTML
Build a complete blog page with an outline that makes sense

Lessons

Frequently asked questions

What is semantic HTML?

It is markup that describes what content means. A <nav> says "this is navigation" and an <article> says "this is a self-contained piece". A <div> says nothing at all. Browsers, screen readers and search engines use that meaning to understand a page and move around in it. How the page looks is a separate job, and CSS does it.

What is the difference between article and section in HTML?

Use <article> for content that makes sense on its own and could be shared or reused somewhere else: a blog post, a news story, a product card. Use <section> for a themed group of content inside a page or article, usually with its own heading. If all you need is a box to style, use a <div>.

Does semantic HTML help SEO?

Yes, indirectly. Semantic elements and a tidy heading outline help search engines find the main content, tell it apart from navigation and footers, and see what each section covers. Pages also get more accessible, and users notice. Semantic HTML will not lift your ranking by itself. It takes guesswork away from crawlers, which is what Google's SEO starter guide (opens in a new tab) asks for.