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 à », codice_1 ; par exemple, pour mettre une portion de texte en emphase, on met une balise ouvrante codice_2 au début du texte et une balise fermante codice_3. Certains caractères spéciaux s'obtiennent avec des « entités », c'est-à-dire un code commençant par une esperluette codice_4 et se terminant par un point-virgule codice_5. Par exemple, la caractère grec alpha « α » peut s'obtenir avec l'entité codice_6.
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 codice_7 (réduit à codice_8 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 codice_7.
Une page Web est en fait un simple fichier texte contenant du code HTML qui est ensuite interprété par le navigateur.
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 codice_10 et codice_11.
Voici un texte en <em>emphase</em>.
Voici un texte en emphase.
Dans cet exemple, seul le mot « emphase » sera en emphase car il est borné par les balises codice_2 et codice_3.
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 « codice_14 » ("slash" en anglais) avant son nom (codice_15). 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 « codice_16 » (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 « codice_17 » (pour "hypertext reference", « référence hypertexte ») :
<a href="https://fr.wikibooks.org/">Wikibooks</a> est une bibliothèque libre.
 est une bibliothèque libre.
L'attribut « codice_17 » 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 « codice_19 » ou deux apostrophes « codice_20 », précédés du signe égal « codice_21 ». 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" />
Si vous avez tout suivi, vous devriez reconnaître qu'on a la balise « codice_22 » (qui assez logiquement veut dire "image") et l'attribut « codice_23 » (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
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>
Un texte qui parle de choses intéressantes
Un exemple de mauvaise imbrication des balises :
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>
Un texte qui parle de choses intéressantes
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 : codice_26, codice_27 et codice_28. 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 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 :
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.
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/