HTML · The document layer
What semantic elements did HTML5 add?
Short answer
HTML5 added elements such as header, nav, main, article, section, aside and footer. They describe page structure and expose landmarks that assistive technology can navigate.
Before HTML5, developers used divs with class names like header, nav and footer. HTML5 turned those conventions into elements with real semantics, so browsers and assistive technology can expose them as regions.
- header introduces a page or a section
- nav marks a block of major navigation links
- main holds the dominant content of the page
- article is self-contained, distributable content
- section is a themed grouping that usually has a heading
- aside is tangential content such as a sidebar
- footer closes a page or a section
<header>
<h1>Product documentation</h1>
</header>
<nav aria-label="Documentation">
<a href="/start">Getting started</a>
<a href="/api">API reference</a>
</nav>
<main>
<article>
<h2>Installing the CLI</h2>
<p>Install the package and run the setup command.</p>
</article>
</main>
<footer>Updated October 2026</footer>The elements are not a replacement for headings. Each section or article should still have a heading that describes it. Semantic elements tell you what a region is; headings tell you what it is about.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between section and article?
- 2How many main elements should a page have?
- 3Does a header have to be at the top of the page?
- 4Do semantic elements replace headings?
Say it in the interview
HTML5 introduced elements like header, nav, main, article, section, aside and footer to describe page structure. They replace divs with class names and expose landmarks that screen readers can navigate. I still use headings inside them to describe the content. And I remember that the element alone is not enough: a nav needs a clear label if there are several, and a page should have one main region.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.