Pourquoi et comment utiliser les balises (X)HTML à bon escient
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.
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 ?
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 :
font…), ni des attributs de formatage (color, bgcolor…) ;cellpadding, cellspacing… ;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.
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 !