Travailler avec les balises HTML

Faisant suite à l’article Les bases du langage HTML, nous allons poursuivre cette fois-ci l’exploration du langage en lui-même, et, notamment voir avec plus de précisions l’emploi des balises, et des attributs. Nous explorerons tour à tour, et au travers de divers articles (plus verticaux); la structure du document, du texte, des médias, des formulaires, des tableaux, des listes, … bref, nous essaierons de passer en revue l’ensemble des éléments nécessaires à la bonne mise en place du contenu.

Une bonne base HTML, structurelle et sémantique, permet d’optimiser d’une part la lisibilité et la compréhension du contenu, aussi bien au niveau du web, que des tierces applications, des robots ou encore des lecteurs d’écran, mais aussi et d’autre part, facilite l’implémentation d’une interactivité optimale, et une meilleure gestion du rendu visuel, au travers de feuilles de styles CSS.

Balises et attributs

Les balises permettent de découper le contenu de la page, autant structurellement (créer des blocs, des groupes, des espaces…), que sémantiquement (définir un titre, un paragraphe, un lien…). L’utilisation d’une balise s’écrit en encadrant le contenu qu’elle représente, et, la syntaxe employée utilise des chevrons (inférieur et supérieur) pour encadrer le nom de la balise. Du fait qu’il y a deux balises, une au début du contenu et une à la fin, on parle respectivement de balise ouvrante et de balise fermante.

La balise ouvrante peut contenir un ou plusieurs attribut(s), affinant ainsi certaines propriétés, et la balise fermante possède un slash de fermeture devant son nom.

<balise attribut="valeur" autre-attribut="valeur">contenu de la balise</balise>

Les attributs sont des propriétés qui viennent compléter la nature de la balise, par exemple, la largeur, ou la hauteur, pour une balise image <img width="300" height="200">. En complément de la liste des attributs communs applicables pour l’ensemble des éléments, chaque balise HTML possède son propre lot d’attributs spécifiques en fonction de sa nature. Par exemple, et sans être limitatif, toutes les balises de formulaires <form> sont associés à des attributs de type autocomplete, novalidate qui permettent de préciser le comportement de l’élément.

En règle générale, depuis HTML5, l’écriture des balises et des attributs n’est plus aussi stricte que cela l’était avec l’emploi d’un Doctype xHTML. Dorénavant, les balises peuvent ne plus être systématiquement fermées, ou encore peuvent s’écrire indépendamment de la casse :

les singlettes <br>, <img>,
      peuvent également s'auto-fermer <br />, <img /> 
      mais cela n'est plus obligatoire
les listes <ul><li>,
      peuvent également ne pas se fermer <ul><li><li><li></ul> 
      mais cela reste plus clair en le faisant <ul><li></li><li></li><li></li></ul>

De même l’emploi des attributs est redevenu simplifié, il n’est donc plus nécessaire de devoir obligatoirement leur associer une valeur, ni même placer leur contenu entre guillemets. Mais bon, pour préserver une bonne lisibilité, rien ne nous interdit d’user de double quote pour encadrer les valeurs si elles sont présentes ;

les attributs <input automplete="autocomplete" />
      peuvent ne pas contenir de valeur et donc s'écrire simplement <input automplete />
les attributs <input type=range value=10 max=20 min=5 step=1 />
      peuvent également utiliser des guillemets (double quote) 
      <input type="range" value="10" max="20" min="5" step="1" /> les rendant ainsi plus lisibles

… bref… l’écriture est redevenu un peu comme au temps du HTML 4… au bon vouloir de chacun… mais nous pouvons garder certaines bonnes habitudes, apportées par le xHTML, et user ainsi, d’une bonne hygiène de formatage de données html ;

Au niveau des attributs, il est bien de noter que depuis HTML5 le nouvel attribut data-* permet de définir toute valeur utile, notamment en utilisation conjointe de JavaScript. Cela permet, par exemple, d’enrichir la description du contenu de la balise, sans pour autant perdre la validation du contenu auprès des validateurs. Notez au passage que les attribut HTML data-* sont également couplés à un objet dataset, JavaScript.

<p data-lien="lien.html" data-article="4" data-section="8" data-href="[[INTERNE]]"></p>

Compléter cette structure avec des métadonnées

Une fois la structure du contenu mise en place, nous pouvons éventuellement venir la renforcer en usant de métadonnées. Ces métadonnées existent sous deux formes, d’une part une première catégorie permettant l’amélioration de l’accessibilités, avec notamment des attributs rôle et plus précisément les rôles de points de repères ARIA, et d’autre part en usant de RDFa, ou de Microdata, et en s’appuyant sur le schéma du CreativeWork, et des divers types qui en découlent (article, blog, digitaldocument, et plus particulièrement website, webpage et webpageelement). Voir à ce sujet l’article sur les métadonnées.

Découpe de cette approche HTML, en divers articles

Afin de poursuivre plus largement ce présent article, je vous propose de le découper en série d’articles plus verticaux, et abordant diverses thématiques, comme :

• La structure HTML du document
• Le texte HTML et sa découpe
• Les lien et hyperliens
• La structure HTML des images, figures et autres illustrations
• Structures de listes
• Les tableaux, et les données tabulées
• La gestion des formulaires
• Les médias et les multimédias

Conclusions

Lors de la mise en place d’une page HTML, il est toujours bon de s’assurer d’un certain nombre de points, comme ;

• valider le contenu HTML des pages, soit depuis le w3c Nu Markup Validation Service, soit depuis Validator.nu,
• s’assurer de la pertinence de la structure employée, en usant par exemple de HTML 5 outliner
• être sûr du bon respect de la sémantique, Nu Html Checker ou  HTML 5 outliner
• contrôler le bon emploi des balises et de leur rôle, depuis HTML: The Markup Language (an HTML language reference),
• vérifier les balises en fonction des versions – The elements of HTML
• prendre le temps d’ajouter des micro-data à certains types d’informations (non abordé dans cet article),
• penser d’ajouter des informations WAI-ARIA role aux diverses balises de la page (non abordé dans cet article),
• vérifier la bonne accessibilité des pages depuis divers outils en ligne, WAVE ou depuis le site OCAWA (non abordé dans cet article),

La liste est certainement incomplète, mais on s’aperçoit déjà que beaucoup de travail, beaucoup de méticulosité, beaucoup de patience, sont nécessaires dans la réalisation de nos pages HTML, afin de gérer un travail de qualité.