Télécharger le PDF du cours
En effet aujourd’hui, tous les navigateurs sérieux suivent les standards proposés par le W3C, ce qui n’était pas forcément le cas dans le passé.
Cela nous permet donc d’être plus ou moins certain qu’un même code va produire le même résultat quel que soit le navigateur utilisé par les visiteurs qui consultent la page.
Cependant, cela n’est possible que parce que les développeurs eux-mêmes suivent certains schémas de construction de leur page qui sont anticipables et attendus par les navigateurs.
Le schéma de base d’une page HTML va donc toujours être le même. C’est ce que nous appellerons la « structure minimale d’une page HTML valide ».
Cette nouvelle leçon va être consacrée à la création d’une première page HTML dite « valide », c’est-à-dire qui respecte les standards, et va nous permettre de comprendre le rôle de chaque élément de cette structure minimale.
La structure minimale d’une page HTML
Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement comporter certains éléments et suivre un schéma précis.
Vos pages HTML devraient toujours être valides pour les raisons évoquées ci-dessus. En effet, une page non valide ne sera pas comprise par le navigateur qui va alors potentiellement mal l’afficher voire dans certains cas ne pas l’afficher du tout.
De plus, une page non valide sera également mal analysée par les moteurs de recherche et ces mêmes moteurs de recherche risquent donc de ne pas la valoriser, c’est-à-dire de ne pas la proposer aux utilisateurs recherchant une information que votre page contient. En d’autres termes, posséder des pages non valides risque d’impacter négativement le référencement de ces pages et de votre site en général dans les moteurs de recherche.
Voici ci-dessous le code minimum pour créer une page HTML valide. Nous allons dans la suite de ce chapitre expliquer le rôle de chaque élément et attribut.
Le DOCTYPE
Tout d’abord, nous devrons toujours démarrer une page HTML en précisant le doctype de notre document. Comme son nom l’indique, le doctype sert à indiquer le type du document.
Faites bien attention à l’écriture du doctype : vous pouvez remarquer que la balise représentant le doctype commence par un point d’exclamation. Ceci est un cas unique.
Dans la balise de l’élément doctype, on va préciser le langage utilisé, à savoir le HTML dans notre cas.
Il est possible que vous trouviez encore sur certains sites une déclaration du doctype possédant une syntaxe différente et plus complexe comme celle-ci : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
Cette écriture correspond à une ancienne syntaxe qui était utilisée jusqu’à la version 4 du HTML.
L’élément HTML
Après avoir renseigné le type du document, nous devons utiliser un élément html. Cet élément est composé d’une paire de balises ouvrante <html> et fermante </html>.
L’élément html va représenter notre page en soi. On va insérer tout le contenu de notre page (et donc les autres éléments) à l’intérieur de celui-ci.
Les éléments head et body
A l’intérieur de l’élément html, nous devons à nouveau indiquer obligatoirement deux éléments qui sont les éléments head et body et qui vont avoir des rôles très différents.
L’élément head est un élément d’en-tête. Il va contenir des éléments qui vont servir à fournir des informations sur la page au navigateur, comme le titre de la page ou encore le type d’encodage utilisé pour que celui-ci puisse afficher les caractères de texte correctement.
L’élément body va lui contenir tous les éléments définissant les contenus « visibles » de la page, c’est-à-dire les contenus à destination de l’utilisateur et notamment les différents textes présents dans la page, les images, etc.
Les éléments title et meta
Au sein de l’élément head, nous allons devoir à minima indiquer deux éléments qui vont permettre de donner des informations essentielles sur la page au navigateur : les éléments title et meta.
L’élément title va nous permettre d’indiquer le titre de la page en soi, qui ne doit pas être confondu avec les différents textes définis comme des titres dans la page. Ce titre de page est le texte visible sur le haut des onglets de votre navigateur par exemple :
L’élément meta sert lui à transmettre des meta informations sur la page au navigateur. Cet élément possède de nombreux attributs différents. Le type d’informations transmis va dépendre de l’attribut que l’on va préciser.
Ici, ce qui nous intéresse va être de préciser le type d’encodage utilisé dans nos pages. Cela va permettre aux navigateurs d’afficher correctement nos différents textes avec les accents, les cédilles, etc.
Pour faire cela, nous allons utiliser l’attribut charset pour « characters set » c’est-à-dire « ensemble de caractères » de l’élément meta et lui fournir la valeur utf-8.
La valeur utf-8 est de loin la valeur la plus utilisée sur le web et est la valeur de référence pour tous les alphabets latins. Cela va permettre à chacun de nos caractères de s’afficher correctement dans le navigateur.
Note : Lorsque vous travaillez en local vous devrez, avec certains éditeurs, renseigner également l’encodage de la page dans l’éditeur afin que le contenu de celle-ci s’affiche bien et notamment si vous utilisez un outil de prévisualisation de page fourni par votre éditeur.
Voilà tout pour la structure minimale d’une page HTML valide, qui représente toujours la première étape de création d’une vraie page web. Pour le moment, notre page ne possède pas de contenu visible. Nous allons en ajouter progressivement au cours des prochaines leçons.
Un mot sur l’imbrication des balises et des éléments
Un autre concept qu’il vous faut comprendre absolument pour coder en HTML est la façon dont les éléments HTML s’imbriquent les uns dans les autres.
Vous l’avez probablement remarqué : ci-dessus, nous avons placé des éléments HTML entre les balises ouvrantes et fermantes d’autres éléments (par exemple, les éléments title et meta ont été placés à l’intérieur de l’élément head).
On appelle cela l’imbrication. L’imbrication est l’une des fonctionnalités du HTML qui fait toute sa force (nous découvrirons réellement pourquoi plus tard, avec l’étude du CSS).
Cependant, comme toujours, on ne peut pas imbriquer des éléments HTML n’importe comment et il faut suivre des règles précises.
Ainsi, nous n’avons absolument pas le droit de « croiser » les balises des éléments ou, pour le dire plus clairement : le premier élément déclaré doit toujours être le dernier refermé, tandis que le dernier ouvert doit toujours être le premier fermé.
Par exemple, vous voyez que notre premier élément déclaré est l’élément html, qui contient les éléments head et body. L’élément html devra donc être le dernier élément refermé.
Faites bien attention à distinguer les éléments contenus dans d’autres et ceux qui sont au même niveau hiérarchique. Par exemple, ici, title et meta sont deux éléments « enfants » de l’élément head (car ils sont contenus à l’intérieur de celui-ci), mais sont deux « frères » : aucun des deux ne contient l’autre.
Le schéma ci-dessous présente toutes les situations valides d’imbrication d’éléments :
Pour savoir quand un élément doit être placé dans un autre, il faut penser en termes de « dépendance » : les informations transmises par l’élément dépendent-elle d’un autre ou sont elles totalement indépendantes ? Ce concept peut être complexe à se représenter lorsqu’on début à peine, mais ne vous inquiétez pas en pratiquant un peu tout cela va très vite devenir évident.
