La sémantique des balises
Le (X)HTML définit de nombreuses balises. Chacune de ces balises est destinée à indiquer la nature du contenu qu'elle encadre (c'est le cas pour les versions strictes du HTML et du XHTML, leurs autres versions ayant d'autres balises pour spécifier l'apparence du contenu). C'est ce qu'on appelle la sémantique.
Nous avons ainsi des balises pour indiquer un titre (h1
, h2
…) ; des balises pour indiquer des listes (ul
, ol
,…) ; des balises pour indiquer un paragraphe (p
), une citation (blockquote
), un tableau de données (table
), un bloc regroupant plusieurs contenus (div
), etc.
Pourquoi est-ce si important ?
Respecter la sémantique des balises, donc encadrer un contenu avec la balise adéquate, permet tout d'abord de structurer le document correctement, indépendamment de la forme qu'il va prendre. Ceci permet aux programmes qui traiteront l'information contenue dans la page, de l'interpréter correctement, et donc de l'utiliser comme il se doit.
Vous n'en n'avez peut-être pas conscience, mais les types de ces programmes sont nombreux : les navigateurs classiques bien sûr, mais aussi les robots d'indexation des moteurs de recherche, les lecteurs à synthèse vocale pour les mal-voyants, les plages brailles, etc. On peut imaginer aussi avoir besoin de développer en interne, dans une société, des programmes pour extraire certaines informations dans les pages pour y appliquer un traitement quelconque.
Prenons l'exemple des titres. On voit trop souvent ceux-ci se terminer par une balise br
ou inclus dans un simple paragraphe p
. Il se trouve alors que du point de vue des logiciels, ces titres sont noyés dans le reste de la page. Rien ne peut les distinguer d'un simple paragraphe. Les encadrer d'une balise de titre comme h1
les met en valeur sémantiquement. Les navigateurs afficheront le texte encadré par cette balise avec un rendu par défaut (caractères plus grand, plus gras) qui permettra de le dissocier du reste. Les robots d'indexation pourront indexer les mots des titres avec un coefficient de pertinence plus important par exemple, par rapport à ceux des paragraphes. Les logiciels de synthèse vocal pourront lire le titre avec une intonation différente du reste du texte, comme vous le faites quand vous lisez à voix haute.
Et cet exemple avec les titres est valable pour toutes les balises.
Cela rend ainsi les pages accessibles à tous les outils de navigations et par conséquence, à tout le monde ! N'est-ce pas le but recherché quand vous publiez un document sur le web ?
Un exemple avec Lynx
Qu'est ce que Lynx ?
Lynx est un navigateur « texte » trés connu dans le monde Unix (il existe aussi pour d'autres plateformes telles que Windows). On entend par navigateur texte, un navigateur qui affiche le contenu d'une page en mode texte, sans aucun rendu graphique. Ils permettent de surfer sur un écran non graphique ou au travers d'une console (très utile lorsqu'on travaille sur des serveurs qui ne disposent pas d'interface graphique, et que l'on veut aller sur des sites pour récupérer des mises à jour, de l'aide, etc…).
Ainsi, un navigateur texte :
- ne tient pas compte des feuilles de style, des balises de formatage (
font
…), ni des attributs de formatage (color
,bgcolor
…) ; - affiche tout avec une unique fonte, une unique taille de caractère ;
- ne peut respecter les espacements artificiels réalisés avec des images vides ou ceux indiqués par des attributs comme
cellpadding
,cellspacing
… ; - définit ses propres couleurs pour chaque type de balise (paramétrable par l'internaute) ;
- affiche tout le contenu de la page de façon linéaire ;
- etc.
Pourquoi Lynx ?
Du fait qu'il ne tient pas compte de la présentation, l'affichage dans Lynx permet de se faire une idée de comment est « vu » votre site par d'autres types de media qu'un navigateur classique. On peut ainsi mieux se rendre compte de ce que peut analyser un robot d'indexation, de ce que peut « lire » un logiciel de synthèse vocale, de ce que restitue une plage braille à un aveugle.
Ce qu'on voit à travers Lynx
Prenons l'exemple de menu du site evoqué dans le tutoriel : avec l'ancienne page, il s'agit d'items de menu placés dans des cellules de tableaux, avec des images servant de puce. Sur un navigateur texte, cela va donner ceci :
On le voit, on n'obtient pas forcément un bon résultat. Les informations sont un peu désorganisées, on a du mal à voir la structure du texte, ce qui rend son interprétation difficile.
Par contre si on utilise les balises HTML dans leur bon contexte, le navigateur va afficher le texte avec des indentations et couleurs spécifiques, montrant donc mieux la nature du contenu. En utilisant ul
et li
pour notre menu (et h1
pour les titres de menus), on va donc avoir une vraie liste, avec des puces, des indentations, des espacements : le menu ressemble à un menu.
C'est mieux non ? Non seulement le texte est plus lisible, mais en plus il sera mieux interprété par les autres médias. De plus, en regardant la source, le code HTML est beaucoup plus clair, plus concis, ce qui apporte des avantages non négligeables : maintenance et modifications aisées, page plus légère donc téléchargement plus rapide et économie de bande passante du serveur (plus de gens peuvent se connecter en même temps).
Le plus beau dans tout ça, c'est que cela ne change pratiquement pas l'aspect sur un navigateur classique, grâce à l'utilisation de feuilles de styles !
Vos commentaires
# pascal Le 23 juin 2014 à 10:20
Sinon, à défaut de Lynx, vous avez des sites qui vous permettent de tester la structure de votre HTML, comme "yakaferci". c’est gratuit pour les premières utilisations.
# Yabio Le 12 janvier 2015 à 22:00
C’est ce qu’on appelle la sémantique.
Nous avons ainsi des balises pour indiquer un titre (h1, h2…)
Vos commentaires
Suivre les commentaires : |