La page HTML

La structure minimum

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

Le doctype

Obligatoire, et en toute première ligne.

Il annonce la version de HTML. Sans lui, le navigateur bascule dans un mode de compatibilité avec les pages du siècle dernier, et votre mise en forme part de travers.

À quoi sert d’indiquer la langue de la page ?

À tous ceux qui lisent sans comprendre

• Les moteurs de recherche, pour proposer la page aux bonnes personnes.
• La synthèse vocale, qui prononcera « poisson » à la française.
• La correction orthographique des formulaires.
• La traduction automatique, qui saura de quelle langue partir.

La tête et le corps

• head parle de la page : titre, langue, encodage, styles. Rien ne s’y affiche.
• body est la page : textes, images, liens. Tout s’y voit.

Erreur classique : écrire du contenu dans la tête. Il n’apparaît nulle part.

Le titre ne s’affiche pas dans la page

Il s’affiche partout ailleurs : l’onglet, les résultats de recherche, les favoris, l’historique, l’aperçu d’un lien partagé.

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

Les métadonnées

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

charset pour que les accents s’affichent, viewport pour le téléphone, description pour les moteurs de recherche.

Les caractères spéciaux

En UTF-8, tapez tout directement. Sauf dans trois cas.

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

Connaissez-vous un caractère pour chacun de ces cas ?

Que va afficher ce code ?

<p>si a<b, alors b>a</p>

Le navigateur voit une balise

La page affiche « si aa » : le navigateur lit <b, alors b> comme une balise <b>, qui met en gras.

Un chevron dans le texte s’écrit <.

Les entités

• Les caractères réservés : < pour <, > pour >, & pour &.
• Les majuscules accentuées : É pour É, À pour À, Ç pour Ç.
• L’espace insécable :  , avant : ; ! ? et dans les guillemets « ».