La structure d'une page HTML

un lien

Photo par Roman SERDYUK publiée sur Unsplash

Le corps de la page

Ce que nous avons écrit jusqu'ici représente ce qui est affiché à l'écran. C'est ce que l'on appelle le corps de la page. Ce corps de la page contient les informations sur tout ce qui est visible. Mais une page HTML peut contenir d'autre informations :

  • Des informations sur l'auteur de la page
  • Des informations sur des fichiers liés à la page (feuille de style, fichiers javascript, etc.)
  • Des informations techniques sur les pages de code utilisées pour créer la page (character encoding)
  • Des mots clefs pour le référencement dans les moteurs de recherche.

Le corps de la page est contenu dans l'intérieur de la balise body. On aurait donc par exemple comme code HTML 

<body>
    <h1> Titre principal du document</h1>
    <h2> Un titre de niveau 2 </h2>
    <p>
        Un paragraphe
    </p>
    <h3> Un sous-sous titre </h3>
    <p>
        Un autre paragraphe
    </p>
    <h3> Un autre sous-sous titre</h3>
    <p> Paragraphe suivante
    </p>
    <h2> Une nouvelle rubrique (titre de niveau 2)</h2>
    <p>
        Paragraphe !
    </p>
</body>

L'en-tête de la page

Avant la balise body, on trouve en général l'en-tête de la page où se trouve les informations techniques. Vous pouvez l'envisager comme un roman : le corps de la page, c'est le contenu du roman. L'en-tête de la page, c'est la couverture, avec le titre,l'auteur le résumé au dos, la bio de l'auteur en quatrième de couverture, l'éditeur, etc. Ces informations sur la couverture ne font pas partie du roman à proprement parler. L'en-tête de la page non plus.

L'en-tête est contenu dans la balise head. Un en-tête courant sera celui ci : 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Une description de la page">
    <meta name="keywords" content="péniche, écluses, paquebot, crise, décroissance">
    <meta name="author" content="Super élève">
    <title> Le titre de ma page</title>
    <!--feuille de style-->
    <link rel="stylesheet" href="styles.css">
    <!-- Javascript -->
    <script src="script.js"></script>
</head>

Dans la partie de l'en-tête, on retrouve des balises meta. Comme la balise img, ce sont des balises orphelines. Elles donnent des informations sur la page. La première donne la page de code utilisée (utf-8, qui est maintenant quasiment un standard). La seconde donne une information pour les affichage "haute définition",qui doivent afficher à l'échelle correctement. Les suivantes décrivent la page (auteur, contenu, mot clef, description)

On a ensuite la balise title qui est le titre de la page.

Attention

La balise title n'indique pas le titre qui s'afficherait en haut de la page. C'est le nom de la page, que vous pouvez retrouver sur l'onglet du navigateur par exemple. Mais cette balise fait partie de l'en-tête, pas du corps, et à ce titre ne s'affiche pas avec le contenu.

La balise link lie la page à d'autres page. Elle est essentiellement utilisée pour les feuilles de style qui vont gérer l'affichage. C'est aussi une balise orpheline.

Enfin, la balise script est utilisée pour insérer du javascript qui rendra la page web dynamique. Ici, le script est chargé à partir d'un autre fichier. Attention, script n'est pas une balise orpheline, même s'il n'y a aucun contenu.

La page html

Enfin, tout cela est encadrée par une balise html qui encadre à la fois body et head. Par ailleurs, un fichier HTML commence toujours par une ligne qui indique la version HTML utilisée. Actuellement, avec html5, cette ligne est juste 

<!DOCTYPE html>
À retenir
  • Une page html commence par une ligne qui indique le type de document
  • une balise html encadre l'ensemble
  • une balise head encadre l'en-tête
  • une balise body encadre le contenu 
<!DOCTYPE html>
<html>
    <head>
        <!-- le code de l'en tête -->
    </head>
    <body>
        <!-- le contenu de la page -->
    </body>
</html>
À faire vous même

Affichez le code source de cette page et trouvez les balises html, head et body.

Vidéos de résumé

Voici quelques vidéos qui correspondent à ce que nous avons vu jusqu'ici, tirées de la playlist "Apprendre le HTML" de Grafikart :

Une vidéo sur la syntaxe de base du HTML et la structure de base d'un fichier HTML.

Une vidéo sur le contenu de l'en-tête

Enfin, une vidéo sur les principales balises textuelles dans le corps du document