Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.
| Prérequis : | Vous devriez avoir installé un éditeur de texte et connaître quelques rudiments de HTML. |
|---|---|
| Objectifs : | Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu. |
Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Inscrire un titre ici</title>
<!-- On peut avoir d'autres méta-données ici -->
</head>
<body>
<!-- Ici, on placera tout le contenu à destination
de l'utilisateur -->
</body>
</html>
Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.
Qu'est-ce qu'un document HTML ?
Un document HTML ou une page web est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <html> et <body> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <body> et une balise fermante correspondante : </body>). Un élément est une chaîne de texte entre deux balises.
La plupart des programmes (le plus souvent des navigateurs) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.
Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel éditeur de texte. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et attributs les plus communs. C'est le but de la zone d'apprentissage de MDN.
Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :
- ce qu'est un doctype et pourquoi c'est important
- l'élément racine :
<html> - la différence entre les éléments placés dans
<head>et dans<body> - l'importance de l'élément
<title>. - la définition du jeu de caractères à utiliser pour le document avec l'élément
<meta>.
Le doctype
La chaîne de texte suivante est appelée doctype (qui est la contraction, anglaise, de « document » et « type »).
<!DOCTYPE html>
En ce qui concerne HTML, le doctype est un reliquat historique. Pourquoi est-il alors toujours présent ?
Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.
Le doctype déclenche l'utilisation du mode standard. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le W3C et le WHATWG. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.
Attention : Le doctype doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.
L'élément <html>
Tout le document (en dehors du doctype) est contenu entre les balises <html> et </html>. Il ne peut y avoir qu'un seul élément <html> par document.
Il est possible d'oublier <html> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <html> sera nécessaire. Par exemple, on utilise <html lang="fr"> pour indiquer que le document entier est écrit en français. De la même façon, <html> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.
Les éléments <head> et <body>
Au sein de l'élément <html>, le document aura une « tête » (head en anglais) située entre les balises <head> et </head> et un « corps » (body en anglais) situé entre les balises <body> et </body>.
La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.
Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.
HTML est très souple à propos de la structure du document, si vous oubliez les éléments <head> et <body>, ils seront implicitement ajoutés. Voici un document sans <html> ni <head> ni <body> :
<!DOCTYPE html> <title>Ceci est un document HTML</title> Coucou monde ! (<i>Hello world!</i>)
Le navigateur s'occupera de tout :
![[Screenshot of the browser making its best guess]](https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png)
Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <head> et où est <body>, vous gagnerez plus de temps.
L'élément <title> : le titre du document
Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :
<!DOCTYPE html>
<html>
<head>
<titre>Mon fabuleux exemple HTML</title>
...
</head>
<body>
...
</body>
</html>
Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <title>).
Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.
S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :
<!DOCTYPE html> <!-- Pas de titre ici --> Hello world!
| Chrome | ![[Screenshot of a Chrome tab labeled ''index.html'']](https://mdn.mozillademos.org/files/10887/index-ch.png) |
|---|---|
| Firefox | ![[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]](https://mdn.mozillademos.org/files/11143/index-ff.png) |
-
Définir le jeu de caractères utilisé
Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.
Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé UTF-8 qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001".
D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <meta charset="utf-8"> dans l'exemple ci-avant.
Note : En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.
Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :
![[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']](https://mdn.mozillademos.org/files/10907/index-encoding.png)
Modèles et gabarits
Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).
Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).
Astuce : Si votre éditeur de texte permet de gérer les snippets (fragments de code), vous pouvez placer votre modèle dans un snippet pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.
Astuce : À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet HTML5 Boilerplate. Celui-ci décrit des templates (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.
Exercices
À construire, n'hésitez pas à contribuer !