FrançaisGet started

Semantic elements

header, nav, main, section, article, aside, footer, figure, time and address versus div and span: choosing the element that says what each zone holds, and what that brings to screen readers and search engines.

  • 23 cards
  • 4 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios

A few cards from the deck

  • Semantic HTML: what is it?

    Show the answer

    Using tags according to the meaning of the content they wrap, rather than the look wanted, so software understands the structure of the page.

    A screen reader can jump straight to the menu or the content if those zones are marked up. A page made of div offers no landmarks.

  • How many visible main elements does a page contain?

    • Just one
    • One per section
    • One per article
    • As many as you want
    Show the answer

    Just one

    main designates the main content of the page: by definition it is unique. Screen readers offer to jump straight to it, and several main make that shortcut ambiguous.

  • The … element wraps a group of main navigation links, and the … element the page footer, with legal notices or contacts.

    Show the answer

    The nav element wraps a group of main navigation links, and the footer element the page footer, with legal notices or contacts.

    Not every link goes in a nav: it is reserved for major navigation blocks (main menu, table of contents), not for a mere list of links inside an article.

  • main: what is it?

    Show the answer

    A tag that wraps the content specific to the page, the part that is not repeated from page to page on the site.

    There is only one per page (visible). The banner, menu and footer, shared across the site, stay outside it.

  • A page is made only of div: a screen reader finds no landmark in it. What should change first?

    • Give each div of the page a different, meaningful CSS class
    • Use header, nav, main and footer for the big zones
    • Add a unique, explicit id to each div of the page
    • Replace each div with a span
    Show the answer

    Use header, nav, main and footer for the big zones

    Classes and id only speak to CSS and JavaScript. A screen reader does read the text inside div, but only semantic elements give it landmarks, hence its shortcuts to the menu or the content. span has no more meaning than div.

Study this deck