Structure HTML

Plan du chapitre

Anatomie d’un élément HTML
Structure de base d’un document
Les balises essentielles
HTML sémantique
Exercice : squelette d’une page de recette

Anatomie d’un élément HTML

Une page HTML (ou document) est composée d’éléments qui ont chacun un but et une signification distincte. La plupart des éléments HTML se composent d’une balise ouvrante, d’un contenu, et d’une balise fermante. Certains éléments peuvent également s’écrire avec une balise auto-fermante, c’est à dire qu’elle n’a pas besoin de balise de fin. Cela concerne essentiellement les éléments qui ne contiennent pas de contenu (input, hr, br, …). Exemples :

<div>Mon contenu</div>
<p>Un autre contenu</p>
<input>
<button>Click me !</button>

Chaque balise ouvrante (ou auto-fermante) peut également contenir des attributs. Ces attributs peuvent avoir plusieurs buts :

Spécifier un contenu : <img src="...">, <a href="...">. Ils servent à définir le contenu nécessaire pour le fonctionnement de certains éléments (liens vers une image, liens vers une autre page web, …).
Identifier un élément : id, class. Ils servent à identifier un ou un groupe d’éléments, généralement pour cibler le style.
Spécialiser un élément : <input type="password">, <input type="number">. Ils servent à donner un rôle spécifique à certains éléments qui sont configurables.
Accessibilité : aria-hidden, aria-*, <button role="button">. Ils servent à aider les outils de lecture automatique (et les robots) à décrire à l’utilisateur ce qui est affiché à l’écran.

Pour créer une structure HTML, on peut (pour certains éléments, on doit) imbriquer les éléments. Cette imbrication permet de donner une hiérarchie au document et permet donc de donner un sens sémantique à la page. Exemple :

<div>
    <p>Un premier paragraphe</p>
    <p>Un autre paragraphe</p>
    <ul>
        <li>Un élément de liste</li>
        <li>Un autre élément dans la même liste</li>
    </ul>
</div>

Dans cet exemple, li ne peut pas être utilisé sans ul (ou ol), c’est la même chose pour d’autres éléments comme le table et ses enfants (thead, tbody, tr, td). Dans ce genre de structure, on parle également de relation parent - enfant. Ici, p est l’enfant direct de div et inversement, div est le parent direct de p. Un élément peut également être un enfant non direct d’un autre élément : li est un enfant de div, même si ce n’est pas un enfant direct.

Note

Pour certains des éléments, il existe des règles qui régissent les relations parents/enfants (souvent direct). Pour vérifier cela, il existe un validateur fourni par le W3C

Note

Si vous voulez tester du HTML facilement, vous pouvez simplement créer un fichier qui se termine par .html et l’ouvrir avec votre navigateur.

Structure de base d’un document

Pour que le navigateur comprenne bien votre page HTML, le document doit contenir certains éléments bien précis. Sans cela, le navigateur ne garantit pas un affichage ou un fonctionnement correct.

Doctype

Chaque document doit absolument commencer avec une déclaration DOCTYPE qui indique la version d’HTML qui est utilisée. Dans les pages modernes, on se limite en général à 3 versions de HTML : HTML 5, HTML 4 et XHTML. Tout ce qui est plus vieux n’est généralement pas géré par les dernières versions des navigateurs modernes (appelés Evergreen)

La déclaration ressemble à ceci.

 <!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Note

L’élément DOCTYPE, comme tous les autres éléments HTML, n’est pas case-sensitive et peut s’écrire doctype, Doctype, …

HTML

Ensuite, le document est défini à la racine par la balise html. Dans la balise, on définit également la langue du document avec un code langue ISO 639-1. Exemple :

<html lang="fr">
<!-- Le reste du document -->
</html>

Cet élément est le parent le plus haut du document et contient comme enfant direct les éléments décrits juste après.

HEAD

La balise head contient comme enfant essentiellement des balises de métadonnée et des balises de style. Elle est invisible à l’écran. C’est ici qu’on retrouve entre autres la balise title qui n’est autre que le titre affiché dans l’onglet du navigateur.

Le head contient également ces tags :

meta: sert à spécifier des métadonnées décrivant la page ou son contenu (charset, viewport, description, keyword, …) Le charset sert à définir le jeu de caractères utilisé par la page (UTF-8, ANSI, …). viewport sert à donner des indications au navigateur sur comment doit être dimensionné le contenu par rapport à la zone d’affichage.
link : définit des liens vers des ressources externes, le plus souvent des stylesheets.
base : définit l’URL de base sur laquelle la page est hébergée. Sert aux liens relatifs.
style : sert à définir du style pour la page.
script : sert à définir des scripts (Javascript) ou inclure des fichiers scripts.

Note

Il est possible de définir des scriptset des link dehors de head, généralement pour éviter des problèmes de synchronisation. Dans ces cas, ils peuvent être définis soit dans le body soit à la fin de html

BODY

Le body contient tout le contenu du document HTML, c’est la partie du document qui est affichée à l’écran. Il contiendra tous les tags qui servent à définir le contenu (div, h1, p, …)

Comme expliqué plus haut, il peut aussi contenir des script et des link pour contrer certains problèmes de synchronisation et de performances.

Exemple de document complet :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Structure de Base d'une Page HTML</title>
</head>
<body>

    <h1>Bienvenue sur ma page web</h1>
    <p>Ceci est un paragraphe de texte dans une structure HTML essentielle.</p>

</body>
</html>

Les balises essentielles

Il existe actuellement plus de 100 éléments HTML. Voici les balises essentielles et les plus courantes pour créer une page web :

Agencement général et contenu

Ces balises servent principalement à sectionner et organiser le contenu à haut niveau. On retrouve :

div : une des rares balises qui n’a aucune valeur sémantique, elle sert strictement à diviser et organiser la page. Elle a un comportement bloc par défaut
span : l’équivalent inline de div. Elle sert essentiellement à cibler du texte pour appliquer du CSS
p : sert à définir un paragraphe
dl/dt/dd : sert à créer des listes (description list) de termes (description term) et définitions (description definition)
hr/br: br sert à forcer un saut de ligne. On préférera généralement utiliser du CSS pour faire cela. hr permet de faire une séparation entre deux contenus. Habituellement, les navigateurs l’affichent comme une ligne horizontale.

Titres

Il existe 6 balises qui permettent de définir des titres sur une page, elles vont de h1 à h6. Elles représentent un niveau hiérarchique et doivent respecter certaines règles :

Une seule balise H1 par page
La hiérarchie des titres doit être faite dans l’ordre et sans omettre de niveau. Par exemple, un titre h1 doit forcément être suivi d’un ou plusieurs titres h2

Exemple de bonne hiérarchie:

<h1>Mon super titre</h1>
<h2>Mon premier sous-titre</h2>
<h3>Un titre moins important</h3>
<h3>Un autre titre moins important</h3>
<h2>Mon deuxième sous-titre</h2>
<h3>Mon dernier titre moins important</h3>

Exemple de mauvaise hiérarchie:

<h1>Mon super titre</h1>
<h2>Mon premier sous-titre</h2>
<h4>Un titre moins important</h4>
<h4>Un autre titre moins important</h4>
<h2>Mon deuxième sous-titre</h2>
<h4>Mon dernier titre moins important</h4>

Warning

On a tendance à parfois choisir les balises titre en fonction de leur style par défaut (taille de police, texte gras, …) mais il est important de respecter la hiérarchie et de définir un style via CSS plutôt que de s’appuyer sur le style de base.

Note

Les titres peuvent être contenus dans d’autres balises (div, section, article), mais la hiérarchie doit être respectée de la même façon

Liens

Il existe une balise qui permet de faire des liens, soit vers un autre site, soit vers une autre page du même site. La balise a permet en effet de rediriger vers une autre page ou d’ouvrir un lien dans un nouvel onglet en fonction des attributs présents.

Voici les attributs les plus utilisés :

href : c’est le lien (absolu ou relatif) de la ressource vers laquelle vous voulez rediriger. Cela peut être un lien HTTP, un lien mailto, tel ou sms.
target : c’est la “destination” vers laquelle vous voulez ouvrir le lien (surtout dans le cas d’un href qui représente une autre page). Les deux valeurs les plus utilisées sont _self pour ouvrir dans l’onglet courant et _blank pour ouvrir dans un nouvel onglet.
download: download permet de traiter la cible du lien comme quelque chose à télécharger. La valeur optionnelle de l’attribut représente le filename qui sera le nom du fichier. Si aucune valeur n’est fournie, le navigateur va en déterminer un en se basant sur plusieurs facteurs (en-tête HTTP, dernière partie du lien href, …)

Note

Il existe des liens particuliers qui commencent par blob: ou data:. Ce sont généralement des liens vers des objets temporaires créés dans la mémoire du navigateur qui permettent de télécharger des données qui ne sont pas directement présentes sur un fichier.

Quelques exemples :

<a href="/home">Accueil (relatif à la base)</a> <!-- redirige vers la `base`/home -->
<a href="home">Accueil (relatif à la page courante)</a> <!-- redirige vers `url_courante`/home -->
<a href="/home" target="_blank">Ouvrir dans un nouvel onglet</a>
<a href="https://monsite.com/home">Lien absolu</a>
<a href="mailto:hello.world@gmail.com">Envoyer un email</a>
<a href="tel:0032123654">Appeler</a>
<a href="lien_vers_fichier.zip" download="file.zip"/>

Note

En fonction des préférences utilisateur dans le navigateur ou dans l’OS, le comportement de certains liens peut varier. Par exemple, si le navigateur est configuré pour systématiquement télécharger le PDF, le navigateur le téléchargera systématiquement sans donner l’option de pouvoir l’afficher directement.

Médias

Il existe plusieurs balises qui permettent d’afficher ou diffuser des médias tels que des images, vidéo ou audio.

Images

La balise qui permet d’afficher les images est img. Elle utilise l’attribut src pour spécifier le lien (relatif ou absolu) vers l’image à afficher. Les navigateurs modernes supportent de nombreux formats d’image : jpeg, png, svg, webp, … L’autre attribut important lorsqu’on souhaite afficher une image est l’attribut alt. Il permet de définir un texte à afficher si l’image n’est pas disponible (problème réseau, lien cassé, …). Il sert également à l’accessibilité pour décrire ce qui est affiché pour les personnes malvoyantes (en plus des attributs aria)

Exemple

<img src="mon_super_chat.jpg" alt="un chat roux">

Vidéos

Pour afficher et diffuser des vidéos, il existe la balise video. Elle permet de définir plusieurs sources via une balise enfant source. Chaque source permet de définir un format différent. Les plus courants sont mp4, WebM et ogg. Tous les navigateurs (safari) ne supportent pas toutes les sources Si plusieurs sources sont fournies, le navigateur va choisir celle qu’il supporte le mieux.

Il existe plusieurs attributs qui permettent de configurer le comportement du lecteur : autoplay, controls, loop, muted, …

Exemple

<video controls muted autoplay>
    <source src="ma_video.mp4" type="video/mp4">
    <source src="ma_video.ogg" type="video/ogg">
</video>

Audio

Pour les contenus audio, il existe le tag audio qui a le même comportement que video.

Autre

Il existe d’autres balises qui permettent d’afficher du contenu multimédia telles que object ou embed mais sont soit dépréciées soit utilisées dans des cas très particuliers.

Listes

HTML permet de définir deux types de liste : ordonnées avec ol et non ordonnées avec ul. Pour définir des éléments dans ces listes, il existe la balise li.

Par défaut, les listes ordonnées ol vont afficher un numéro incrémental devant chaque élément alors que les listes non ordonnées ul vont simplement afficher une puce. Ce style peut être modifié via du CSS.

Exemple

    <p>Liste de courses</p>
    <ul>
        <li>Pain</li>
        <li>Beurre</li>
        <li>Jambon</li>
    </ul>
    <p>Classement Fifa</p>
    <ol>
        <li>France</li>
        <li>Espagne</li>
        <li>Brésil</li>
    </ol>

Tableau

Il existe toute une série de balises qui permettent de définir un tableau en HTML. Historiquement, le tableau était très utilisé pour mettre en forme du contenu malgré que ce ne soit pas une collection. Maintenant, on a de nombreuses solutions en CSS pour faciliter la mise en forme et les tableaux ne devraient être utilisés que pour afficher des données tabulaires.

Le tableau se représente par une balise table qui peut contenir directement des tr qui définissent les lignes, ou des balises thead, tbody et tfoot qui permettent de structurer le tableau.

thead et tbody et tfoot peuvent tous les 3 contenir des lignes. Chaque ligne est découpée en cellules avec les balises td (table data) ou th (table header).

Un table peut également contenir une balise caption qui permet d’afficher une description ou une légende.

Exemple complet

<table>
<caption>An awesome table</caption>
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birth date</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Nicolas</td>
        <td>Yodi</td>
        <td>Too long ago</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Snow</td>
        <td>Which one ?</td>
    </tr>
</tbody>
</table>

HTML sémantique

La plupart des balises HTML ont une valeur sémantique et servent à donner un sens à la structuration de votre document. Cela sert à plusieurs choses :

Accessibilité : la sémantique, l’imbrication et la hiérarchie des éléments permettent d’organiser le contenu pour les outils de lecture assistés.
SEO : le référencement se base également beaucoup sur la sémantique pour savoir quelle partie de votre site analyser.
Lisibilité du code : il est plus facile de lire des balises avec une sémantique qu’un enchevêtrement de div et de p qui n’ont aucune signification particulière.

Pour structurer une page, HTML propose plusieurs balises avec des significations sémantiques. Cette signification peut varier en fonction de l’endroit où sont utilisées certaines balises. Voici une liste des balises les plus courantes pour l’organisation du contenu :

header : Définit un en-tête. Peut être utilisé pour toute une page ou pour un article
nav : Indique la navigation principale
main : Définit la partie principale de la page. Doit être unique sur une page
section : Permet de regrouper du contenu sur un même thème
article : Définit un contenu spécifique
aside : Définit un contenu secondaire (souvent dans une barre latérale)
footer : Définit un pied de contenu. Peut également être utilisé pour une page ou pour un article

Il existe d’autres balises qui ont une valeur sémantique, comme em et strong qui servent à mettre en évidence du contenu. Par défaut, la plupart des navigateurs affichent le contenu de em en italique et strong en gras, mais c’est modifiable via du CSS.

Exemple:

  <header>
      <h1>Le Blog du Dev</h1>
      <nav>
          <a href="/articles">Articles</a>
          <a href="/about">À propos</a>
      </nav>
  </header>

  <main>
      <article>
          <h2>Les nouveautés de CSS en 2024</h2>
          <p>Cette année apporte son lot de nouvelles fonctionnalités CSS...</p>

          <section>
              <h3>Container queries</h3>
              <p>Les container queries permettent de styler un élément...</p>
          </section>

          <section>
              <h3>CSS Nesting</h3>
              <p>Le nesting natif est enfin supporté par tous les navigateurs...</p>
          </section>
      </article>

      <aside>
          <h2>Articles récents</h2>
          <ul>
              <li><a href="#">Introduction à Grid CSS</a></li>
              <li><a href="#">Accessibilité web : les bases</a></li>
          </ul>
      </aside>
  </main>

  <footer>
      <p>© 2024 Le Blog du Dev</p>
  </footer>

Exercice : squelette d’une page de recette

Comme exercice, je vous propose de créer le fichier index.html d’une page de liste de recettes avec :

Un <header> contenant un titre et une <nav> avec des liens
Un <main> contenant plusieurs <article> (les cartes de recettes), chacun avec un titre, une image et une courte description
Un <footer> avec le nom du site et l’année

Utilisez tout ce que vous avez vu lors de cette section.

Ne vous préoccupez pas du style pour l’instant — seule la structure compte.

Pour aller plus loin

MDN Web Docs : référence des éléments HTML
Validateur W3C : vérifier la validité de votre HTML