Le langage HTML/Introduction

HTML est un langage de description de document utilisé sur Internet pour faire des pages Web. Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web.

Le XHTML est quant à lui une évolution du HTML ; le sigle signifie Extensible Hypertext Markup Language. Nous verrons plus loin la différence entre les deux, mais la plupart des informations sont valables pour les deux langages. Le terme (X)HTML signifie donc « HTML ou XHTML ».

La formulation du langage HTML est fort simple, en effet des balises permettent d'appliquer différents formatages. Elles sont délimitées par les deux symboles « supérieur à » et « inférieur à », <…> ; par exemple, pour mettre une portion de texte en emphase, on met une balise ouvrante <em> au début du texte et une balise fermante </em>. Certains caractères spéciaux s'obtiennent avec des « entités », c'est-à-dire un code commençant par une esperluette & et se terminant par un point-virgule ;. Par exemple, la caractère grec alpha « α » peut s'obtenir avec l'entité α.

Finalement, ce langage a abouti à une nouvelle version : le HTML5. Cette version possède des ajouts pour les médias (audio, vidéo, application interactives avec CSS3/JavaScript). C'est de cette version que ce livre traitera.

Pourquoi apprendre le HTML5 ?

Un document HTML5 est avant tout un document texte (c'est-à-dire lisible par un humain), qui contient une certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe .html (réduit à .htm sur les systèmes d'exploitation ne supportant pas plus de 3 caractères de suffixe).

L'immense majorité des internautes réalisent leur page Web à l'aide d'un logiciel avec une interface graphique, en utilisant la souris et en ayant un rendu immédiat ; il en existe des gratuits. Ce logiciel génère du code HTML5.

Pourquoi alors vouloir taper soi-même du code ?

Chacun aura sa réponse à cette question. Cela peut être par curiosité, pour comprendre comment marche le Web ; ou bien encore pour « nettoyer » le code HTML généré par le logiciel, le rendre plus léger.

Description de document ou mise en forme ?

Il faut bien comprendre la différence entre « description de document » et « mise en forme ». « Décrire » un document, c'est indiquer la « fonction » de telle ou telle partie du texte : citation, passage important, titre, paragraphe… La mise en forme, elle, est du ressort du navigateur : c'est lui qui décide comment sera mis en forme un paragraphe (en général avec un espace vertical avant et après), une citation (en général avec une marge plus importante), un passage important (en général en italique ou en gras), un titre (en général en plus grand avec un espace vertical avant et après)…

Vous pouvez donner des indications au navigateur en utilisant une feuille de style (voir Le langage CSS mais il est préférable de lire Le langage HTML avant).

Bien sûr, pour des raisons esthétiques — tout à fait louables — certains voudront faire du « placement au millimètre ». C'est tout à fait possible, mais plus vous voulez faire des choses compliquées, plus le code devient compliqué… Et surtout, le risque est de faire « n'importe quoi ». Il est par exemple simple de créer des tableaux imbriqués pour placer le texte comme on veut, mais avez-vous pensé aux mal-voyants ? S'ils utilisent un logiciel de lecture vocale, celui-ci lit le contenu des cellules linéairement, de gauche à droite et de haut en bas ; est-ce bien ce que vous désirez ? Voir à ce sujet l'article de Wikipédia Accessibilité du Web.

Dans un premier temps, le recours au HTML5 revient à renoncer à la mise en forme pour la déléguer au navigateur. Ceci peut être frustrant, mais vous gagnez en simplicité et en universalité. La mise en forme viendra dans un deuxième temps, avec le CSS — Rome ne s'est pas faite en un jour…

Notons que le HTML ayant été créé avant le CSS, il contient de nombreux éléments de mise en forme. On trouvera donc de nombreuses références (ouvrages, pages en lignes) et de nombreux exemples (pages Web) utilisant ces balises. Nous vous invitons à ne pas suivre ces « mauvais exemples ».

Balises et compagnie

Pour faire une page HTML (c'est à dire une page Web) vous n'avez pas besoin d'un logiciel spécial, il suffit d'utiliser un éditeur de texte standard (comme le Bloc-note de Windows ou TextEdit sur Mac) et d'enregistrer vos pages avec un nom finissant par .html. Une page Web est en fait un simple fichier texte contenant du code HTML qui est ensuite interprété par le navigateur.

Note: Dans le protocole HTTP ou HTTPS, ce n'est pas l'extension du fichier qui définit qu'un fichier est du HTML, mais l'en-tête (voir plus loin)… en théorie. Si un fichier HTML devrait pouvoir avoir n'importe quelle extension, dans la pratique, le navigateur se base souvent sur l'extension du fichier et non pas sur l'en-tête.

Un document HTML est constitué de texte normal — la plupart du temps c'est ce que vous voulez afficher à l'écran — et de HTML à proprement parler sous formes de balises (ou tags en anglais). Les balises servent à dire des choses au navigateur comme « ça c'est un titre », « ça c'est en emphase », « là je veux une image », « là je veux un lien » etc. Affichez ensuite la page dans votre navigateur. Une balise est facilement reconnaissable car elle est toujours entre < et >.

Voici un texte en <em>emphase</em>.

donne :

Voici un texte en emphase.

Dans cet exemple, seul le mot « emphase » sera en emphase car il est borné par les balises <em> et </em>.^[1]

On voit déjà qu'il y a deux types de balises. Les balises qui vont par deux, pour dire des choses comme « là, commence le texte en emphase » et « là, termine le texte en emphase », et les balises qui sont toutes seules, comme pour le « là je veux une image ». Observez qu'une balise de fin s'écrit exactement comme la balise de début mais avec une barre de fraction « / » (slash en anglais) avant son nom (em). On appelle tout ce qui est situé entre une balise de début et de fin un élément. On a donc ici un élément « em » contenant le texte « emphase ».

Une balise de début peut également contenir un ou plusieurs attributs, qui sont des paramètres permettant de préciser certaines caractéristiques de l'élément. Le nom de la balise dit de faire quelque chose, et un attribut donne des précisions sur comment le faire. Par exemple, la balise pour faire un lien est « a » (pour anchor, « ancre »). Mais si on fait juste <a>mon super lien</a>, le navigateur ne saura pas où doit mener ce lien. Pour ça il y a l'attribut « href » (pour hypertext reference, « référence hypertexte ») :

<a href="https://fr.wikibooks.org/">Wikibooks</a> est une bibliothèque libre.

donne :

Wikibooks est une bibliothèque libre.

L'attribut « href » indique la destination du lien. Comme vous pouvez le voir dans l'exemple, les attributs sont placés dans la balise de début (il ne faut pas les remettre dans la balise de fin), après le nom de l'élément. Le contenu d'un attribut est toujours délimité par deux guillemets « " » ou deux apostrophes « ' », précédés du signe égal « = ». Vous pouvez bien sûr mettre plusieurs attributs en les séparant par des espaces. Dans certains cas, le navigateur comprendra ce que vous voulez même si vous ne mettez pas les guillemets, mais il vaut mieux prendre l'habitude d'en mettre partout.

Un exemple de balise qui va toute seule maintenant :

<img src="../images/wiki-textbook.png" />

donne :

Si vous avez tout suivi, vous devriez reconnaître qu'on a la balise « img » (qui assez logiquement veut dire image) et l'attribut « src » (pour source) qui a pour valeur « ../images/wiki-textbook.png ». Et tout ça nous donne une jolie balise. Ce code affiche en fait l'image située à l'adresse « https://fr.wikibooks.org/images/wiki-textbook.png »^[2], soit le logo de Wikibooks

Remarque: La barre de fraction finale « / » dans une balise isolée se met en XHTML, mais pas en HTML ; l'exemple ci-dessus en HTML donne <img src="https://fr.wikibooks.org/images/wiki-textbook.png">. Nous reviendrons la-dessus un peu plus bas.

Dernier point important sur les balises, il faut penser à bien les imbriquer : une balise ouvrante doit toujours être placée avant une balise fermante.

Il est interdit de « croiser les balises » c'est-à-dire qu'il n'est pas permis de fermer une balise alors qu'une autre, ouverte après elle, n'est pas encore fermée. Un exemple de balises correctement agencées (ne vous inquiétez pas si vous ne comprenez pas les balises elle seront expliquées plus tard) :

Un texte qui <em>parle de <strong>choses</strong> intéressantes</em>

donne :

Un texte qui parle de choses intéressantes

Un exemple de mauvaise imbrication des balises :

Ce code contient une erreur volontaire !

Un texte qui <em>parle de <strong>choses</em> intéressantes</strong>

Le code correct pour entrelacer les styles de texte serait :

Un texte qui <em>parle de <strong>choses</strong></em><strong> intéressantes</strong>

ce qui donne :

Un texte qui parle de choses intéressantes

Exercice 1

Alors, HTML/XHTML ou HTML5 ?

Késako

Nous avons évoqué rapidement tout à l'heure le XHTML et le HTML5. Quelle est la différence entre le XHTML et le HTML5, vous demandez vous ?

Conçu initialement comme un langage simplifié par rapport au SGML, le HTML doit une part de son succès à sa tolérance syntaxique, qui en facilite à première vue l'usage : ainsi, par exemple, toutes les balises ne sont pas nécessairement fermées, l'écriture du code est indifférente à la casse, les valeurs d'attributs peuvent dans certains cas ne pas être entourées de guillemets, … Cependant, cette facilité apparente a son revers : le code HTML ne se prête pas aux traitements automatisés qui sont en revanche l'un des atouts des formats XML.

D'autre part, HTML ne peut être étendu et gagner en nouvelles fonctionnalités qu'au prix du développement et de l'intégration de nouvelles spécifications. À l'inverse, le XML est par nature un méta-format permettant de créer à volonté de nouveaux éléments.

Afin de tirer notamment parti de ces deux atouts du XML, tout en conservant la compatibilité avec le HTML, le W3C a défini un format XHTML1.0, qui reformule HTML selon des règles d'écritures plus strictes conformes au XML. Il n'y a en revanche aucune différence entre HTML4.01 et XHTML1.0 quant aux balises disponibles.

Lequel choisir

Vous pouvez à peu près choisir la version du (X)HTML que vous voulez. Le tout est de s'y tenir. Chaque version a ses règles et ses balises. Cependant, si vous voulez être dans l'air du temps je suppose que votre préférence se portera sur le XHTML 1.0. Si vous voulez faire du HTML tout court par contre, ne cherchez pas l'originalité et faites du 4.01.

Les variantes

Comme si ce n'était pas déjà assez compliqué, les principales versions du HTML viennent aussi avec des variantes. C'est le cas pour HTML 4.01 et XHTML 1.0. Là encore, une fois une variante choisie, il faudra s'y tenir. Les variantes sont au nombre de 3 : Transitional, Strict et Frameset. La version strict est celle recommandée par le W3C. La version transitional permet l'utilisation de balises classées comme deprecated (désapprouvées) qui existent parce qu'elles ont existé avant mais que le W3C aimerait bien enterrer sous trois couches de béton et oublier complètement. La version frameset elle est un peu spéciale. Voyez la partie sur les cadres.

Principales différences entre le HTML et le XHTML

On en a déjà vu une, et on ré-insistera dessus de toute façon en temps voulu, mais voilà pour la route les différences importantes entre HTML et XHTML :

En XHTML, une barre de fraction « / » est obligatoire à la fin des balises isolées, comme <br />, <hr />. Il ne faut pas en mettre en HTML. Pour la compatibilité, il est conseillé de mettre un espace avant la barre de fraction.
En XHTML, il faut toujours mettre les valeurs des attributs entre guillemets : <input type="text" />. En HTML on peut parfois s'en passer.
En XHTML, un attribut doit obligatoirement avoir une valeur : <input type="text" readonly="readonly" />, alors qu'en HTML, ce n'est pas requis : <input type="text" readonly >
En HTML, on peut aussi bien écrire <html> que <HTML> ou <hTmL>. En XHTML par contre tout doit être en minuscules. C'est <html> et pas autre chose. On dit que XHTML est sensible à la casse.
En XHTML, si une balise est ouverte, il faut la refermer. Pas de <em> sans </em>. Ceci paraît évident, mais en HTML on peut parfois s'en passer.

En règle générale, on dit que XHTML est un dialecte XML, et on peut se référer à l'ouvrage Structure d'un document XML pour obtenir la liste des règles et bonnes pratiques à mettre en œuvre.

S'en tenir à une version du (X)HTML

Comme nous l'avons déjà répété plusieurs fois, quand on choisit une version et une variante, on s'y tient. En fait soyons clair : ne pas respecter la version que vous avez choisie ne fera pas planter votre navigateur… En fait dans certains cas, ça ne se verra même pas. Pourquoi le faire alors ?

La guerre des navigateurs, dans sa première phase, allait vers la différenciation. Chaque navigateur s'autorisait à inventer des balises incompatibles avec le concurrent (stratégie de la savonnette)^[3]. Cette période est révolue, et la guerre des navigateurs, dans la phase actuelle, s'appuie sur la convergence vers les standards du W3C. Ceci ne se fait pas sans casse, et certaines pages s'affichent bizarrement, ou pas du tout, si le dialecte n'est pas bien suivi.

Avoir un site valide (c'est comme ça qu'on appelle le fait de respecter la version choisie) contribue à construire le Web du futur, que l'on espère plus accessible pour tous. Le respect des normes permet d'assurer qu'un document sera bien interprété quel que soit le système d'exploitation, le navigateur (pensez notamment aux déficients visuels), les paramètres régionaux…

Comment être sûr que votre site est valide ? Et bien en le faisant passer par le validateur bien sûr ! Par exemple :

Historique

Le HTML est issu du projet SGML (Standard Generalized Markup Language, initié en 1979 par IBM et publié comme norme en 1986, la norme ISO 8879:1986). Le HTML date du début des années 1990. Les premières spécifications indépendante d'un éditeur de navigateur, le RFC 1866, est publié en 1995 ; c'est le HTML version 2.0. La dernière version du HTML (la version 4.01) date de fin 1999, et la première version du XHTML (la version 1.0) date de début 2000.

La première version du CSS (le CSS1), permettant les feuilles de style, date de 1996, mais c'est seulement en 2000 qu'un navigateur a intégré totalement ses spécifications. Auparavant, les navigateurs ont développé chacun leurs balises de mise en forme, souvent indépendamment du W3C.

Voir l'article de Wikipédia Hypertext markup language > Historique.

Validation d'une page web

Les pages web doivent assumer l'encodage choisi et respecter quelques règles de base, ainsi que celles imposées par la grammaire choisie et spécifiée (la DTD). Afin de vérifier les pages web que vous allez produire, il conviendra d'utiliser le validateur proposé par le W3C, disponible à cette adresse : https://validator.w3.org/

Notes

↑ En général, le texte en emphase est mis en italique, mais ceci peut varier ; on peut par exemple définir que la mise en emphase se ferait en utilisant une couleur différente.
↑ le sens des deux points « .. » sera expliqué plus loin, il suffit de comprendre qu'ils seront remplacés par « https://fr.wikibooks.org/ »
↑ Les éditeurs de logiciel (Microsoft Internet Explorer et Netscape navigator pour ne pas les nommer) créaient des balises spécifiques interprétées par eux seuls afin de concurrencer les autres et de montrer que leur navigateur avait plus de possibilité, donnant ce que l'on a appelé affectueusement la « soupe de balises »