Quiz Entry - updated: 2026.07.14
What are semantic HTML5 container elements?
Semantic container elements name what a region of the page means — like <header>, <nav>, <main>, <article>, or <footer> — instead of being generic boxes.
Before HTML5, developers built page regions out of plain <div> boxes labelled with class names. Semantic elements replace many of those with tags that carry built-in meaning, so the markup itself communicates structure:
| Element | Purpose |
|---|---|
<main> |
The page's primary content — only one per page |
<header> |
Introductory area: logos, a motto, links to the imprint or contact |
<footer> |
Closing info: author, copyright, links (not necessarily at the very bottom) |
<nav> |
A block of navigation links |
<article> |
Self-contained content, like a news article |
<section> |
A thematic grouping of content, typically with a heading |
<aside> |
Content only indirectly related to the surroundings — sidebars, footnotes |
Why bother instead of using <div> everywhere?
- Screen readers can announce regions ("navigation", "main content"), helping users jump around.
- Search engines index a clearly structured page more effectively.
- Other developers (and your future self) read the code faster.
<div> and <span> are still around as non-semantic containers — reach for them only when no semantic element fits the meaning.
Go deeper:
Semantics — MDN Glossary — what "semantic" markup means and why it beats <div>soup.- Semantic HTML — Wikipedia — concept overview and the move away from presentational tags like
<font>.