HTML : définitions et vocabulaire™ !09/08/2006
HTML a beau être un langage simple à appréhender, il est parfois difficile de se souvenir du vocabulaire et des concepts de base… et il est également bon de se rafraîchir régulièrement la mémoire ! Le but ici est de rappeler quelques termes et concepts sans toutefois entrer dans le détail (la lecture des spécifications[a] est recommandée dans ce cas). Avant de nous lancer, rappelons tout de même que HTML signifie "HyperText Markup Language", ou en français "langage de balisage hypertexte". Par ailleurs, ceci n'est pas une introduction au HTML, et il vous faudra quelques connaissances pour suivre cet article. Nous pouvons maintenant y aller !
Eléments, balises, attributs et contenus
HTML est constitué d'une petite centaine d'éléments.[b] Généralement, un élément se présente sous la forme d'une balise ouvrante, d'un contenu et d'une balise fermante. Par exemple, pour un élément paragraphe :
<p>Lorem ipsum dolor sit amet.</p>avec :
<p>: balise ouvranteLorem ipsum dolor sit amet.: contenu</p>: balise fermante
Le contenu est ici un simple texte, mais il peut aussi être constitué d'autres éléments même si certaines règles sont à respecter, comme nous le verrons plus loin. Notons que certains éléments, dits "vides", ne peuvent avoir aucun contenu et n'ont donc pas de balise fermante, comme c'est le cas des images par exemple :
<img src="monimage.gif" width="200" height="150" alt="Lorem ipsum">Nous avons ici doté notre élément image de plusieurs attributs, par exemple src="monimage.gif". Les éléments HTML possèdent un corps commun d'attributs[c], auquel viennent parfois s'ajouter des attributs spécifiques[d]. Un attribut peut éventuellement prendre plusieurs valeurs ou n'en prendre qu'une prédéfinie, qui dans ce cas peut être omise. Par exemple :
<input type="text" name="email" class="requis testemail" disabled>Maintenant que le décor est planté, précisons quelques points, notamment en ce qui concerne le XHTML…
HTML et XHTML
XHTML (X pour eXtensible) est essentiellement une réécriture de HTML suivant les règles de XML ("eXtensible Markup Language" ou "langage de balisage extensible"). Il existe donc quelques différences entre les deux langages qu'il est bon de connaître, non seulement si l'on veut faire migrer ses documents HTML vers du XHTML mais aussi car la plupart des règles issues de XML représentent de bonnes pratiques ! Voici les principales :
- Importance de la casse :
en HTML, éléments et attributs sont insensibles à la casse, contrairement au XHTML où ils doivent être impérativement écrits en minuscules. C'est une bonne habitude à prendre, car le code en devient probablement plus lisible pour la plupart des gens ! - Attributs et guillemets :
encadrer les valeurs des attributs de guillemets n'est pas toujours obligatoire[e] en HTML, contrairement au XHTML. Pour éviter les erreurs (comment un agent utilisateur doit-il interpréter plusieurs valeurs séparées par des espaces lorsqu'il n'y a pas de guillemets ?) et accroître la lisibilité, il est préférable de toujours le faire… - Forme réduite des attributs :
en HTML, si un attribut n'accepte qu'une seule valeur prédéfinie, nous avons vu que l'on pouvait le simplifier, ainsichecked="checked"devientchecked. Ceci n'est pas toléré en XHTML, et si il est important de s'en souvenir, il n'est pas particulièrement crucial de transposer cette règle au HTML. - Omission de balises fermantes :
le HTML permet d'omettre la fermeture de quelques éléments (par exemple les paragraphes<p>, items de liste<li>, ou même le corps de document<body>…). En XHTML, tous les éléments doivent être fermés, même les éléments vides : on pourrait ainsi avoir pour un saut de ligne<br></br>ou<br/>ou encore<br />. Pour des raisons de compacité et compatibilité c'est cette dernière solution qui a été adoptée. Encore une fois, pour éviter les erreurs et accroître la lisibilité, il est bien de fermer tous les éléments en HTML, à l'exception des éléments vides. - Imbrication des éléments :
que ce soit en HTML ou en XHTML, les éléments devraient toujours être bien imbriqués, et les codes du genre devraient être évités :<p>Lorem ipsum dolor <em>sit amet</p></em>. Les navigateurs sont malheureusement assez permissifs, mais il existe d'autres solutions pour vérifier ce type d'erreurs (la validation, dont nous parlerons plus loin).
Notons enfin que si le XHTML est envoyé à l'agent utilisateur en tant que tel (c'est-à-dire comme application/xhtml+xml[f]), un des défauts ci-dessus résultera normalement en une page d'erreur et le document ne sera donc pas rendu.
Structuration basique d'un document HTML
Chaque document HTML est constitué d'un élément racine <html>, d'un en-tête <head> et d'un corps <body>. L'en-tête contient des éléments particuliers qui ne seront pas rendus directement (à l'exception du titre de la page <title>), mais qui sont utiles aux agents utilisateurs : encodage, langue(s), CSS, JS… Le corps reçoit quant à lui le contenu "réel" et structuré de la page. Vous pouvez avoir un exemple en affichant la source de ce document (généralement via le menu "Affichage / Source" de votre navigateur). Toutefois, le traitement du corps et de l'en-tête sort largement du cadre de cet article, et il suffit ici de rappeler qu'un élément ne peut être placé n'importe où dans le document ni être doté de n'importe quel attribut. Un lien vers une feuille de style doit ainsi se trouver uniquement dans l'en-tête, l'attribut summary n'est valide que sur un tableau, etc. Ces règles peuvent varier d'une version d'HTML à une autre, et il est donc important de savoir laquelle utiliser suivant ses besoins, ce qui nous amène à parler de type de document.
Déclaration et définition de type de document
HTML existe en plusieurs versions et variantes. La dernière version est toujours préférable (actuellement il s'agit de la 4.01) tandis que la variante est à choisir en fonction de ce que vous voulez faire. Vous pouvez ainsi choisir entre du HTML transitionnel, strict ou avec jeu de cadres. Un document devrait donc débuter par une déclaration de type de document (ou "doctype"), qui indique quelles version et variante sont utilisées :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">Comme on peut le voir, les déclarations pointent vers une définition de type de document (ou "DTD") qui définit la syntaxe et grammaire du langage et donc les règles à respecter pour le HTML utilisé. Nous n'irons pas ici plus avant sur le choix d'une DTD[e], qui sort du cadre de cet article.
Notons qu'un doctype ne devrait être précisé que si le document est effectivement conforme à la DTD indiquée. Il est par conséquent important de penser à valider ses documents ! L'emploi d'un doctype légal a aussi un autre impact : il permet aux navigateurs de passer dans un mode de rendu "standard", c'est-à-dire respectueux (a priori !) des recommandations du W3C. Au contraire, l'emploi d'un doctype illégal ou son absence poussent les navigateurs en mode "quirks[g]". Ce mode de rendu existe pour les vieux documents qui contiennent parfois des éléments et attributs propriétaires ou qui exploitent certains bugs (comme le box model erroné d'Internet Explorer 5).
Structure versus présentation et comportement
Pour finir cet article, il est important de noter que le HTML n'a pas été conçu comme un langage devant traiter de la présentation ou du comportement. Son rôle premier est de structurer l'information, ce qui permet notamment de la rendre lisible par une machine. La concurrence entre les navigateurs couplée aux aspirations de designers frustrés (avec raison) a toutefois conduit les vendeurs à une certaine dérive et des éléments purement décoratifs ont fait leur apparition (<font>, <blink>…), tandis que d'autres éléments comme les tableaux et images étaient détournés de leur rôle original.
De telles pratiques ne devraient plus exister aujourd'hui. Premièrement, cela conduit à des documents lourds et difficiles à maintenir, à des contenus qui perdent parfois leur sens en devenant par exemple inaccessibles à certaines personnes (sans forcément parler de personnes handicapées). Deuxièmement, les choses ont suffisamment évolué pour permettre une séparation convenable entre le contenu structuré (le HTML), la présentation (qui devrait être gérée par les CSS) et le comportement (JavaScript). Les avantages sont par ailleurs nombreux, à commencer par une maintenance aisée et un premier pas vers l'accessibilité…
Nous arrivons maintenant au terme de cet article : merci d'être resté avec moi ! Pour plus d'informations, les liens donnés dans les notes de bas de page sont vivement conseillés. Si vous avez des remarques ou des questions, n'hésitez pas à me contacter.