Semantic elements
A page built only from div boxes looks fine, but it tells machines nothing about what each part is. Semantic elements are named for their meaning: header, nav, main, article, aside and footer. Swap the divs of a small page one by one and watch the page stay exactly the same while the accessibility tree, the version screen readers use, gains roles and landmarks a listener can jump between.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01You swap <div>Coffee Club</div> at the top of the page for <header>Coffee Club</header>. What changes on screen, with no CSS?
By the browser's default styles, header, nav, main, article, aside and footer are plain blocks, exactly like div. What changes is the meaning: the role in the accessibility tree turns from generic into banner.
02Which element fits a blog post that would still make sense if it were copied onto another site?
article is for a self-contained piece that stands on its own, such as a post, a recipe or a comment. aside is for side content, nav for the main links, footer for closing details.
03What role does a screen reader get for a plain <div>?
A div maps to the role generic: a box with no meaning of its own. That is why a page made only of divs gives a listener no structure.
04Which of these roles is NOT a landmark a screen reader can jump to?
article is a role, but not a landmark. The landmarks in this page are banner (header), navigation (nav), main (main), complementary (aside) and contentinfo (footer).
05You want a box of tips to appear in a column on the right. What should you do?
Elements say what content is; they do not set the layout. An aside is still drawn as a plain block until CSS moves it. Choose by meaning, style with CSS.
Glossary
- Semantic element
- An HTML element whose name says what its content is, such as <nav> for navigation links or <footer> for closing details.
- div
- A generic box with no meaning of its own. Fine for grouping or styling when no semantic element fits.
- Accessibility tree
- A version of the page the browser builds for assistive technology: each part with its role, name and state.
- Role
- What a part of the page is for, as reported in the accessibility tree: banner, navigation, main, article, generic and so on.
- Landmark
- A role that marks a large region of the page (banner, navigation, main, complementary, contentinfo and a few others). Screen readers can list them and jump between them.
- Screen reader
- Software that reads a page aloud or on a braille display, for people who cannot see the screen. NVDA, JAWS and VoiceOver are examples.
- generic
- The role of a div (and of a span): a container with no meaning. Screen readers do not announce it as anything.
Notes and sources
- The card shows the body of the page. The full file also starts with <!DOCTYPE html>, <html lang="en">, a <title> and <body>, and closes </body> and </html>.
- By the browser's default styles, div, header, nav, main, article, aside and footer are all plain blocks: each starts on a new line and takes the full width. Swapping them changes no pixel.
- header and footer are landmarks only at the top level of the page. Inside an article, aside, main, nav or section they get the role generic.
- Real screen readers also read the heading and the link. The figure shows only the six boxes, so you can follow the roles.
- MDN Glossary: Semantics
- MDN Glossary: Accessibility tree
- MDN: <header> (implicit role banner)
- MDN: <nav> (implicit role navigation)
- MDN: <main> (one visible main per document)
- MDN: <article> (self-contained composition)
- MDN: <aside> (implicit role complementary)
- MDN: <footer> (implicit role contentinfo)
- MDN: <div> (use only when no semantic element fits)
- HTML Living Standard: Sections
- HTML Living Standard: The div element
- HTML Living Standard: Rendering, flow content (display: block)
- W3C HTML Accessibility API Mappings (element to role)
- W3C WAI-ARIA 1.2: Landmark roles
- NVDA User Guide: single letter navigation (D = landmark)
Quiz Unlocks after the last step.