Conseil n°3 : structurer les contenus en utilisant les balises appropriées du HTML5

Résumé

Pour être consultée, une page web est construite avec un langage informatique spécifique, le HTML, puis est mise à disposition de tous sur Internet par l'intermédiaire d'un navigateur. Pour pouvoir être interprétée par les différents systèmes d’exploitation (Windows, Linux, MacOS…), les différents supports (ordinateurs de bureau, interfaces tactiles…), les différents navigateurs (Firefox, Internet Explorer, Chrome…), la construction d'une page web doit respecter les règles d'écriture du HTML.

Celui-ci repose sur un ensemble de balises (et d'attributs) qui possèdent une valeur sémantique propre. Il y a par exemple des balises pour les titres (H1 jusqu'à H6), pour le texte (P), pour les listes (UL, OL LI…), pour les citations (QUOTE), pour les liens (A), pour les formulaires (LABEL, INPUT…). Et depuis l'arrivée du HTML5, de nouvelles balises permettent de structurer la page web comme HEADER pour l'en-tête, NAV pour la navigation, FOOTER pour le pied de page, ARTICLE, SECTION, ASIDE pour structurer les contenus, etc…

Il convient en outre de séparer la partie "contenu" de la page web (le texte, les images…) de la partie "présentation" (taille/couleur/police des caractères, la disposition des informations les unes par rapport aux autres dans la page…) par l'utilisation des feuilles de styles (CSS).
Enfin, lorsque l'information dans la page web est structurée et hiérarchisée, il faut s'assurer que l'ensemble des balises et attributs du HTML utilisés correspond aux spécifications d'écriture du HTML. À défaut, la page web risque de ne pas être interprétée correctement par tous les systèmes informatiques existants ou futurs.

Note : il faut veiller à respecter la sémantique propre à chaque balise du HTML et ne pas détourner une balise de sa fonction d'origine (à des fins de présentation par exemple, comme utiliser un titre de niveau 1 pour mettre un contenu en gras).

Exemple

Illustration : les nouvelles balises du HTML 5 permettent de structurer une page web : la balise HEADER pour l'en-tête de page, la balise NAV pour la navigation, la balise FOOTER pour le pied de page et les balises ARTICLE, SECTION, ASIDE...

Bénéfices pour l’internaute déficient visuel

  • Une page bien structurée va permettre aux utilisateurs de lecteurs d'écran d'isoler et d'afficher certains types d'éléments comme les titres, les repères… Naviguer sur une page par l'intermédiaire de ces éléments structurants permet de trouver plus rapidement des informations dans la page et tend ainsi à accélérer et optimiser la navigation de ces utilisateurs.
  • Lorsque la présentation est correctement séparée du contenu d'un page grâce aux feuilles de style, il devient possible à un utilisateur d'imposer sa propre feuille de style pour adapter le contenu à ses préférences de présentation (couleur/type/taille des polices, couleurs de fond…).

Boite à outils