La nature du HTML

Les auteurs du HTML étaient des scientifiques qui cherchaient un moyen de partager des documents sur la physique des particules. Ils portaient peu d’intérêt à la forme visuelle exacte du document affiché sur un écran d’ordinateur. En fait, le HTML a été conçu à l’origine pour respecter une séparation entre la structure du contenu et sa mise en forme graphique. L’intention était de créer un World Wide Web de pages qui pourraient être affichées dans chaque système et navigateur existant – y compris dans les navigateurs qui « lisent » les pages Web texte aux utilisateurs avec un handicap visuel – et qui pourraient être interprétées par des moteurs de recherche et d’analyse.

Les inventeurs du Web ne se rendaient pas compte de son potentiel d’affichage graphique. Ainsi, le HTML n’a pas été conçu avec ces considérations. Ils étaient si soucieux de rendre les documents utilisables par les machines qu’ils produisaient des documents que seules les machines (ou les physiciens des particules) voudraient lire. En se concentrant uniquement sur la logique structurelle des documents, ils ont ignoré la nécessité de la logique visuelle de la conception graphique et de la typographie. Ce manque initial de prise en compte visuelle sur le Web est à l’origine du stress des concepteurs de sites Web quand ils veulent obtenir une mise en forme graphique spécifique pour leurs pages Web. Ce besoin de mise en forme est la raison pour laquelle les entreprises de logiciels de navigation ont commencé à ignorer les normes en matière de HTML et ont autorisé des fonctionnalités supplémentaires dans leurs navigateurs.

Par exemple, la plupart des graphistes évitent d’utiliser les balises HTML standard pour les titres de paragraphes (<h1>, <h2>, etc.) car elles manquent de subtilité visuelle : dans la plupart des navigateurs Web, ces balises font apparaître les titres absolument trop grands (<h1>, <h2>) ou ridiculement petits (<h4>, <h5>, <h6>). Mais ces balises HTML n’ont pas été créées avec la préoccupation de leur rendu visuel. Leur seul objectif est de désigner le niveau héarchique d’un titre afin que les lecteurs humains et les moteurs de recherche puissent lire facilement un document et déterminer sa structure d’information. C’est seulement de manière involontaire que les développeurs de navigateurs ont donné différentes tailles et niveaux de gras à chaque balise de titre de paragraphe, même si ces tailles ont tendance à être limitées dans le code HTML.

Utiliser des titres de paragraphes pour structurer le contenu

Malgré la nature du Web et le vaste changement dans son utilisation (d’un moyen de structurer un document à un média visuel), il est important que le contenu Web soit conçu avec une bonne structure. Avec une meilleure intégration des feuilles de style (CSS) dans les versions récentes des navigateurs Web, les développeurs peuvent modifier l’apparence des éléments de structure pour répondre à leurs choix de conception et d’affichage.

Les utilisateurs de lecteurs d’écran et des autres technologies d’assistance ont la possibilité de naviguer dans des pages Web en utilisant leur structure. Cela signifie que l’utilisateur peut lire ou accéder directement aux éléments de haut niveau (<h1>), puis à ceux de second niveau (<h2>), puis à ceux de troisième niveau (<h3>) et ainsi de suite. La visualisation ou l’écoute de ce plan leur donne une bonne idée du contenu et de la structure de la page.

Les pages devraient être structurées de manière hiérarchique, le 1er niveau de titres (<h1>) étant le plus important (en général le titre de la page ou du document), puis le second niveau de titres (<h2>, générallement les titres de chapitres), puis le troisième niveau de titres (<h3>, les sous paragraphes des chapitres) et ainsi de suite. Techniquement, un titre de moindre niveau doit suivre un titre de niveau immédiatement supérieur. Le schéma de titres suivant montre la structure en titres que devrait contenir une page Web. En fait, il représente la hiérarchie du contenu principal de cette page avec différents niveaux de titres de paragraphe du plus haut au plus bas. Vous pouvez cliquer sur chacun de ces titres pour accéder à la section correspondante dans cette page.

• Titre 1
  • Titre 2
  • Titre 2
  • Titre 2
  • Titre 2

Utiliser correctement les titres de paragraphe

Ne pas utiliser le formatage de texte, tels que la taille des caractères ou la mise en gras pour donner l’aspect visuel aux titres de paragraphe – utiliser les balises standard de titrage (<h1> – <h6>) dans tout le contenu. Les technologies d’assistance et les autres navigateurs se basent littéralement sur le code de la page pour déterminer sa structure. Les éléments qui sont en gras ou qui sont affichés dans une police plus grande ne sont pas interprétés comme des éléments de structure.

De même, ne pas utiliser des balises de titrage pour créer uniquement des effets visuels. Par exemple, si vous voulez mettre en évidence ou souligner un élément d’un contenu qui n’est pas un titre (comme fait avec la phrase précédente), ne pas utiliser les balises de titrage pour le faire. Au lieu de cela, utiliser les balises de style pour la taille de la police, la mise en gras ou en italique. Si vous voulez souligner quelque chose, vous devez utiliser la balise strong (mise en gras) au lieu de b et la balise em (mise en italique) au lieu de i. Les balises b et i véhiculent toutes les 2 uniquement une information visuelle alors que strong et em donnent une information sémantique. Visuellement, le résultat est le même mais les développeurs doivent utiliser les éléments HTML adéquats. Dans le logiciel Dreamweaver, vous pouvez sélectionner Edition > Préférences > Général et sélectionnez l’option Utiliser « strong » et « em » à la place de « b » et « i ».

Utiliser correctement les listes

Les listes HTML – ul, ol et dl – servent également à transmettre une structure hiérarchique du contenu. Chacune de ces listes ont des règles aussi concernant leur utilisation. La liste à puces (liste non ordonnée) doit être utilisée quand il n’y a pas de séquence ou d’ordre d’importance entre les éléments de la liste. La liste ordonnée suggère une progression ou une séquence dans les éléments de la liste. La liste de définition devrait être utilisée explicitement pour la présentation d’une structure de définitions. Comme avec les balises de titrage, les balises de listes doivent être utilisées correctement en fonction de leurs natures. Les listes ordonnées et non ordonnées doivent toujours contenir des éléments de liste. Les listes de définitions doivent toujours avoir des descriptions de définitions. Les listes vides sont incorrectes en HTML. Les listes ne devraient jamais être utilisées pour d’autres raisons ou pour de la mise en page. Les listes imbriquées doivent être codées correctement.