Repérer la structure d’une page HTML

Une page web peut sembler complexe dans le navigateur, mais elle repose sur une structure que vous pouvez lire directement dans un fichier. Savoir repérer cette structure vous permet de comprendre où se trouvent les contenus que vous voudrez ensuite mettre en forme.

Dans cette leçon, vous allez examiner un document HTML minimal, puis identifier ses titres, ses paragraphes et ses liens. Vous n’avez pas besoin de connaître le CSS pour réaliser ces premières étapes.

Une page HTML a une structure minimale

Le navigateur lit un document HTML pour en afficher le contenu. Le document comporte une partie consacrée aux informations sur la page, puis une partie qui contient les éléments visibles. Ces deux parties sont organisées dans une structure commune à la plupart des pages web.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Voici ma première page web.</p>
  </body>
</html>

Le navigateur affiche le titre « Bienvenue », puis le texte « Voici ma première page web. ». Le contenu de l’élément title apparaît généralement dans l’onglet du navigateur.

La déclaration indique que le document utilise la version actuelle du HTML. L’élément html contient le reste du document ; son attribut lang="fr" précise que le contenu est en français. Cette information aide notamment les outils qui interprètent ou lisent la page.

L’élément head rassemble des informations sur le document, comme son titre et son encodage. La balise meta charset="utf-8" permet d’afficher correctement les caractères français, dont les accents. L’élément body, lui, contient le contenu principal présenté dans la page.

Balises, éléments et attributs

Une balise est une notation entre chevrons, par exemple . Pour la plupart des contenus, une balise ouvrante précède le texte et une balise fermante, reconnaissable à sa barre oblique, le suit : Texte. L’ensemble formé par les balises et leur contenu constitue un élément HTML.

Certaines balises portent des attributs, qui ajoutent une information ou un réglage à l’élément. Dans , lang est le nom de l’attribut et fr sa valeur. Un attribut s’écrit dans la balise ouvrante, après le nom de l’élément.

Titres, paragraphes et liens

Les titres structurent le contenu et indiquent les sujets abordés. HTML propose six niveaux, de h1 à h6 : h1 correspond au titre principal de la page, tandis que les niveaux suivants servent aux sous-parties. Choisissez un niveau selon la place du titre dans le contenu, et non simplement selon son apparence.

Un paragraphe de texte s’écrit avec l’élément p. Pour créer un lien, utilisez l’élément a et renseignez son attribut href avec l’adresse de destination. Le texte placé entre les balises est celui sur lequel le lecteur peut cliquer.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Présentation de l’atelier</title>
  </head>
  <body>
    <h1>Atelier de jardinage</h1>
    <h2>Nos activités</h2>
    <p>Nous proposons des ateliers pour apprendre à cultiver des plantes.</p>
    <p>Consultez le <a href="https://fr.wikipedia.org/wiki/Jardinage">dossier sur le jardinage</a>.</p>
  </body>
</html>

Une page avec le titre « Atelier de jardinage », le sous-titre « Nos activités », deux paragraphes et un lien cliquable vers le dossier indiqué.

Dans cet exemple, h1 annonce le sujet général et h2 introduit une partie du contenu. Les deux éléments p séparent des idées distinctes. Le lien est intégré dans le second paragraphe : son adresse est portée par href, tandis que son texte visible invite à ouvrir la ressource.

À retenir

• Un document HTML comprend une structure générale, des informations dans head et du contenu dans body.
• Une balise est une notation ; un élément comprend généralement une balise ouvrante, un contenu et une balise fermante.
• Les attributs précisent certaines informations sur un élément et s’écrivent dans sa balise ouvrante.
• Utilisez h1 à h6 pour hiérarchiser les titres, p pour les paragraphes et a avec href pour les liens.

Vous savez maintenant repérer les éléments qui composent une page simple. Dans la prochaine leçon, vous préparerez un fichier de styles et le relierez au document HTML.