Cours HTML / Structure de base d’un document HTML

Un document HTML commence par une déclaration <!doctype html>, suivie de l'élément racine html. À l'intérieur de html, head contient les métadonnées du document tandis que body contient le contenu principal de la page. Vous pouvez enregistrer l'exemple ci-dessous comme fichier HTML et l'ouvrir dans un navigateur.

La forme de base d'un document HTML

Commencez par examiner l'exemple complet. L'élément extérieur html contient à la fois head et body.

<!doctype html>

<html lang="fr">

  <head>

    <meta charset="utf-8">

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

    <title>Mon premier document HTML</title>

  </head>

  <body>

    <h1>Bonjour</h1>

    <p>Ceci est le corps du document.</p>

  </body>

</html>

L'indentation facilite la visualisation des éléments imbriqués les uns dans les autres. Le navigateur interprète les balises pour construire la structure du document ; le titre et le paragraphe à l'intérieur de body constituent le contenu que vous voyez principalement sur la page.

Que fait chaque partie ?

• <!doctype html>: Déclare le document comme HTML. Ce n'est pas un élément HTML. Le placer au début aide le navigateur à utiliser le mode standard.
• <html lang="fr">: L'élément racine du document. lang="fr" identifie le français comme langue principale, ce qui aide les outils tels que les lecteurs d'écran à choisir la prononciation appropriée.
• <head>: Contient des métadonnées telles que le titre du document, le codage des caractères et les paramètres de la fenêtre d'affichage. Son contenu n’apparaît pas intégralement dans le corps de la page.
• <body>: Contient le contenu principal de la page, incluant les titres, les paragraphes, les images et les liens.

La norme HTML permet d’omettre certaines balises de début et de fin, mais écrire html, head et body explicitement rend la structure plus facile à suivre lorsque vous apprenez. Les descriptions des éléments de document de la norme WHATWG HTML fournissent les définitions détaillées. Les règles pour les balises et les attributs sont expliquées dans Syntaxe.

Trois réglages à l'intérieur de head

Le head de l'exemple contient trois réglages utiles à reconnaître dans un premier document HTML. Comparez les emplacements et vérifications pour chaque élément de métadonnées dans Définir le titre de la page, la description, la langue et l'encodage.

• meta charset="utf-8": Déclare UTF-8 comme l'encodage des caractères du document. Enregistrez également le fichier en UTF-8 afin que ses caractères s'affichent correctement. Placez la déclaration d'encodage près du début du document.
• meta name="viewport": Définit la largeur de la fenêtre d'affichage sur la largeur de l'appareil pour les navigateurs mobiles. Cette balise seule ne rend pas un design responsive.
• title: Définit le titre du document, qui apparaît dans des endroits tels que l'onglet du navigateur. Il a un objectif différent de celui d'un h1 affiché dans le corps de la page.

Remarquez la différence entre title et h1 dans l'exemple : l'onglet du navigateur indique « Mon premier document HTML », tandis que le titre visible sur la page indique « Bonjour ».

Enregistrez le fichier HTML et ouvrez-le dans un navigateur.

Utilisez le premier bloc de code pour créer un vrai fichier et vérifier le résultat. Vous n'avez besoin que d'un éditeur de texte brut et d'un navigateur web ; enregistrez le code en texte brut plutôt qu'en document formaté.

1. Créez un dossier de travail, ouvrez un nouveau fichier dans un éditeur de texte et collez l'ensemble du premier bloc de code.
2. Enregistrez le fichier dans ce dossier sous le nom index.html. Choisissez UTF-8 si l'éditeur demande un encodage. index.html est un nom commun pour la première page d'un site, mais un autre nom de fichier se terminant par .html fonctionne également pour cet exercice.
3. Double-cliquez sur index.html dans votre gestionnaire de fichiers. Si une autre application s'ouvre, utilisez « Ouvrir avec » pour choisir un navigateur web, ou faites glisser le fichier dans une fenêtre de navigateur.
4. Vérifiez que l'onglet du navigateur indique « Mon premier document HTML » et que la page affiche « Bonjour » au-dessus de « Ceci est le corps du document. » La barre d'adresse affiche une URL file:// pour le fichier local.
5. Modifiez le texte à l'intérieur de title et h1 dans l'éditeur, enregistrez le fichier, et actualisez le navigateur. Comparez le titre de l'onglet mis à jour et le titre sur la page.

Ouvrir une URL file:// lit un fichier sur votre propre ordinateur. Envoyer cette URL à quelqu'un d'autre ne lui donne pas accès à votre copie ; pour partager la page sur le web, vous devez téléverser ses fichiers sur un serveur web ou un service d'hébergement.

Si le résultat n'est pas celui que vous attendiez

• Le navigateur affiche les balises comme du texte : Vérifiez si le nom de fichier réel se termine par .txt, par exemple index.html.txt. Certains éditeurs ajoutent cette extension lors de l'enregistrement d'un document texte. Si nécessaire, sélectionnez « Tous les fichiers » ou l'équivalent dans la boîte de dialogue Enregistrer et enregistrez-le en tant que index.html. Afficher les extensions de fichiers dans le gestionnaire de fichiers vous aide à vérifier le nom.
• Vos modifications n'apparaissent pas : Enregistrez le fichier dans l'éditeur et actualisez le navigateur. Si plusieurs dossiers contiennent un fichier portant le même nom, comparez le chemin du fichier dans le navigateur avec le dossier où vous avez enregistré vos modifications.
• Les caractères semblent brouillés : Vérifiez que vous avez enregistré le fichier en UTF-8 et que vous avez conservé la déclaration <meta charset="utf-8"> dans le document.
• La page est vide : Assurez-vous d'avoir ouvert le fichier souhaité et que le titre et le paragraphe sont toujours à l'intérieur de body.

Pour en savoir plus sur l'ouverture et l'organisation des fichiers HTML locaux, voir le guide de MDN pour la gestion des fichiers.