La page HTML

1. La structure minimum

Voici le squelette dont part n’importe quelle page. Apprenez à le taper de mémoire, vous le réécrirez des centaines de fois.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Titre de ma page</title>
</head>
<body>

    Contenu de la page

</body>
</html>

Six balises, et chacune a une raison d’être.

2. Le doctype

<!doctype html>

Il indique au navigateur la version de HTML dans laquelle la page est écrite. Celle-ci, la plus courte, veut dire « la version actuelle ».

Il est obligatoire, et c’est la première ligne du fichier, avant tout le reste. Sans lui, les navigateurs basculent dans un mode de compatibilité avec les pages du siècle dernier, et votre mise en forme part de travers sans que rien n’explique pourquoi.

3. La balise html

Elle contient toute la page. Elle porte un attribut à ne jamais oublier : lang, la langue du contenu.

<html lang="fr">

Elle sert à tous ceux qui lisent la page sans la comprendre.

• Les moteurs de recherche, pour proposer la page aux bonnes personnes.
• La synthèse vocale, qui prononcera « poisson » à la française et non à l’anglaise.
• La correction orthographique des formulaires, qui a besoin de savoir dans quel dictionnaire chercher.
• La traduction automatique, qui saura de quelle langue partir.

4. La tête et le corps

La page se divise en deux, et la frontière est simple : ce qui se voit, et ce qui ne se voit pas.

• head, la tête, contient tout ce qui parle de la page : son titre, sa langue, son encodage, ses feuilles de style. Rien de ce qui s’y trouve ne s’affiche dans la fenêtre.
• body, le corps, contient la page elle-même : les textes, les images, les liens. Tout ce que vous y écrivez se voit.

Une erreur classique de débutant est de placer du contenu dans la tête. Il n’apparaît nulle part, et on cherche longtemps.

5. Le titre

<title>Titre de ma page</title>

Il est dans la tête, donc il ne s’affiche pas dans la page. Il s’affiche partout ailleurs : dans l’onglet du navigateur, dans les résultats des moteurs de recherche, dans les favoris, dans l’historique, et dans l’aperçu quand on partage le lien.

C’est souvent la seule phrase qu’un inconnu lira de votre page avant de décider s’il l’ouvre.

6. Les métadonnées

Les balises meta donnent des informations sur la page. Elles sont auto-fermantes, et vivent dans la tête.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ce que raconte cette page, en une phrase.">

• charset déclare l’encodage des caractères. Sans elle, vos accents ont de bonnes chances de s’afficher en charabia. Mettez toujours UTF-8.
• viewport dit au téléphone d’afficher la page à sa largeur d’écran, au lieu de la réduire comme une page conçue pour un ordinateur.
• description est la phrase que les moteurs de recherche affichent sous votre titre.

Il en existe beaucoup d’autres, notamment celles qui règlent l’aperçu d’un lien partagé sur les réseaux sociaux : l’image, le titre et le texte que vous voyez apparaître quand quelqu’un colle une adresse dans une conversation.

7. Les caractères spéciaux

Certains caractères ne s’écrivent pas tels quels dans le code. On les remplace par une entité : un nom court, qui commence par & et finit par ;. Le navigateur affiche le caractère à sa place.

7.1 La règle

Grâce à <meta charset="UTF-8">, vous pouvez taper presque tous les caractères directement : é, è, ç, €, « »… On n’utilise une entité que dans trois cas :

• le caractère a un sens en HTML ;
• il n’a pas de touche sur votre clavier ;
• il est invisible.

7.2 Les caractères réservés

Le chevron < annonce une balise. Si vous l’écrivez dans un texte, le navigateur croit qu’une balise commence, et la suite du texte risque de disparaître.

Dans <p>si a<b, alors b>a</p>, le navigateur lit <b, alors b> comme une balise <b>, qui met en gras. La page affiche seulement « si aa ».

Pour afficher le chevron, on écrit <, de l’anglais less than.

Même chose pour son frère >, qui s’écrit >, et pour & lui-même, qui annonce une entité et s’écrit donc &.

<p>Si a &lt; b, alors b &gt; a.</p>
<p>Tom &amp; Jerry</p>

La page affiche : « Si a < b, alors b > a. » et « Tom & Jerry ».

7.3 Les majuscules accentuées

Sur un clavier AZERTY, il n’y a pas de touche pour É, À ou Ç. Ce n’est pas une raison pour écrire « ECOLE » : en français, les majuscules gardent leurs accents.

Le nom de l’entité se devine : la lettre, puis le nom de son accent en anglais. Une lettre majuscule donne une majuscule.

<h1>&Eacute;cole primaire</h1>
<p>&Ccedil;a commence demain.</p>

7.4 L’espace insécable

En français, on met une espace avant :, ;, ! et ?, et à l’intérieur des guillemets « ».

Le problème, c’est que le navigateur peut couper la ligne sur cette espace. Le point d’exclamation se retrouve alors tout seul au début de la ligne suivante.

L’espace insécable empêche cette coupure. Elle s’écrit  , de l’anglais non-breaking space.

<p>Bienvenue&nbsp;!</p>
<p>Il a dit «&nbsp;bonjour&nbsp;».</p>
<p>Le départ est à 10&nbsp;km.</p>

Elle sert aussi entre un nombre et son unité : « 10 km » ne doit jamais être coupé en deux.

Comme elle ressemble à une espace ordinaire, on ne la voit pas dans le code si on la tape directement. L’entité a l’avantage de se lire.