Hypertext Markup Language (HTML) (2).

2 Novembre 2009 , Rédigé par CHOMOLANGMA

Structure des documents HTML

Dans les premières années, les documents HTML étaient souvent considérés comme des structures plates, et les balises comme des commandes de style^[23]. Ainsi la balise  était considérée comme un saut de ligne, et la balise  était ignorée. Ou encore lorsque JavaScript 1.0 est apparu, il ne donnait accès qu’aux liens et formulaires du document à travers les tables document.forms et document.links.

Avec l’introduction des Cascading Style Sheets et du Document Object Model, il a fallu considérer que les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments^[24]. Les balises ouvrantes et fermantes de ces éléments restent d’ailleurs optionnelles. Cependant, aujourd’hui, on a tendance à baliser chaque élément^[25] et à indiquer la DTD. Chaque élément fait partie du contenu d’exactement un autre élément ; cet « arbre du document » est notamment utilisé par la structure de formatage qui en est dérivée pour l’application des feuilles de style en cascade où chaque élément peut avoir un fond, un bord et une marge propres.

Structure d’un document HTML
Source HTML	Modèle du document
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title> Exemple de HTML </title> </head> <body> Ceci est une phrase avec un <a href="cible.html">hyperlien</a>. <p> Ceci est un paragraphe où il n’y a pas d’hyperlien. </p> </body> </html>	html head title texte body texte a texte texte p texte

Structure d’un document HTML

Source HTML

Modèle du document

 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title> Exemple de HTML </title> </head> <body> Ceci est une phrase avec un <a href="cible.html">hyperlien</a>. <p> Ceci est un paragraphe où il n’y a pas d’hyperlien. </p> </body> </html>

html

head

title

texte

body

texte

Éléments de HTML

Article détaillé : Élément HTML.

La version 4 de HTML décrit 91 éléments. En suivant la spécification de HTML 4, les fonctionnalités implémentées par HTML peuvent être réparties ainsi :

Structure générale d’un document HTML^[26]: Au plus haut niveau, un document HTML est séparé entre un en-tête et un corps. L’en-tête contient les informations sur le document, notamment son titre et éventuellement des métadonnées pour le référencement. Le corps contient ce qui est affiché. Notons cependant que le référencement global et quasi systématiquement jusqu’au texte entier des pages Web rend ceci moins vital que jadis même si cela avait pour avantage de mieux structurer les recherches, on pouvait cependant passer à côté de beaucoup de choses faute de savoir sur quelle base chercher.
Informations sur la langue^[27]: Il est possible d’indiquer la langue de n’importe quelle partie du document et de gérer le mélange de texte s’écrivant de gauche à droite avec du texte de droite à gauche.
Marquage sémantique^[28]: HTML permet de différencier des contenus spécifiques tels que les citations d’œuvres externes, les extraits de code informatique, les passages en emphase et les abréviations. Certains de ces éléments, conçus initialement pour permettre le support de documentations techniques, sont très rarement employés (différenciation entre les éléments de variable et d’exemple de valeur dans un code informatique, par exemple, ou encore instance d’un terme défini dans le contexte).
Listes^[29]: HTML différencie des listes non ordonnées et des listes ordonnées, selon que l’ordre formel du contenu dans le code est en soi ou non une information. Des listes de définition existent également, mais sans que leur champ d’application ne soit exactement déterminé.
Tables^[30]: Cette fonctionnalité a été développée pour permettre la présentation de données tabulaires mais a été immédiatement exploitée pour ses puissantes capacités de mise en page.
Hyperliens^[31]: La fonctionnalité première de HTML.
Inclusion d’images, d’applets et d’objets divers^[32]: À l’origine HTML permettait seulement de donner des hyperliens sur les médias externes. L’invention d’éléments spécialisés pour le multimédia a permis l’inclusion automatique d’image, de musique, de vidéo, etc. dans les pages web.
Éléments de regroupement^[33]: Ne conférant pas de signification au contenu qu’ils balisent, ces éléments génériques permettent d’appliquer des styles de présentation, de réaliser des traitements via des scripts ou tout autre opération nécessitant d’isoler une partie du contenu.
Style de la présentation^[34]: Chaque élément, voire tout le document, peut se voir appliquer des styles. Les styles sont définis dans le document ou proviennent de feuilles de style en cascade (CSS) externes.
Marquage de présentation du texte^[35]: Développé avant la généralisation de CSS pour fournir rapidement des fonctionnalités aux graphistes. D’usage désormais officiellement déconseillé pour la plus grande partie.
Cadres^[36]: Aussi connu sous le nom de frames, une fonctionnalité souvent décriée qui permet d’afficher plusieurs documents HTML dans une même fenêtre.
Formulaire pour l’insertion interactive de données^[37]: L’invention qui a permis l’apparition du commerce en ligne sur le web.
Scripts^[38]: Permet d’associer des morceaux de programmes aux actions des utilisateurs sur le document. Les langages utilisés sont généralement JavaScript et VBScript.

Attributs de HTML

Les attributs permettent de préciser les propriétés des éléments HTML. Il y a 188 attributs dans la version 4 de HTML^[39].

Certains attributs s’appliquent à presque tous les éléments :

les attributs génériques id (identificateur unique) et class (identificateur répétable)^[40] destinés à permettre l’application de traitements externes, tels que l’application de styles de présentation ou de manipulation de l’arbre du document via un langage de script. Il s’y ajoute l’attribut style^[41] permettant de définir le style de présentation de l’élément (généralement en CSS), et l’attribut title^[42] apportant une information complémentaire de nature le plus souvent libre (L’exception majeure est l’utilisation du title pour déterminer le style permanent et les éventuels styles alternatifs appliqués à un document via des éléments link).
les attributs d’internationalisation dir et lang^[27] spécifiant la direction d’écriture et la langue du contenu ;
les gestionnaires d’évènements onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup^[43], qui capturent les évènements générés dans l’élément pour appeler un script.

D’autres attributs sont propres à un élément unique, ou des éléments similaires. Par exemple :

les éléments qui permettent d’inclure dans le document des ressources graphiques sont dotés d’attributs de hauteur et de largeur, afin que le navigateur puisse anticiper la taille de la ressource à afficher avant que celle-ci n’ait été téléchargée : img, object, iframe.
des éléments spécifiques sont dotés d’un attribut assumant une fonction unique, tel que l’élément label des étiquettes des contrôles de formulaire et son attribut for désignant le contrôle concerné : c’est, en HTML, et avec les attributs usemap et ismap des images, l’une des très rares associations explicites et formalisées entre des éléments, indépendamment de leur ordre linéaire dans le code source.

La plupart des attributs sont facultatifs. Quelques éléments ont cependant des attributs obligatoires :

de par leur nature : l’élément img est obligatoirement doté d’un attribut src spécifiant l’URI de la ressource graphique qu’il représente. Il en est de même de tous les éléments dits « vides » et « remplacés »^[44] qui, au prix d’une entorse aux règles SGML, n’ont pas de contenu propre. C’est également le cas d’éléments non vides pour des raisons fonctionnelles, comme l’élément form dont l’attribut action indique la cible serveur qui traitera les données après soumission ;
pour des raisons liées à l’accessibilité du contenu : les images sont ainsi dotées d’un attribut obligatoire alt permettant d’indiquer un contenu textuel brut destiné à remplacer la ressource graphique dans les contextes de consultation où elle ne peut pas être restituée ou perçue.

Le type de contenu des attributs HTML échappe pour partie au champ d’application de cette norme, et sa validation relève de normes tierces telles que les URI, les types de contenu ou les codes de langages.

Certains attributs sont enfin de type booléen. Ce sont les seuls attributs dont la syntaxe peut être validement implicite en HTML : l’attribut selected d’un contrôle de formulaire peut ainsi être raccourci sous la forme selected remplaçant la forme complète selected="selected". Cette forme particulière est un des points différenciant HTML de la syntaxe des documents « bien formés » au sens XML.

Jeu de caractères

Article détaillé : Unicode et HTML.

Les pages Web peuvent être rédigées dans toutes sortes de langues et de très nombreux caractères peuvent être utilisés, ce qui requiert soit un jeu de caractères par type d’écriture, soit un jeu de caractères universel. Lors de l’apparition de HTML, le jeu de caractères universel Unicode n’était pas encore inventé, et de nombreux jeux de caractères se côtoyaient, notamment ISO-8859-1 pour l’alphabet latin et ouest-européen, Shift-JIS pour le japonais, KOI8-R pour le cyrillique. Aujourd’hui, le codage UTF-8 de Unicode se répand.

Le protocole de communication HTTP transmet le nom du jeu de caractères. L’en-tête HTML peut comporter le rappel de ce jeu de caractères, qui devrait être identique, sauf erreur de réglage. Enfin, suite à un mauvais réglage, le jeu de caractères réellement utilisé peut encore différer du jeu annoncé. Ces mauvais réglages causent généralement des erreurs d’affichage du texte, notamment pour les caractères non compris dans la norme ASCII.

Interopérabilité de HTML

Tel qu’il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages web. En particulier, contrairement à la publication assistée par ordinateur, HTML n’est pas conçu pour spécifier l’apparence visuelle exacte des documents. HTML est plutôt conçu pour donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc. Le langage HTML a été développé avec l’intuition que les appareils de toutes sortes devaient pouvoir utiliser les informations sur le web : les ordinateurs personnels avec des écrans de résolution et de profondeur de couleurs variables, les téléphones portables, les appareils de synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme élevée, et ainsi de suite. HTML est conçu pour optimiser l’interopérabilité des documents.

Comme HTML ne s’attache pas au rendu final du document, un même document HTML peut être consulté à l’aide de matériels et logiciels très divers. Au niveau matériel, un document peut notamment être affiché sur un moniteur d’ordinateur en mode graphique ou un terminal informatique en mode texte, il peut être imprimé, ou il peut être prononcé par synthèse vocale. Au niveau logiciel, HTML ne fait pas non plus de supposition quant au navigateur web utilisé pour consulter le document.

Un haut degré d’interopérabilité permet de baisser les coûts des fournisseurs de contenus car une seule version de chaque document sert des besoins très variés. Pour l’utilisateur du web, l’interopérabilité permet l’existence de nombreux navigateurs concurrents, tous capables de consulter l’ensemble du web.

Chaque version HTML a essayé de refléter le plus grand consensus entre les acteurs de l’industrie, de sorte que les investissements consentis par les fournisseurs de contenus ne soient pas gaspillés et que leurs documents ne deviennent en peu de temps illisibles. La séparation du fond et de la forme n’a pas toujours été respectée au cours du développement du langage, comme en témoigne par exemple le balisage de style de texte, qui permet d’indiquer notamment la police de caractères souhaitée pour l’affichage, sa taille, ou sa couleur.