EnglishCommencer

Les balises sémantiques

header, nav, main, section, article, aside, footer, figure, time et address face à div et span : choisir l'élément qui dit ce que contient chaque zone, et savoir ce que cela apporte aux lecteurs d'écran et aux moteurs de recherche.

  • 23 cartes
  • 4 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation

Quelques cartes du deck

  • HTML sémantique : de quoi s'agit-il ?

    Voir la réponse

    Usage des balises d'après le sens du contenu qu'elles enferment, plutôt que d'après l'aspect voulu, de sorte que les logiciels comprennent la structure de la page.

    Un lecteur d'écran peut sauter directement au menu ou au contenu si ces zones sont balisées. Une page faite de div n'offre aucun repère.

  • Combien d'éléments main visibles une page contient-elle ?

    • Un seul
    • Un par section
    • Un par article
    • Autant qu'on veut
    Voir la réponse

    Un seul

    main désigne le contenu principal de la page : par définition il est unique. Les lecteurs d'écran proposent d'y sauter directement, et plusieurs main rendent ce raccourci ambigu.

  • L'élément … enveloppe un groupe de liens de navigation principale, et l'élément … le pied de page, avec les mentions légales ou les contacts.

    Voir la réponse

    L'élément nav enveloppe un groupe de liens de navigation principale, et l'élément footer le pied de page, avec les mentions légales ou les contacts.

    Tous les liens ne vont pas dans un nav : il est réservé aux blocs de navigation importants (menu principal, sommaire), pas à une simple liste de liens dans un article.

  • main : de quoi s'agit-il ?

    Voir la réponse

    Balise qui enveloppe le contenu propre à la page, celui qui ne se répète pas d'une page à l'autre du site.

    Il n'y en a qu'un par page (visible). Le bandeau, le menu et le pied de page, communs à tout le site, restent à l'extérieur.

  • Une page est faite uniquement de div : un lecteur d'écran n'y trouve aucun repère. Que changer en priorité ?

    • Donner une classe CSS parlante différente à chaque div de la page
    • Utiliser header, nav, main et footer pour les grandes zones
    • Ajouter un id unique et explicite à chaque div de la page
    • Remplacer chaque div par un span
    Voir la réponse

    Utiliser header, nav, main et footer pour les grandes zones

    Les classes et les id ne parlent qu'au CSS et au JavaScript. Un lecteur d'écran lit bien le texte des div, mais seuls les éléments sémantiques lui donnent des repères, d'où ses raccourcis vers le menu ou le contenu. span n'a pas plus de sens que div.

Réviser ce deck