Cours HTML / Définir le titre, la description, la langue et l’encodage d’une page

Le head d'un document HTML contient des informations telles que le title de son onglet de navigateur, le codage des caractères et la description de la page. La langue par défaut du document doit être placée dans html lang. Ces paramètres aident les navigateurs et autres outils à interpréter et décrire la page, mais ne remplacent pas le contenu lisible dans body.

Commencez avec un document complet

<!doctype html>

<html lang="fr">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Petit Jardin | Guide d’entretien des plantes</title>

  <meta name="description"

        content="Découvrez des plantes adaptées aux débutants et leurs soins essentiels avec le guide Petit Jardin.">

</head>

<body>

  <h1>Petit Jardin</h1>

  <p>Apprenez à prendre soin des plantes.</p>

</body>

</html>

Enregistrez le code sous index.html et ouvrez-le dans un navigateur. Le title apparaît sur l'onglet du navigateur, tandis que le h1 est visible sur la page. Ils ont des fonctions différentes mais devraient décrire la même page de manière cohérente. Le h1 de l'exemple se trouve à l'intérieur d'un document exemple, et non comme un deuxième titre dans ce post tutoriel. Commencez par la distinction entre head/body dans Structure de base d'un document HTML.

La plupart du contenu head n'est pas affiché comme du texte normal sur la page. Mettez les instructions et explications que les lecteurs devraient voir dans body. Sur un site multipage, écrivez un titre et une description distincts et précis pour chaque page plutôt que de copier le même nom de site partout.

Définissez la langue et le codage des caractères

lang="fr" indique que la langue par défaut du document est le français. Cela peut aider la technologie d'assistance à prononcer et à traiter le contenu. Utilisez la langue réelle de la page ; une phrase occasionnelle dans une autre langue ne nécessite pas de changer l'ensemble du document lang. Un passage plus long dans une langue différente peut avoir son propre attribut de langue. La langue et la structure soutiennent également les vérifications de lecture et d'interaction dans Accessibilité de base : titres, liens, images et clavier.

meta charset="utf-8" déclare l'encodage des caractères. Enregistrez également le fichier lui-même en UTF-8. Si des caractères apparaissent corrompus, vérifiez à la fois l'encodage de sauvegarde de l'éditeur et, lorsqu'il est servi en ligne, les en-têtes de réponse du serveur. Changer la balise seule ne peut pas réparer un fichier enregistré dans un encodage différent.

Comprendre la description et la fenêtre d'affichage

La métadonnée description doit résumer ce que les lecteurs trouveront sur cette page spécifique, et non lister des mots-clés. Les moteurs de recherche peuvent générer un extrait de résultat à partir du texte ou des métadonnées de la page, donc la description écrite n'apparaîtra pas nécessairement mot pour mot. Voir la documentation des extraits de recherche de Google.

Le paramètre viewport affecte la fenêtre d'affichage de mise en page et l'échelle initiale sur les appareils mobiles. Il est utile avec le CSS responsive, mais la balise seule ne fait pas en sorte que chaque élément s'adapte à un téléphone. Ne restreignez pas le zoom simplement parce que le texte semble petit ; corrigez plutôt le CSS et la taille de la police. Voir la référence meta de MDN et la référence du titre.

Séparer chaque réglage de son emplacement

lang n'est pas une balise séparée à l'intérieur de head. Mettez-la sur l'élément du document, comme <html lang="fr">, et utilisez un attribut de langue sur un élément particulier pour un passage dans une autre langue.

1. Si les caractères sont illisibles, ouvrez l'original correct et vérifiez son encodage réel lors de l'enregistrement. Conservez une copie avant de sauvegarder un texte qui pourrait déjà avoir été décodé incorrectement.
2. Sauvegardez un fichier UTF-8 connu et correct, gardez la déclaration de charset près du début et rouvrez-le. Changer la déclaration ne répare pas un texte déjà endommagé.
3. Si le fichier local est correct mais que la page servie par le serveur ne l'est pas, examinez le Content-Type et le charset de la réponse du document dans Network. Alignez la déclaration du serveur avec l'encodage réel du fichier.

Attribut global lang MDN

Vérifiez la page avant de la partager

Vérifiez que chaque titre d'onglet distingue sa page, que le titre visible décrit le même sujet et que les caractères s'affichent correctement. Si vous avez rédigé une description, comparez-la avec le corps actuel plutôt qu'avec une version ancienne. Ouvrez la page à une largeur de type téléphone et testez le zoom et le défilement horizontal ; les métadonnées et la mise en page doivent fonctionner ensemble.