Le langage HTML/Version imprimable

Le langage HTML

Une version à jour et éditable de ce livre est disponible sur Wikilivres,
une bibliothèque de livres pédagogiques, à l'URL :
https://fr.wikibooks.org/wiki/Le_langage_HTML

Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la Licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans Texte de dernière page de couverture. Une copie de cette licence est incluse dans l'annexe nommée « Licence de documentation libre GNU ».

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>.

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 », 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). 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 :

• le validateur du W3C ;
• celui du WDG.

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/

Liens externes

• Spécification d'HTML 4.01
  • Traduction française de la spécification HTML 4.01
• Page wikipédia sur XHTML
• Spécification d'XHTML
  • Traduction française de la spécification XHTML 1.0
  • Traduction française de la spécification XHTML 1.1
• HTML, CDD et Dom, FAQ du forum usenet news:fr.comp.infosystemes.www.auteurs
• Martius web : cours XHTML/CSS
• Le site du zéro
  • Les cours de HTML5 et CSS

Structure de base

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>.

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 », 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). 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 :

• le validateur du W3C ;
• celui du WDG.

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/

Liens externes

• Spécification d'HTML 4.01
  • Traduction française de la spécification HTML 4.01
• Page wikipédia sur XHTML
• Spécification d'XHTML
  • Traduction française de la spécification XHTML 1.0
  • Traduction française de la spécification XHTML 1.1
• HTML, CDD et Dom, FAQ du forum usenet news:fr.comp.infosystemes.www.auteurs
• Martius web : cours XHTML/CSS
• Le site du zéro
  • Les cours de HTML5 et CSS

Licence de documentation libre GNU

Résumé

La licence de documentation libre GNU (GNU Free Documentation License) est une licence produite par la Free Software Foundation. Cette licence a pour but de permettre la diffusion de contenu libre.

L'objet de cette Licence est de rendre tout manuel, livre ou autre document écrit « libre » au sens de la liberté d'utilisation, à savoir : assurer à chacun la liberté effective de le copier ou de le redistribuer, avec ou sans modifications, commercialement ou non.

Attention, contenu libre ne veut pas dire domaine public. Les différents créateurs de documents sous licence GFDL restent propriétaire de leurs écrits ou de leurs images. La licence GNU requiert que les auteurs gardent le crédit de leurs contributions. Pour cette raison, toute utilisation de document sous licence GFDL doit mentionner la source de ce contenu (par exemple, soit en créditant l'organisation d'où origine le document ou encore le document directement).

• en français (traduction non officielle, version 1.1): http://cesarx.free.fr/gfdlf.html
• version officielle en anglais: http://www.gnu.org/copyleft/fdl.html

Texte intégral

[[:Le langage HTML/Version imprimable/Texte intégral]]

Bien commencer le HTML

Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites une faute, la seule conséquence sera en général que vous n'obtiendrez pas le résultat attendu mais le texte s'affichera quand même. Dans le pire des cas, votre contenu ne s'affichera pas, mais vous n'aurez pas de « plantage » comme cela arrive avec la programmation.

Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Cela peut sembler sans importance puisque la page s'affichera quand même.

Toutefois,

• des erreurs consécutives peuvent engender un effet boule de neige et il devient alors difficile de trouver d'où vient le vrai problème.
• cela empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en LaTeX ou en syntaxe wiki.
• il n'est pas garanti que la page s'affiche correctement sur tous les navigateurs.

Il faut en fait accorder la même rigueur au HTML qu'aux autres langages de programmation, et pour cela utiliser de bons outils et prendre de bonnes habitudes.

Et prendre du recul lorsque l'on s'inspire de pages déjà existantes : la plupart des navigateurs permettent d'afficher le code source de la page, mais celui-ci peut être peu rigoureux.

Un bon exemple vaut mieux qu'un long discours

Nous allons créer notre première page à partir de la page minimale.

Pour cela, ouvrez votre éditeur de texte préféré — nous parlons bien d'éditeur de texte et pas de logiciel de traitement de texte (comme Microsoft Word). Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).

Exemple

<!DOCTYPE html>

<html>

  <head>
    <title>Premier essai</title>
  </head>

  <body>
    Bonjour le monde.
  </body>

</html>

Puis, utilisez la fonction Fichier | Enregistrer sous, et enregistrez le sous le nom bonjour.html (avec Notepad, il faut choisir « Tous les fichiers » dans le menu déroulant Type de fichier). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvrira normalement votre navigateur Internet par défaut, et affiche :

« Premier essai » dans la barre de titre ;

« Bonjour le monde. » dans la fenêtre principale.

Réessayez maintenant avec le texte suivant :

 <!DOCTYPE html> <html> <head> <title> Premier essai </title> </head> <body> Bonjour le monde. </body> </html>

(le même texte mais sur une seule ligne, sans mise en forme) — une fois le fichier sauvé, il suffit d'appuyer sur le bouton « rafraîchissement/recharger » du navigateur pour voir la différence. On remarque qu'il n'y en a aucune.

Aucune différence en ce qui concerne le rendu, mais le code source est lui bien moins lisible. Donc moins facilement modifiable, augmentable, corrigible. Il convient donc de prendre des « bonnes habitudes de programmation ».

Bonnes habitudes de programmation

Voici quelques conseils

• aérer son code :
  • les retours à la ligne n'ont pas d'incidence sur le rendu (si ce n'est une espace) ; n'hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code ;
  • si vous mettez plusieurs espaces, cela est interprété comme une seule espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre une ou plusieurs espaces en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
• mettez des commentaires pour pouvoir vous repérer ;
• utilisez un éditeur de texte avec
  • gestion des indentations : il suffit d'appuyer sur la touche de tabulation pour créer un décalage, et le décalage est appliqué automatiquement aux lignes suivantes ;
  • « coloration syntaxique » : les caractères spéciaux et balises sont reconnus et mis en couleur, ce qui facilite la lecture du code.

Voici par exemple un commentaire permettant de se repérer facilement (l'exemple suivant se trouverait au sein d'un code, donc notamment après les balises <!DOCTYPE html> <html> … <body> et avant le </body> </html> final).

…
<!--
*******************
* première partie *
*******************
-->

<h1> Première partie </h1>
…

Le mauvais exemple

Prenez votre traitement de texte favoris. Créez un document vide, et tapez simplement « Bonjour le monde. », puis enregistrez le fichier sous la forme d'un fichier HTML : menu Fichier | Enregistrer sous, et choisissez l'option Page Web (*.htm, *.html) dans le menu déroulant Type de fichier. Appelez ce fichier bonjour1.html.

Ouvrez maintenant ce fichier depuis l'éditeur de texte. Vous voyez que le fichier contient un nombre beaucoup plus important de lignes. Certaines de ces lignes peuvent contenir des informations personnelles, que vous aurez rentrées lorsque vous avez installé votre système d'exploitation, et que vous ne désirez peut-être pas voir figurer sur Internet… Et selon le logiciel (et sa version), vous aurez du code plus ou moins « propre » : dans certains cas, pour un texte long, il redéfinit à chaque paragraphe la police utilisée… Essayez de sauvegarder ainsi au format HTML un texte que vous avez déjà tapé auparavant et constatez les dégâts. Vous remarquez aussi que vous n'avez pas pu définir le titre s'affichant dans la barre de titre.

S'il est simple de générer du code HTML, simple dans le sens « en peu d'opérations et sans connaissance particulières » (« en un clic »), il faut se méfier du résultat, même si le rendu est correct.

Avec quoi écrire un document HTML ?

Comme indiqué plus haut, il existe des éditeurs HTML plus développés, allant de l'amélioration de la présentation du code (exemple : les balises sont distinguées du texte par une couleur spécifique) à l'éditeur WYSIWYG (« What You See Is What You Get », littéralement « ce que vous voyez est ce que vous obtenez », c'est-à-dire que vous voyez directement le résultat apporté par les modifications que vous entreprenez).

Vous devrez tout de même garder en tête la notion (récente) d'encodage des caractères, et faire la différence entre les principaux types (utf-8, ISO-8859-1…), et la nécessité pour votre éditeur de texte de reconnaître et respecter cet encodage, sous peine de voir afficher de drôles de caractères à la place des accents… Voir à ce sujet Caractères spéciaux et entités.

Voici une sélection (à compléter) d'éditeurs libres de qualité :

• Notepad++ Coloration syntaxique paramétrable, ouverture simultanée de plusieurs sources, support d'une quarantaine de langages, reconnaissance de l'encodage, macro, plugiciels…
• Emacs Coloration syntaxique, affichage de double fenêtre, barre de navigation, un catalogue complet d'extension, de nombreux raccourci clavier
• Bluefish
• JEdit
• Quanta Plus
• Atom Coloration syntaxique
• Brackets
• Sublime Text 2
• NVU et Kompozer Ces derniers seraient plutôt des éditeurs WYSIWYG mais permettent d'éditer directement la source d'une page.
• SciTE éditeur supportant plusieurs langages de programmation et de balisage dont le HTML et le CSS.
• Visual Studio Code éditeur supportant plusieurs langages de programmation et de balisage dont le HTML et le CSS.

Pour choisir, le mieux est de tester. Quelques éléments à prendre en compte pour faire un choix :

• Le logiciel permet-il la coloration syntaxique ? Quels langages sont supportés (PHP, CSS, HTML, JavaScript ?) ?
• Peut-on ouvrir plusieurs fichiers dans différents onglets ?
• Peut-on visionner simplement le résultat ? (par exemple avec une touche voir cette page dans le navigateur)
• Est-ce que les encodages de caractères sont bien gérés ?
• Y a-t-il une auto-complétion ? (quand vous écrivez une balise : le logiciel écrit directement la balise fermante)
• L'indentation est elle facilement modifiable ? Notamment, est-ce que le logiciel comporte une fonction permettant de déplacer tout un bloc de ligne vers la gauche ou vers la droite ?