Les bases du HTML

HTML indique la nature des parties d’une page afin que le navigateur puisse en construire la structure. Un titre, un paragraphe et un lien ont des sens différents, même avant l’ajout de toute mise en forme. HTML décrit le contenu ; CSS contrôle son apparence et JavaScript ajoute du comportement.

Lis un élément

Dans <p>The workshop opens at noon.</p>, <p> est la balise ouvrante, la phrase est le contenu et </p> est la balise fermante. L’ensemble est un élément paragraphe. La barre oblique indique la balise fermante. Utilise des noms d’éléments en minuscules pour garder un code source cohérent, même si HTML accepte aussi les noms en majuscules.

Un attribut ajoute une information dans une balise ouvrante :

<a href="hours.html" title="Workshop opening hours">Opening hours</a>

Ici, href fournit la destination et title un texte informatif. Sépare les attributs par des espaces et place leurs valeurs entre guillemets droits. Leur ordre ne change pas leur sens. Les guillemets maintiennent une valeur ensemble : class="intro note" donne deux noms de classes, tandis que class=intro note est lu comme une valeur de classe et un attribut distinct nommé note.

Place des éléments les uns dans les autres

Un paragraphe peut contenir un mot d’importance forte :

<p>Bring your <strong>booking number</strong>.</p>

Ouvre le paragraphe, ouvre l’élément strong, ferme l’élément strong, puis ferme le paragraphe. Ferme d’abord le dernier élément ouvert. Le paragraphe est le parent et l’élément strong est son enfant. Les enfants et tout ce qu’ils contiennent sont des descendants. Le navigateur organise ces relations dans le DOM, ou modèle objet de document, un arbre du contenu de la page.

Tous les éléments ne peuvent pas être placés dans n’importe quel autre élément. Par exemple, une liste ne peut pas se trouver dans un paragraphe. L’indentation aide à voir l’imbrication, mais ajouter des espaces ne peut pas rendre valide une relation parent-enfant invalide.

Reconnais les types particuliers d’éléments et d’attributs

Les éléments vides n’ont ni contenu ni balise fermante. Par exemple : <img>, <br>, <hr>, <meta> et <link>. Écris <br>, sans </br>. Une barre oblique finale dans <br /> n’a aucun effet en HTML.

Un attribut booléen est activé lorsqu’il est présent. Pour une liste ordonnée, reversed inverse la numérotation. Écrire reversed="false" laisse l’attribut présent : la numérotation reste donc inversée. Supprime l’attribut pour la désactiver.

Certains attributs fonctionnent sur différents éléments :

Lis les espaces et les commentaires du code source

Dans le texte ordinaire, plusieurs espaces, tabulations ou sauts de ligne du code source sont regroupés en un seul espace. Écrire un paragraphe sur trois lignes de code source donne toujours un seul paragraphe à l’écran. Utilise les éléments pour exprimer la structure et l’indentation du code source pour la rendre lisible.

Un commentaire ressemble à <!-- Menu starts here -->. Il est masqué sur la page affichée, mais visible dans le code source. Ne mets jamais de mots de passe ou d’informations privées dans les commentaires. Les commentaires ne peuvent pas être imbriqués : le premier --> termine le commentaire.

Une page complète sépare les informations sur le document du contenu que les personnes lisent. Commence par une petite structure de base cohérente, puis ajoute le titre et le contenu propres à la page.

Construis la structure de base

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours – Harbor Café</title>
  </head>
  <body>
    <h1>Harbor Café</h1>
    <p>Open every day except Monday.</p>
  </body>
</html>

<!DOCTYPE html> indique au navigateur d’utiliser le mode standard, avec ses règles de rendu modernes habituelles. C’est une déclaration, pas un élément. Son omission peut déclencher le mode de compatibilité, qui imite le comportement des anciens navigateurs et peut modifier la mise en page et les dimensions.

<html> est l’élément racine. Ses deux éléments enfants sont <head> et <body>. L’en-tête du document contient les métadonnées, des informations sur la page. Le corps contient le contenu visible. Un <h1> doit se trouver dans le corps, même si le navigateur semble corriger l’erreur lorsque tu le places dans l’en-tête.

Donne son identité à la page

Le <title> apparaît dans l’onglet du navigateur, les favoris et l’historique. Les moteurs de recherche peuvent aussi l’utiliser comme titre d’un résultat. Donne à chaque page ordinaire exactement un titre, dans l’en-tête. Place d’abord le sujet précis, puis le nom du site, par exemple « Horaires d’ouverture - Café du Port ». Le <h1> visible et le titre du document sont deux éléments distincts aux rôles différents.

Place <meta charset="utf-8"> en premier dans l’en-tête. La déclaration entière doit se trouver dans les 1 024 premiers octets du fichier. Une déclaration placée tôt permet au navigateur de savoir comment décoder le texte avant d’avoir lu une grande partie de la page.

La ligne de la zone d’affichage demande aux navigateurs mobiles d’utiliser la largeur de l’appareil pour la mise en page et un zoom initial de 1. Sans elle, beaucoup utilisent une large zone d’affichage virtuelle d’ordinateur et réduisent le résultat, ce qui rend le texte petit. Cette ligne prépare le document à une mise en page mobile ; les styles de la page déterminent toujours comment son contenu s’adapte.

Relie les autres ressources de la page

Parmi les ajouts courants à l’en-tête :

<meta name="description" content="Fresh bread, coffee and lunch by the harbor.">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>

La description résume la page et peut apparaître dans les résultats de recherche. L’icône fournit l’image de l’onglet. Le lien vers la feuille de style relie un fichier CSS. L’élément script relie du JavaScript ; defer retarde son exécution jusqu’à ce que le document ait été analysé. Contrairement à <link> et <meta>, <script> a besoin d’une balise fermante, même lorsque son contenu est vide.

Enregistre un fichier de page web

Enregistre du texte brut dans un éditeur de code avec une extension .html. Un traitement de texte peut ajouter une mise en forme qui n’a pas sa place dans un fichier source HTML. La page par défaut d’un dossier est par convention index.html ; la plupart des serveurs web l’envoient lorsque quelqu’un demande l’adresse du dossier.

Choisis des noms en minuscules avec des traits d’union, comme opening-hours.html. Les espaces deviennent %20 dans les URL et de nombreux serveurs distinguent les majuscules des minuscules. Vérifie que l’éditeur n’a pas enregistré ta page sous le nom index.html.txt. Après l’enregistrement, ouvre le fichier HTML dans le navigateur et actualise la page lorsque tu apportes une modification.

La langue d’un texte et la façon dont ses caractères sont stockés répondent à des questions différentes. Un navigateur a besoin des deux pour présenter correctement la page, surtout lorsque le contenu comprend des accents ou plusieurs systèmes d’écriture.

Indique la langue du contenu

Écris la langue principale sur l’élément racine : <html lang="en">. Les lecteurs d’écran peuvent choisir la prononciation à partir de cette information, et les navigateurs peuvent l’utiliser pour la traduction et l’orthographe. Une étiquette de langue commence par un code de langue. Une seconde partie facultative peut indiquer une région ou une écriture.

L’étiquette décrit le contenu, pas le lieu où se trouve le visiteur. uk désigne l’ukrainien : ce n’est donc pas l’étiquette de l’anglais au Royaume-Uni.

Signale un changement de langue sur l’élément approprié le plus proche :

<p>Our host said <span lang="fr">bon appétit</span>.</p>

Seule l’expression française reçoit une prononciation française. Pour une citation entière, la langue peut être indiquée sur son <blockquote>. Une page de droite à gauche a aussi besoin de sa direction de base du texte, par exemple <html lang="ar" dir="rtl">. Les lettres arabes se lisent toujours de droite à gauche sans cet attribut, mais la direction de base influe sur l’alignement des paragraphes, la ponctuation et le texte qui mélange les directions.

Fais correspondre les octets enregistrés et la déclaration

Un encodage des caractères associe les caractères aux octets stockés. UTF-8 peut représenter tous les caractères Unicode, notamment les lettres accentuées, les autres écritures et les émojis. Les documents HTML utilisent UTF-8.

Il y a deux étapes : enregistrer le fichier lui-même en UTF-8 dans l’éditeur et déclarer <meta charset="utf-8"> tôt dans l’en-tête. La déclaration indique au navigateur comment lire les octets ; elle ne convertit pas un fichier enregistré dans un autre encodage. La déclaration d’encodage d’un serveur dans son champ d’en-tête Content-Type prévaut sur l’élément meta.

Une incompatibilité d’encodage laisse souvent un indice. Le texte UTF-8 « Café » lu en Windows-1252 peut devenir « Café » parce que les deux octets de « é » sont interprétés séparément. Un fichier Windows-1252 lu en UTF-8 peut afficher à la place « Caf� » parce que l’octet est invalide en UTF-8. Vérifie l’encodage de l’éditeur et les informations sur le document reçu par le navigateur avant de remplacer des lettres une par une.

Affiche les caractères que HTML utilise dans sa syntaxe

Pour afficher littéralement un texte qui ressemble à une balise, écris des références de caractères :

<p>Use &lt;p&gt; for paragraphs.</p>

La page affiche « Use

for paragraphs. ». Le < doit être représenté par < afin que le navigateur ne commence pas une balise. Chaque référence nommée commence par & et se termine par ;.

Par exemple, 10 km garde le nombre et l’unité sur la même ligne. Les caractères accentués ordinaires peuvent être saisis directement dans un fichier UTF-8 ; tu n’as pas besoin d’une référence distincte pour chaque accent.

Un navigateur essaie d’afficher une page même lorsque son HTML est incorrect. Cette récupération utile peut masquer des erreurs : vérifier une page consiste donc à examiner à la fois le code source que tu as écrit et la structure construite par le navigateur.

Compare le code source au DOM

La commande Afficher le code source de la page montre le HTML reçu par le navigateur. Le panneau Éléments ou Inspecteur des outils de développement montre le DOM, l’arbre analysé que le navigateur utilise. Le navigateur peut avoir fermé un élément trop tôt ou déplacé du contenu pendant l’analyse syntaxique.

Ouvre l’inspecteur en faisant un clic droit sur la page et en choisissant Inspecter, ou utilise le raccourci des outils de développement de ton navigateur. Sélectionne un élément affiché et examine son parent et ses enfants. Retrouve ensuite la même zone dans le code source. Les différences peuvent expliquer des espacements inattendus, des liens qui s’étendent trop loin ou des styles appliqués aux mauvais éléments.

Suis une réparation automatique

Supposons que tu écrives :

<p>Our soups:
  <ul>
    <li>Tomato</li>
    <li>Lentil</li>
  </ul>
</p>

Un paragraphe accepte du contenu textuel, pas une liste. En arrivant à <ul>, le navigateur ferme le paragraphe. La liste devient un bloc distinct. Le </p> final n’a aucun paragraphe ouvert à fermer : l’analyse syntaxique peut donc créer un paragraphe vide supplémentaire.

La correction souhaitée doit être faite dans le code source :

<p>Our soups:</p>
<ul>
  <li>Tomato</li>
  <li>Lentil</li>
</ul>

Déplace la balise fermante du paragraphe avant la liste. Le DOM peut maintenant exprimer la relation voulue sans récupération après erreur.

Utilise un vérificateur HTML

Le Nu Html Checker du W3C accepte l’adresse d’une page, un fichier importé ou du HTML collé. Il signale les erreurs et les avertissements en indiquant leur emplacement. Commence par la première erreur, corrige-la, puis relance le vérificateur. Un seul guillemet manquant peut provoquer de nombreux messages ultérieurs : modifier toutes les lignes signalées d’un coup peut donc te faire perdre du temps.

Par exemple, il manque le guillemet fermant dans <a href="about.html>. Le navigateur peut traiter le balisage suivant comme une partie de la valeur de l’attribut. Corriger le guillemet peut faire disparaître plusieurs erreurs ultérieures. De même, un </a> manquant peut inclure dans le lien du texte sans rapport avec celui-ci.

Cherche en particulier :

• Des éléments fermés dans le mauvais ordre ou des noms mal orthographiés comme <pargraph>.
• Le même id utilisé deux fois sur une page.
• Un <li> en dehors de sa liste.
• Une image sans attribut alt.
• Du contenu visible placé dans l’en-tête.

Vérifie le sens ainsi que la syntaxe

Un résultat sans erreur au vérificateur t’indique que le balisage testé respecte ses règles. Il ne peut pas décider si « Clique ici » est un intitulé de lien utile ou si l’alternative textuelle d’une image donne la bonne information. Lis la page dans l’ordre et vérifie toi-même ces choix.

Avant de terminer une page, vérifie la déclaration de type de document, la langue du document, la déclaration UTF-8 placée tôt et le titre propre à la page. Examine les niveaux de titres, les identifiants uniques, les alternatives textuelles des images et les destinations des liens. Ouvre la page dans au moins deux navigateurs et suis ses liens. Un chemin relatif valide peut tout de même pointer vers un fichier manquant, ce qu’une simple vérification de syntaxe ne détectera pas.

Les titres donnent aux lecteurs une carte de la page. Les paragraphes contiennent des phrases liées entre elles dans cette structure. Choisis leurs éléments selon la structure du contenu, puis laisse CSS définir leur apparence.

Construis un plan de titres

HTML possède six niveaux de titres, de <h1> à <h6>. Utilise un seul <h1> pour le sujet principal de la page, <h2> pour ses sections principales et <h3> pour les parties d’une section <h2>. La plupart des pages n’ont besoin que de quelques niveaux.

<h1>Growing Basil at Home</h1>
<p>Basil grows well on a sunny windowsill.</p>
<h2>Planting</h2>
<p>Sow the seeds 0.5 cm deep in moist soil.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Water when the top of the soil feels dry.</p>
<h3>Harvesting</h3>
<p>Pick the top leaves first.</p>

Lis uniquement les titres. « Planting » et « Care » sont deux sections principales de même niveau. « Watering » et « Harvesting » dépendent de « Care ». Ce plan reste utile lorsqu’un lecteur d’écran répertorie les titres ou lorsqu’une personne parcourt rapidement la page.

Un titre ne peut descendre que d’un niveau par rapport au titre précédent : après <h1>, utilise <h2>, pas <h3>. En remontant, il est possible de sauter plusieurs niveaux. Un <h2> après un <h4> commence une nouvelle section principale. Les niveaux de titres suivent l’ensemble du document, y compris le contenu des sections et des articles.

La norme HTML autorise plusieurs titres de premier niveau, mais un seul <h1> principal est la structure courante et claire. Ne choisis pas <h4> uniquement parce que son texte par défaut est plus petit. Un paragraphe en gras peut ressembler à un titre, mais il n’apparaîtra pas dans la liste des titres d’un lecteur d’écran.

Distingue un sous-titre d’une section

Une accroche décrit le titre qui l’accompagne ; elle n’introduit pas une nouvelle section. Regroupe un titre et un sous-titre dans <hgroup> :

<hgroup>
  <h1>Harbor Café</h1>
  <p>Fresh bread every morning</p>
</hgroup>

Le paragraphe reste un sous-titre. En faire un <h2> le placerait à tort dans le plan de la page comme section principale.

Utilise des paragraphes pour les phrases liées

Un élément <p> contient un paragraphe. Commence un nouveau paragraphe lorsque le sujet ou l’étape de l’explication change. Les navigateurs ajoutent par défaut un espace visible autour des paragraphes.

Appuyer sur Entrée dans le code source HTML ordinaire ne crée pas de nouveau paragraphe affiché. De même, les éléments <p> vides ne sont pas un outil d’espacement. Garde une structure qui a un sens et règle les espaces supplémentaires avec CSS.

Choisis une rupture selon son sens

Pour une adresse, <p>Harbor Café<br>12 Quay Street<br>Port Town</p> garde les lignes ensemble dans un seul paragraphe. Des éléments <br> répétés entre des paragraphes ordinaires confondent structure du contenu et espacement. Une ligne horizontale tracée par <hr> exprime un changement de sujet ; choisis cet élément pour ce sens, pas simplement pour décorer la page.

Les éléments textuels indiquent au navigateur le sens d’un mot ou d’un passage. Leur apparence par défaut en gras, en italique ou en retrait n’est qu’un style de départ. Choisis d’abord le sens.

Distingue l’emphase, l’importance et l’attention

Déplacer l’emphase dans « J’ai bien fermé la porte à clé » change ce que la personne cherche à corriger. L’importance forte a un autre rôle : un avertissement compte quelle que soit la façon dont la phrase est prononcée. Utilise CSS lorsque tu veux seulement un style visuel.

Balise les citations et leurs sources

Une citation longue utilise <blockquote>. Son attribut facultatif cite donne une URL source, mais cette adresse ne s’affiche pas automatiquement. Place une attribution visible en dehors de la citation :

<blockquote cite="https://example.com/interview">
  <p>The garden is open to everyone.</p>
</blockquote>
<p>From <cite>A Conversation About the Garden</cite>.</p>

<cite> marque le titre d’une œuvre, pas le nom d’une personne. Une courte citation dans une phrase utilise <q>, et le navigateur fournit les guillemets. Ne saisis pas une seconde paire autour des mêmes mots.

Une abréviation peut utiliser <abbr title="World Health Organization">WHO</abbr>. Écris aussi sa forme complète de manière visible lors de sa première apparition. Une infobulle seule est difficile d’accès sur un écran tactile et ne constitue pas une explication fiable pour tous les lecteurs.

Affiche du code et conserve ses espacements

<code> indique un court extrait de code dans une phrase. Pour un bloc dont les espaces et les sauts de ligne comptent, combine-le avec <pre> :

<pre><code>&lt;p&gt;Welcome.&lt;/p&gt;</code></pre>

Le lecteur voit le balisage littéral du paragraphe. <pre> conserve la mise en forme, mais ne désactive pas l’analyse syntaxique HTML. Tu dois toujours représenter < par < et une esperluette par & lorsqu’ils doivent apparaître comme du texte. Sinon, un exemple de code peut être interprété comme du véritable balisage de page.

Balise les dates, les notations et d’autres éléments utiles

<sub> et <sup> expriment l’indice et l’exposant lorsque la notation l’exige : H<sub>2</sub>O et m<sup>2</sup>. Ce ne sont pas des outils pour réduire la taille d’un texte sans rapport avec ces usages.

<time> relie un texte de date ou d’heure lisible à une valeur lisible par machine :

<time datetime="2026-03-14">March 14, 2026</time>

La valeur de datetime utilise le format année-mois-jour. Une heure peut utiliser la valeur sur 24 heures 14:30, même si le texte visible indique « 14 h 30 ».

Utilise <mark> pour un texte mis en évidence parce qu’il est pertinent dans le contexte actuel, comme une correspondance de recherche. <small> contient des remarques accessoires ou des mentions en petits caractères. Un <span> n’a pas de sens propre ; il est utile pour un attribut de langue ou comme point d’accroche pour la mise en forme dans une ligne.

Une véritable liste donne une structure commune à des éléments liés entre eux. Son balisage permet aux lecteurs d’entendre qu’ils entrent dans une liste et combien elle contient d’éléments. Le type de liste dépend du sens des éléments.

Choisis le type de liste

Utilise <ul> pour les éléments dont l’ordre ne change pas le sens, comme des ingrédients. Utilise <ol> pour une suite ou un classement dont l’ordre compte. Les deux contiennent des éléments de liste balisés avec <li>.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 10 minutes.</li>
</ol>

Inverser ces étapes changerait les instructions : une liste ordonnée convient donc. Un navigateur affiche normalement des numéros pour <ol> et des puces pour <ul>. CSS peut modifier ces marqueurs ; le sens de la liste reste le même.

Ne simule pas une liste avec des tirets et des sauts de ligne saisis au clavier. Ces caractères peuvent donner une apparence similaire, mais ils n’indiquent pas à un lecteur d’écran que les éléments forment une liste. Un menu de navigation utilise souvent une liste non ordonnée, tandis qu’un fil d’Ariane utilise une liste ordonnée parce que son chemin suit une suite d’étapes.

Imbrique une liste dans son élément

Dans le contenu ordinaire d’une liste, les éléments enfants directs de <ul> et <ol> sont des éléments <li>. Ne place pas un paragraphe ou une autre liste directement entre eux. La norme autorise aussi les éléments servant aux scripts, mais ils ne remplacent pas les éléments de liste.

Une liste imbriquée se place dans l’élément qu’elle décrit :

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Ouvre d’abord l’élément « Fruit ». Ajoute sa liste imbriquée, ferme cette liste, puis ferme l’élément « Fruit ». Les éléments « Apples » et « Pears » sont maintenant rattachés structurellement à « Fruit ». Placer le <ul> intérieur après le </li> du parent ferait perdre cette relation. Un <li> peut aussi contenir des paragraphes, des liens et des images.

Règle une numérotation qui a un sens

Une liste ordonnée peut poursuivre ou inverser un décompte :

reversed est booléen. Il reste activé dans reversed="false" ; supprime-le pour reprendre le décompte dans l’ordre croissant. Avec type, les valeurs 1, a, A, i et I sélectionnent des formes courantes de numérotation. Utilise une forme de marqueur qui a un sens lorsqu’un texte ailleurs renvoie à une désignation précise, comme la clause « b ».

Associe des termes et des descriptions

Une liste de descriptions utilise <dl>, avec <dt> pour un terme ou un nom et <dd> pour sa description ou sa valeur :

<dl>
  <dt>Opening time</dt>
  <dd>08:30</dd>
  <dt>Closing time</dt>
  <dd>17:00</dd>
</dl>

Un terme peut avoir plusieurs descriptions et plusieurs termes peuvent partager une description. Un groupe peut être entouré d’un <div>. Utilise cette structure pour les relations entre noms et valeurs, comme dans un glossaire ou les caractéristiques d’un produit, plutôt que de faire entrer ces paires de force dans des éléments à puces sans rapport entre eux.

Un lien relie un contenu à une destination. Le navigateur détermine cette destination à partir de l’adresse que tu places dans href : choisir le bon type d’URL fait donc partie de la création du lien.

Écris une ancre

<a href="https://www.w3.org/">World Wide Web Consortium</a>

L’élément <a> est une ancre. Son href est la destination et son contenu est l’intitulé cliquable du lien. Une ancre sans href est un emplacement réservé, pas un lien hypertexte fonctionnel. Une image peut aussi constituer son contenu.

Une URL absolue fournit un schéma d’URL et un domaine, comme dans https://example.com/guide/. Utilise-la pour créer un lien vers un autre site web. Il manque un schéma à href="www.example.com" : le navigateur le traite donc comme un chemin de fichier relatif ; cela ne signifie pas « ouvrir ce site web ».

Pars du dossier courant

Une URL relative part de l’emplacement de la page courante. Prenons ce site :

site/
  index.html
  about.html
  recipes/
    index.html
    soup.html
  images/
    logo.png

Depuis la page d’accueil, about.html mène à la page de présentation voisine et recipes/soup.html entre dans le dossier des recettes. Depuis recipes/soup.html, le même about.html chercherait dans recipes/, où aucun fichier de ce nom ne se trouve.

Suis le chemin de recipes/soup.html jusqu’au logo :

1. Le dossier de départ est recipes/.
2. ../ remonte au dossier du site.
3. images/ entre dans le dossier des images.
4. logo.png désigne le fichier.

Le chemin complet est ../images/logo.png. Chaque ../ supplémentaire remonte d’un dossier de plus. En revanche, index.html depuis la page de la soupe mène à l’index des recettes, pas à la page d’accueil du site.

Une URL relative à la racine commence par /, comme /about.html. Sur un serveur web, elle part de la racine du site, quel que soit le dossier de la page courante. Lorsque les fichiers sont ouverts directement depuis le disque, cette barre oblique désigne la racine du système de fichiers : elle ne désigne donc pas le dossier du site de ton projet. Utilise des chemins relatifs ordinaires pour les pages que tu testes aussi directement depuis le disque.

Les chemins utilisent des barres obliques et doivent respecter les noms des fichiers et leur casse. De nombreux serveurs considèrent Soup.html et soup.html comme des fichiers différents. Un lien vers un dossier tel que recipes/ demande normalement à un serveur son fichier par défaut, généralement index.html ; une navigation directe depuis le disque peut afficher la liste du contenu du dossier.

Accède à une partie d’une page

<a href="#watering">Watering</a>
<h2 id="watering">Watering</h2>

Le fragment commence par # dans l’URL. L’id de la cible ne contient pas de # et doit correspondre exactement. Pour une autre page, combine les deux : basil.html#watering. Un fragment vide # mène en haut de la page. #top mène aussi en haut lorsqu’aucun élément correspondant n’est trouvé.

Ouvre une destination de courrier électronique ou de téléphone

mailto:info@example.com demande à l’application de messagerie du visiteur de rédiger un message. Un objet peut être ajouté sous la forme mailto:info@example.com?subject=Table%20booking, l’espace étant encodé en %20. tel:+15555550123 fournit une destination téléphonique au format international. Le numéro de téléphone visible peut contenir des espaces, même si ce href n’en contient pas.

Un lien utile indique à une personne ce qui l’attend avant qu’elle ne le suive. Son intitulé, sa destination et son mode d’ouverture fonctionnent ensemble, y compris lorsque le lien est lu seul dans la liste des liens d’un lecteur d’écran.

Nomme la destination

Compare ces liens :

Garde les intitulés de liens courts mais précis. Si deux liens ont le même intitulé, fais-les mener à la même destination. Une URL seule est généralement plus difficile à lire qu’une description, même si une adresse électronique est un intitulé utile lorsque l’adresse elle-même est l’information.

Une infobulle title ne peut pas corriger un intitulé visible peu clair. Les utilisateurs d’écrans tactiles peuvent ne jamais voir l’infobulle et son accès au clavier n’est pas fiable. Place les informations importantes sur la destination dans le contenu même du lien.

Signale les fichiers et les téléchargements

<a href="menu.pdf" download="harbor-cafe-menu.pdf">Lunch menu (PDF, 2 MB)</a>

Le texte indique le type et la taille du fichier. L’attribut download demande au navigateur d’enregistrer le fichier et suggère un nom de fichier. Il ne convertit pas une page en PDF. Pour les liens ordinaires vers des fichiers web, la destination doit être de la même origine pour que download s’applique ; les URL spéciales blob: et data: sont aussi prises en charge. Les réglages du navigateur et les champs d’en-tête du serveur peuvent influer sur le comportement final : l’attribut est donc une demande, pas la promesse d’une boîte de dialogue précise.

Laisse les personnes contrôler les nouveaux onglets

Les liens ordinaires s’ouvrent dans le contexte de navigation courant, où le bouton Retour permet de revenir à la page précédente. target="_blank" demande un nouvel onglet ou une nouvelle fenêtre. Le nouvel onglet ne possède pas l’historique du bouton Retour de l’onglet d’origine et un visiteur peut ne pas remarquer le changement.

Utilise un nouvel onglet uniquement lorsqu’il répond à un objectif clair et annonce-le dans le texte :

<a href="https://example.com/archive" target="_blank" rel="noopener">Archive (opens in a new tab)</a>

Les navigateurs modernes donnent aux liens _blank la protection de noopener : la page ouverte ne peut pas utiliser window.opener pour contrôler la page d’origine. Écrire explicitement rel="noopener" couvre aussi le comportement des anciens navigateurs. noreferrer supprime en plus les informations de référent. nofollow indique une relation destinée aux moteurs de recherche, pas une destination de navigation.

Rends compréhensibles les liens contenant une image ou un contenu plus grand

Lorsqu’une image est le seul contenu d’un lien, son alternative textuelle fournit le nom du lien :

<a href="index.html">
  <img src="logo.png" alt="Harbor Café home page">
</a>

L’information utile est la destination du lien. Décrire uniquement les couleurs du logo ne nommerait pas cette destination.

Une ancre peut entourer une carte plus grande contenant un titre et un paragraphe, mais elle ne peut pas contenir un autre lien ou un bouton. Des contrôles interactifs imbriqués donnent des destinations ou des actions concurrentes dans un même contrôle.

Un lien mène quelque part : une page, un fichier ou une section de page. Un bouton effectue une action, comme ouvrir un menu. href="#" est un lien vers le haut de la page ; il ne remplace pas un bouton qui effectue une action.

La navigation aide les personnes à trouver la page du site qu’elles souhaitent consulter et la partie d’une longue page dont elles ont besoin. HTML peut identifier ces groupes afin que les personnes utilisant des technologies d’assistance puissent les trouver directement.

Donne une région à la navigation principale

Utilise <nav> autour d’un groupe important de liens de navigation. Un menu de site contient généralement une liste non ordonnée :

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html" aria-current="page">Menu</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Ce balisage appartient à la page du menu : aria-current="page" indique le lien vers la page actuellement affichée. Sur la page Contact, déplace cet attribut vers le lien Contact. Ne marque pas l’index d’une section comme page courante lorsque le lecteur consulte une autre page de cette section.

La liste rend le nombre et le regroupement des liens accessibles aux lecteurs d’écran. Sans CSS, les éléments du menu s’empilent verticalement. L’élément <nav> ne les dispose pas automatiquement en ligne. Quelques liens sans rapport entre eux dans le pied de page n’ont généralement pas besoin de leur propre région de navigation.

Garde des menus cohérents entre les pages

Utilise les mêmes éléments dans le même ordre et au même endroit sur tout le site. Dans un site HTML statique, copier le menu implique de mettre à jour chaque copie lorsque son contenu change.

Vérifie les destinations depuis le dossier réel de chaque page. Depuis recipes/soup.html, le lien vers l’accueil est ../index.html ; index.html mènerait à l’index des recettes. Les intitulés du menu peuvent rester les mêmes tandis que les chemins relatifs changent. Un site hébergé sur un serveur peut utiliser des chemins relatifs à la racine pour éviter cette dépendance au dossier.

Crée une table des matières

Une table des matières contient des liens vers les titres de la page courante :

<nav aria-label="Contents">
  <ol>
    <li><a href="#planting">Planting</a></li>
    <li><a href="#care">Care</a></li>
  </ol>
</nav>
<h2 id="planting">Planting</h2>

Chaque fragment doit correspondre à un identifiant unique. Ajoute un titre correspondant avec id="care" pour le second lien. Lorsque plusieurs régions de navigation ont des rôles différents, des noms comme « Main » et « Contents » permettent aux utilisateurs de lecteurs d’écran de les distinguer.

Un fil d’Ariane est un autre type de navigation. Il montre un chemin comme « Accueil › Recettes › Soupe à la tomate ». Utilise <nav aria-label="Breadcrumb"> avec une liste ordonnée et place la page courante en dernier. L’ordre exprime le chemin dans le site.

Fournis un raccourci pour passer le contenu répété

Place un lien d’évitement en premier dans le corps :

<a href="#main-content">Skip to main content</a>

Sa cible est la région principale, écrite sous la forme <main id="main-content">. Les utilisateurs du clavier peuvent suivre ce lien pour passer un menu répété. Garde un identifiant de cible unique, écrit exactement comme dans le fragment. Un lien d’évitement est une aide à la navigation fonctionnelle avant même que CSS n’en modifie la présentation.

Une image en HTML reste une ressource distincte. La page indique au navigateur quel fichier récupérer, combien d’espace réserver et quel texte peut remplacer l’image.

Ajoute une image

<img src="images/harbor.jpg" alt="Fishing boats moored in the harbor at sunset" width="1200" height="800">

<img> est un élément vide : il n’a donc pas de balise fermante. src donne l’adresse d’un fichier, avec les mêmes règles de chemin que pour les liens. alt fournit une alternative textuelle. Si l’image n’apparaît pas, vérifie le dossier, la casse et l’extension du fichier dans src. Un chemin en .jpg ne désigne pas un fichier .png, et .JPG peut être différent de .jpg sur un serveur.

Les octets de l’image ne sont pas stockés dans cet élément HTML. Le navigateur télécharge le fichier séparément. Modifier la largeur dans le HTML ne réduit pas la taille du fichier téléchargé.

Choisis un format adapté au contenu

Les principaux navigateurs actuels prennent en charge WebP et AVIF. Choisis une image selon son contenu et la taille du fichier obtenu, pas seulement selon son extension. La compression avec perte supprime certains détails pour gagner de la place ; la compression sans perte conserve les données d’origine de l’image.

Réserve les bonnes proportions

Les attributs width et height sont des nombres entiers en pixels CSS, sans unité dans la valeur. Écris width="1200", et non width="1200px". Ils permettent au navigateur de réserver de l’espace avant l’arrivée du fichier, ce qui réduit les décalages de mise en page, lorsque le texte saute pendant le chargement d’une image.

Une image de 1 200 × 800 a un rapport de 3 à 2. width="1200" height="800" et width="600" height="400" le préservent tous deux. La seconde paire divise les deux dimensions par deux. Une paire de 600 × 600 impose un carré et déforme l’image. CSS peut ensuite régler les dimensions affichées tout en conservant le rapport.

Réduis le fichier avant de l’utiliser

Une photo de téléphone de 4 000 × 3 000 contient 12 millions de pixels et peut occuper plusieurs mégaoctets. Redimensionne-la près de sa plus grande taille d’affichage prévue et choisis une compression raisonnable avant de l’ajouter au site. Sinon, chaque lecteur télécharge le grand fichier même lorsque la page affiche une minuscule vignette.

Pour les images plus bas dans une longue page, loading="lazy" permet au navigateur d’attendre que le visiteur s’en approche. Laisse une bannière ou une image principale immédiatement visible en chargement normal, car différer son chargement peut ralentir le premier affichage de la page.

Utilise des images qui t’appartiennent, que tu as l’autorisation d’utiliser ou que leur licence permet de réutiliser, en ajoutant tout crédit requis. Garde les images du site dans ton propre dossier de site pour qu’une modification des fichiers d’un autre site ne rompe pas les liens. Les images de contenu appartiennent au HTML ; les textures d’arrière-plan purement décoratives sont généralement gérées par CSS.

L’alternative textuelle fournit l’information dont une personne a besoin lorsqu’elle ne peut pas voir une image. Une légende fournit un contexte visible pour tous. Pour choisir les deux, pars de la fonction de l’image sur cette page précise.

Décris l’information utile

Pour une photo qui aide les lecteurs à comprendre un lieu, décris ce qui compte : alt="The café's terrace with six tables overlooking the harbor". Un long inventaire de chaque objet est rarement utile. Tu n’as généralement pas besoin de dire « Image de », car les lecteurs d’écran annoncent déjà le rôle d’image. Le type de représentation peut toutefois compter, comme dans « Aquarelle représentant le port ».

Le contexte change l’alternative utile. Sur une page d’adoption, les détails importants peuvent permettre d’identifier un chien. Sur la page destinée aux visiteurs d’un parc, la même photo peut indiquer que les chiens sont les bienvenus sur la pelouse. Demande-toi quelle information un lecteur perdrait si l’image disparaissait.

Pour un graphique, donne son message principal et place les données détaillées à proximité. Par exemple, l’alternative textuelle peut indiquer que les visites du site sont passées de 1 200 en janvier à 3 000 en mars. Le texte autour peut fournir les chiffres complets. Un panneau photographié ou une autre image de texte doit reprendre les mots pertinents dans son alternative.

Distingue les images informatives, décoratives et fonctionnelles

Une valeur alt vide est une instruction délibérée qui demande d’ignorer une image décorative. Omettre l’attribut est différent : certains lecteurs d’écran peuvent alors annoncer le nom du fichier. Utilise un attribut alt sur chaque image que tu crées.

Un logo qui constitue le seul contenu d’un lien vers l’accueil a besoin d’un nom de lien utile, comme « Page d’accueil du Café du Port ». Le lecteur doit connaître la destination, et pas seulement savoir que le logo contient des vagues bleues. title ne le remplace pas : son infobulle n’est pas accessible de manière fiable aux utilisateurs du clavier, d’un écran tactile ou d’un lecteur d’écran.

Ajoute une légende avec figure

<figure>
  <img src="images/old-harbor.jpg" alt="Sailing ships crowded along a stone quay" width="1000" height="667">
  <figcaption>The harbor around 1900. Photo: Port Town Archive.</figcaption>
</figure>

<figure> regroupe un contenu autonome et sa légende visible facultative. <figcaption> est le premier ou le dernier enfant de la figure, avec au maximum une légende par figure. Une figure peut contenir plusieurs images, un exemple de code, une citation ou un diagramme ; elle ne se limite pas aux photographies.

Dans cet exemple, l’alternative textuelle remplace ce que montre la photographie. La légende fournit la date et le crédit. Copier toute la légende dans l’alternative textuelle ferait répéter ce texte par un lecteur d’écran sans expliquer l’image. Une légende qui dit seulement « Figure 1 » ne remplace pas non plus une description de l’image.

Une page contient des régions aux rôles différents : une introduction, une navigation, son contenu propre et des informations complémentaires. Les éléments sémantiques nomment ces rôles afin que la structure soit utile au-delà de sa mise en page visuelle.

Nomme chaque région

Un en-tête de site contient souvent un logo et un menu. Un en-tête d’article peut quant à lui contenir son titre, son auteur et sa date. Un pied de page peut inclure des coordonnées, des liens associés ou une mention de droits d’auteur. Ces éléments indiquent des rôles, pas un ensemble fixe de mots.

Distingue le contenu principal

Une page ordinaire utilise un seul <main> visible. Son contenu est propre à la page : la navigation du site qui se répète se place donc en dehors. Ne place pas main dans un article, section, aside, header, footer ou nav. Un article de recette peut se placer dans main, mais pas l’inverse.

Un aside accueille un contenu complémentaire qui n’est lié qu’indirectement au contenu voisin. Un ensemble de liens vers des recettes associées peut constituer un aside ; une étape essentielle de la recette ne le peut pas. Le nom « aside » ne place pas le contenu dans une colonne latérale. Sans CSS, ces régions s’empilent normalement dans l’ordre du code source.

<body>
  <header>
    <p>Harbor Café</p>
    <nav>...</nav>
  </header>
  <main>
    <h1>Our Menu</h1>
    <p>Everything is baked fresh each morning.</p>
  </main>
  <aside>
    <h2>Today's special</h2>
    <p>Tomato soup with fresh bread.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Harbor Café</p>
  </footer>
</body>

Le contenu propre à la page du menu se trouve dans main. Les informations du site qui l’entourent restent à l’extérieur. Le code source se lit de manière cohérente de haut en bas avant l’ajout de colonnes, de couleurs ou de positionnement.

Comprends les régions repères

Une région repère est une région qu’une technologie d’assistance peut présenter comme destination de navigation. Main et nav fournissent des régions repères. Un en-tête au niveau de la page fournit la région repère de bannière, et un pied de page au niveau de la page fournit la région repère d’information sur le contenu. Un en-tête ou un pied de page imbriqué dans un article, aside, main, nav ou section ne fournit pas ces régions repères de page.

Un aside a normalement un rôle complémentaire. Un aside imbriqué peut conserver ce rôle ; son imbrication dans un article ne supprime pas à elle seule ce sens. Utilise-le uniquement pour un contenu complémentaire approprié et garde les régions de la page compréhensibles.

<search> indique une région contenant des contrôles de recherche ou de filtrage et des résultats. Il crée une région repère de recherche et est pris en charge par les principaux navigateurs actuels. Il est distinct de nav : rechercher du contenu et choisir un lien de navigation connu sont des tâches différentes.

Un header ne peut contenir ni header ni footer, et un footer ne peut contenir ni l’un ni l’autre. Distingue les régions de page des en-têtes et pieds de page qui appartiennent à des articles individuels. Choisir les bons noms fournit une structure utile même lorsque toutes les régions ressemblent actuellement à des blocs ordinaires.

Un choix sémantique indique aux lecteurs la nature d’un bloc de contenu. Demande-toi comment le contenu se rapporte à la page avant de choisir un conteneur ; deux boîtes qui se ressemblent peuvent avoir besoin d’éléments différents.

Vérifie si le contenu est autonome

Un article est une composition autonome qui pourrait être partagée ou réutilisée séparément. Un billet de blog, une recette, un article d’actualité ou un commentaire de lecteur peut répondre à ce critère. Un article possède généralement son propre titre, mais la seule présence d’un titre ne fait pas d’un bloc un article.

Une section regroupe un thème dans un ensemble plus vaste, normalement avec un titre. « Horaires d’ouverture » et « Comment nous trouver » peuvent être des sections d’une page de contact. Si le bloc n’a pas de thème clair et que tu ne peux pas lui donner un titre qui a un sens, section n’est probablement pas le bon choix.

<article>
  <h2>Growing Basil at Home</h2>
  <section>
    <h3>Planting</h3>
    <p>Choose a sunny place for the pot.</p>
  </section>
  <section>
    <h3>Care</h3>
    <p>Check the soil regularly.</p>
  </section>
</article>

Ici, l’article est un guide complet de culture, tandis que ses sections divisent le guide en thèmes. Cet exemple convient à une page dont le <h1> principal apparaît avant l’article.

L’imbrication fonctionne aussi dans l’autre sens. Une section « Dernières actualités » peut contenir plusieurs articles indépendants. Les commentaires peuvent être des articles imbriqués dans l’article auquel ils répondent. La relation entre les contenus détermine l’imbrication.

Garde les niveaux de titres dans le plan de la page

Une section ne remet pas les niveaux de titres à zéro. Si une page utilise <h1> pour son sujet et <h2> pour un groupe thématique, utilise <h3> pour les articles à l’intérieur de ce groupe. Ne place pas un nouveau <h1> dans chaque section imbriquée. Les navigateurs et les lecteurs d’écran utilisent les niveaux de titres que tu écris réellement ; un conteneur section ne corrige pas un niveau sauté.

Utilise des conteneurs neutres lorsqu’aucun sens ne convient

<div> est un conteneur de bloc neutre. <span> est un conteneur neutre dans une ligne de texte. Ils fournissent des points d’accroche pour une classe, un attribut de langue ou une mise en forme ultérieure sans attribuer de rôle particulier au contenu.

<p>Try <span lang="fr">pain au chocolat</span> today.</p>

L’élément span indique le passage en français sans introduire de nouveau bloc. Construire toute la page avec des éléments div génériques fait perdre des rôles utiles, mais transformer chaque div en section invente des thèmes qui ne sont pas présents.

Choisis en te demandant quel est le rôle du bloc :

1. Est-ce le contenu propre à la page ? Utilise main comme région extérieure.
2. Est-ce un groupe important de navigation ? Utilise nav.
3. Pourrait-il former une composition complète ? Envisage article.
4. Est-ce une partie thématique avec un titre ? Envisage section.
5. Est-ce un contenu complémentaire lié indirectement ? Envisage aside.
6. Est-ce seulement un conteneur ? Utilise div, ou span dans le texte.

<address> a aussi un sens particulier : les coordonnées de contact de l’article le plus proche ou de la page. Un lien de courrier électronique dans le pied de page de contact d’un site peut y figurer. Une adresse postale mentionnée comme fait historique ou lieu d’un événement ne devient pas une coordonnée de contact simplement parce qu’elle contient un nom de rue.

Planifie les rôles et l’ordre de lecture avant de saisir une page complète. Une simple maquette filaire nomme les régions, tandis qu’un plan de titres nomme le contenu à l’intérieur. Ensemble, ils guident le choix des éléments et leur imbrication.

Organise le contenu

Pour une page de recette, place le nom du site et le menu répétés dans un header, la recette dans main et les informations du site dans un footer. La recette est autonome : un article convient donc à l’intérieur de main. Son plan est « Soupe à la tomate », avec « Ingrédients » et « Préparation » en dessous.

La page ci-dessous se trouve dans un dossier recipes/. Sa page d’accueil et son dossier d’images se trouvent un dossier plus haut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tomato Soup – Harbor Café Recipes</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header>
      <p><a href="../index.html">Harbor Café</a></p>
      <nav>
        <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="index.html">Recipes</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <h1>Tomato Soup</h1>
        <p>Published <time datetime="2026-03-14">March 14, 2026</time></p>
        <figure>
          <img src="../images/tomato-soup.jpg" alt="A bowl of red tomato soup with a swirl of cream" width="1200" height="800">
          <figcaption>Ready in 30 minutes.</figcaption>
        </figure>
        <h2>Ingredients</h2>
        <ul>
          <li>1 kg ripe tomatoes</li>
          <li>1 onion</li>
          <li>500 ml vegetable stock</li>
        </ul>
        <h2>Method</h2>
        <ol>
          <li>Chop the onion and tomatoes.</li>
          <li>Simmer them in the stock for 20 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Harbor Café</p>
    </footer>
  </body>
</html>

Suis les choix faits dans le code

Le lien d’évitement est le premier dans le corps et cible l’identifiant unique de la région principale. L’en-tête contient l’identité du site et la navigation qui se répètent. L’article de recette possède le seul titre principal de la page, suivi de deux sections <h2> de même niveau.

Les ingrédients utilisent une liste non ordonnée, car changer leur ordre d’affichage ne change pas ce qui est nécessaire. La préparation utilise une liste ordonnée, car les étapes forment une suite. L’alternative textuelle de la photo remplace l’image ; sa légende fournit un contexte sur la préparation.

../index.html remonte à la page d’accueil. index.html reste dans le dossier des recettes. Aucun des deux liens du menu n’est marqué aria-current="page", car la page affichée est la recette de la soupe, pas l’un des deux index.

Vérifie la page terminée

Lis le code source de haut en bas. Son ordre doit convenir à un utilisateur du clavier et à un lecteur d’écran avant que CSS ne réorganise quoi que ce soit. Vérifie le titre, le plan des titres, l’unique main visible, les chemins des liens et les alternatives textuelles des images. Lance le vérificateur HTML et corrige les problèmes qu’il signale, puis teste les liens et les images dans le navigateur.

Sur plusieurs pages, garde le même en-tête, le même menu et le même pied de page répétés. Donne à chaque page son propre titre et son propre titre principal, et adapte les chemins relatifs à partir de son dossier. Les couleurs, les polices, les espacements et les colonnes peuvent ensuite être ajoutés par CSS sans modifier les rôles déjà établis.