HTML · Lesson 9 of 9

Semantic HTML

header, nav, main, section, article, footer — and why they matter.

Semantic elements say what content is, not how it looks. They help screen readers, search engines and other developers.

<header> — intro or top bar; <nav> — main navigation links.
<main> — the main content (one per page).
<section> — a themed group with a heading; <article> — content that stands alone (a post, a job card).
<aside> — side content; <footer> — closing info.

Use <div> and <span> only when no semantic element fits.

Try it yourself

Code editor

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

Semantic tags describe meaning.
One <main> per page.
<article> for self-contained items.

Quick check

Which element should wrap the page's primary content?

Practice task

Rewrite a page made only of <div>s using header, nav, main, article and footer.

Interview corner

What is semantic HTML and why does it matter?

Using elements for their meaning (nav, main, article). It improves accessibility, SEO and code readability.

<section> vs <article>?

An article is self-contained and could be shared on its own (a post, a job card). A section groups related content within a page, usually with a heading.