Dernière m.à.j. : 2018-06-17
1. Généralités sur l'HTML
HTML est un langage, ou plutôt une sorte de convention d'écriture présentant du texte dans différentes pages liées par des liens. Ces liens sont dits "hypertextes", ils sont écrits dans le code source.
L'HTML (HyperText Markup Language) se présente comme du texte délimité par des balises (au nombre d'une centaine au total, dont la plupart sont obsolètes pour laisser place aux styles CSS), elles mêmes avec des attributs (ou propriétés) et une valeur pour chaque attribut si nécessaire encadrée par des guillemets doubles.
On distingue 2 sortes de balises : les balises ayant une fermeture et celles n'en n'ayant pas. Pour délimiter du texte, il faut en effet une balise ouvrante et une balise fermante.
Les balises sont notées entre chevrons, < et >. La fermeture fait précéder le nom de la balise par un /
1.1. HTML : exemples de balises
- Balises avec fermeture
- <p>paragraphe</p>
- <h1>gros titre niveau 1</h1>
- <strong>texte renforcé</strong>
- <font size="8">texte à police grossie</font>
- <font face="arial" color="#0000FF">Arial bleu ...</font>
- Balises sans fermeture
- <img src="chemin/image.jpg" width="100" height="100" alt="salut ...">
- <meta name="title" content="un exemple de titre">
- <hr>
- <link href="bidule.css" rel="stylesheet" type="text/css">
- <br>
1.2. Imbrication des balises
C'est un peu le principe des poupées russes : les premières ouvertes doivent être les dernières fermées, autrement on est confronté à des balises chevauchantes ...
exemple :
<p>
<b>
<u>
<i>
texte en gras, souligné, italique dans un paragraphe
</i>
</u>
</b>
</p>
autre exemple (liste à puces):
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>
Dans le 2ème exemple, il n'y a pas 2 <li> consécutifs. Chaque <li> est fermé avant d'ouvrir le <li> suivant.
2. Pourquoi des normes ?
L'idée de la norme est de définir des règles, des conventions d'écriture ainsi qu'un vocabulaire commun à tout le monde pour qu'on puisse se comprendre.
C'est ainsi que des normes sont apparues afin de créer une sorte de grammaire permettant d'articuler les mots du vocabulaire.
Ces normes du Web ont été créées par un organisme nommé W3C, World Wide Web Consortium (né en 1994).
Il a pour but de définir des recommandations dans la manière d'écrire une page internet.
Cela engendre 2 conséquences :
- Ecrire un document qui ne respecte pas ces recommandations ne veut pas dire que le document ne pourra jamais être lu;
- le navigateur Web est un logiciel créé par une société, il peut respecter ou non les normes du W3C.
Ces recommandations se basent sur plusieurs aspects du développement d'un code source. Elles permettent de définir la sémantique des balises, mais aussi des politiques d'accessibilité.
Un document écrit selon les normes W3C d'un doctype n'est pas synonyme d'un meilleur référencement, ni d'une meilleure accessibilité. Le validateur W3C n'est jamais qu'un algorithme, et autant "je mange un mur" est grammaticalement correct, autant sémantiquement, cette phrase est dénuée de sens, veillez donc bien à être rigoureux dans la sémantique, mais sachez aussi prendre du recul par rapport au résultat de la validation W3C.
3. Structure d'une page HTML
<DOCTYPE ...> <head> <title>Titre de la page</title> <meta name="description" content="description de la page"> <... d'autres balises metas ici> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> (cf §charset plus loin) <link CSS> <script type="text/javascript"> ... </script> </head> <body> <!-- ici le corps de la page, ce qui est censé s'afficher dans le navigateur --> </body> </html>
La page HTML se compose de plusieurs parties, découpées en sous-parties. Tout d'abord, une ligne concernant le DOCTYPE (cf. ci-dessous) puis la section <html>...</html>. La section <html>...</html> est la page en tant que telle. Tel un humain, elle se divise en une tête (<head>...</head>) et un corps (<body>...</body>).
La tête du document sert au navigateur, à indiquer le titre de la page, ou des balises "metas" ainsi que des appels à des fichiers externes, tels que favicon, script javascript ou styles CSS.
Le corps de la page est la partie qui sera visible à l'écran.
Le langage HTML supporte les commentaires, c.à.d. des portions de texte (ou de code) réparties sur une ou plusieurs lignes consécutives qui ne seront pas interprétées graphiquement. En HTML, le commentaire commence par <!-- et finit par --> (attention à bien séparer d'un espace le signe du début ou fin de commentaire du texte à commenter). Dans l'exemple suivant, l'item "texte2" ne sera pas affiché, puisqu'il est commenté. ATTENTION : bien que non affiché "graphiquement", le commentaire sera présent dans le code source de la page.
<ul> <li>texte 1</li> <!-- <li>texte 2</li> --> <li>texte 3</li> </ul> <!-- Ici je mets le texte que je veux, il ne sera pas affiché sur le site... -->
4. Les Doctypes
Un doctype (alias DTD, Document Type Definition) est une ligne de code source HTML qui donne la directive de formatage du document. C'est un peu comme si un écolier écrivait en tête de copie "J'écris en français moderne, type an 2024, langage soutenu." Ainsi le lecteur sait qu'il ne doit pas s'attendre à une orthographe de l'époque de Rabelais.
Le doctype est un peu pareil, il permet de définir selon quelles modalités a été écrit le document Web que le navigateur a à traduire.
Le doctype, c'est une suite de règles qui définissent quelles balises peuvent contenir quelles autres, le type de la balise, la manière de l'ouvrir ouvrir et fermer ...
Le doctype permet donc de définir une sorte de hiérarchie des balises, et, indirectement, donne la structure type d'une page.
HTML 4 : Il existe 2 doctypes déclinés en 3 "normes" chacun. Chaque doctype dispose en outre de plusieurs versions, les versions ayant vu apparaître de nouvelles balises HTML, et d'autres être dépréciées.
Les 2 doctypes correspondent chacun à une façon d'écrire l'HTML, l'un étant la forme HTML "simple", l'autre étant le "successeur" de l'HTML, le xHTML (eXtensible HTML).
l'xHTML est de l'HTML écrit à la façon XML (eXtensible Markup Language), d'où l'idée de "succession" dans l'évolution des langages.
Pour l'HTML 5, le W3C a bien simplifié les choses : il n'y a qu'un seul doctype.
4.1. Doctypes HTML 4
Il en existe donc 3 :
<!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">
respectivement un strict, un transitional et un frameset.
Lequel choisir ? le strict est plus rigoureux que le transitional, il implique dont un codage plus "propre". Le frameset est destiné aux pages de cadres (technique dépréciée).
4.2. Doctypes xHTML
Il en existe 3 également :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
respectivement un strict, un transitional et un frameset.
Lequel choisir ? le strict est plus rigoureux que le transitional, il implique dont un codage plus "propre". Le frameset est destiné aux pages de cadres (technique dépréciée).
4.3. Doctype HTML 5
<!DOCTYPE html>
4.4. Les particularités de l'xHTML par rapport à l'HTML sont les suivantes :
- Toutes les balises ouvertes doivent être fermées.
- Toutes les balises et leurs attributs doivent être en minuscules. (Là où l'HTML permet d'écrire <A HrEf="...", en XHTML ce ne sera pas valide.)
- Les attributs ne peuvent plus être minimalisés.
- Les guillemets autour des valeurs d'attributs sont obligatoires.
- Les balises propriétaires ne sont pas autorisées.
- Les attributs et éléments de présentation sont interdits.
- Pour les balises sans fermeture, on les termine par />, c'est le cas de : <input /> <hr /> <br /> <meta /> <img /> <link /> entres autres...
4.5. Dois-je être obligatoirement en XHTML 1.0 ou XHTML 1.1 ?
Pas forcément !
Actuellement, la tendance est nettement plus vers l'HTML 5. Mais "du temps de l'HTML 4", on pouvait aussi très bien faire un document en (HTML) strict tout aussi valide sémantiquement parlant et qui soit tout aussi fonctionnel. Le choix de l'XHTML est un choix à évolutivité, car on peut y inclure de l'XML. (pour autant que dans les metas, on spécifie réellement que le content type soit html et xml)
Pour un site en HTML, le passer en XHTML n'apportera rien de plus si, sur le plan sémantique, l'HTML était rigoureusement écrit.
Il peut être intéressant, dans le cas d'une mise à jour, de passer en XHTML 1.0, pourquoi pas ... Mais ça peut impliquer du boulot.
Quoiqu'il en soit, il faut arrêter les idées préconçues : l'XHTML n'est pas plus "propre" que de l'HTML, l'XHTML n'est pas plus accessible que l'HTML, toutes les balises de l'XHTML existent déjà en HTML... Trop souvent on pense "XHTML = tableless", alors que le raisonnement n'est pas nouveau de l'XHTML ... (cf. Sémantique HTML )
4.6. Le Doctype est-il obligatoire ?
Difficile question ... D'emblée, répondons non et voyons ce qui en découle.
- Je peux alors mélanger les balises à ma convenance,
- Je peux alors mélanger les façons d'écrire,
- Je peux mélanger l'écriture HTML et l'écriture XHTML
Pourtant mon document s'affiche bien dans le navigateur ...?
Oui, mais ça ne marche pas comme ça ... :-)
Une page sans Doctype est une page sans aucune convention d'écriture. Bien qu'une page HTML soit *affichée* lorsqu'elle ne contient pas ce genre d'information, il n'en demeure pas moins qu'on s'expose au risque d'accroître l'incompatibilité de navigateurs, voire la réaction (parfois surprenante) de certains navigateurs ...
En effet, si la DTD n'est pas spécifiée, le navigateur par défaut va en choisir une qui lui est propre et interne, afin de s'accorder sur un modèle d'écriture. On appelle cela le mode "Quirks". Le but est de privilégier une certaine retro compatibilité (on ne sait pas de quel doctype il s'agit, la page peut alors être très ancienne) et sur des navigateurs récents, le résultat n'est pas gagné d'avance ...
Pour répondre à la question de ce sous-titre, non, il n'est pas fondamentalement obligatoire, mais de même qu'un humain a une tête, un tronc, 2 membres supérieurs et 2 membres inférieurs, une page HTML a un doctype et une section html, laquelle contient une section head et une section body ... Le tronquer du doctype serait comme tronquer d'un bras un humain. (Il peut vivre, bien sûr ...)