W3docs
fr
Se connecter

Balises HTML de base

Apprenez les balises HTML essentielles : titres, paragraphes, images, liens, boutons, listes et règles horizontales, avec des exemples interactifs.

HTML est un langage de balisage : vous enveloppez votre contenu dans des balises (éléments) qui indiquent au navigateur ce que signifie chaque partie du contenu — voici un titre, cela est un paragraphe, voici un lien. Sans balisage, un navigateur ne verrait qu'un bloc de texte sans structure. Comprendre les balises de base est le fondement de tout ce qui existe en HTML.

Voici les éléments que vous utiliserez le plus souvent sur presque toutes les pages :

Cette page présente chacun d'eux, explique pourquoi vous en avez besoin, et propose un exemple modifiable et exécutable.

Les documents HTML

Chaque page HTML partage le même squelette de base. Les éléments ci-dessous apparaissent dans tous les exemples de cette page, il vaut donc la peine de savoir ce que chacun fait :

  • <!DOCTYPE html> doit être la toute première ligne. Ce n'est pas une balise mais une déclaration qui indique au navigateur d'utiliser le mode standards modernes (HTML5). Si vous l'omettez, les navigateurs basculent vers un ancien « mode quirks » qui affiche les pages de façon incohérente.
  • L'ensemble du document est encapsulé dans l'élément <html> : il commence par <html> et se termine par </html>. C'est l'élément racine.
  • La section <head> contient des informations sur la page qui ne sont pas affichées dans le corps — par exemple, le <title>, qui définit le texte affiché dans l'onglet du navigateur et utilisé par les moteurs de recherche.
  • Le contenu visible de la page se trouve entre <body> et </body>. Tout ce que l'utilisateur voit — titres, paragraphes, images, liens — y figure.

Exemple d'un document HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Essayez vous-même »

Les titres HTML

Les titres donnent une structure à la page. Il existe six niveaux de titres HTML, de <h1> (le plus important) à <h6> (le moins important). Utilisez <h1> pour le titre principal de la page, <h2> pour les sections majeures, <h3> pour les sous-sections, et ainsi de suite — comme une table des matières.

Les titres ne sont pas simplement du texte plus grand et en gras. Leurs niveaux portent une signification qui compte pour l'accessibilité et le SEO : les utilisateurs de lecteurs d'écran naviguent sur une page en sautant d'un titre à l'autre, et les moteurs de recherche utilisent la structure des titres pour comprendre le sujet de la page. Pour cette raison, choisissez un niveau de titre pour sa signification, non pour sa taille — ne sautez jamais des niveaux uniquement pour rendre le texte plus petit.

Exemple des titres HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Essayez vous-même »

Les paragraphes HTML

L'élément <p> regroupe votre texte en paragraphes. Les navigateurs ajoutent automatiquement de l'espace au-dessus et en dessous de chaque paragraphe, vous n'avez donc pas besoin d'ajouter des lignes vides vous-même — en fait, les espaces supplémentaires et les sauts de ligne dans votre code source sont réduits à un seul espace. Envelopper du texte dans <p> est la manière d'indiquer au navigateur « ceci est un bloc de texte courant ».

Exemple des paragraphes HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Essayez vous-même »

Les images HTML

La balise <img> intègre une image dans la page. C'est un élément vide (sans balise de fermeture), entièrement contrôlé par ses attributs :

  • src — le chemin ou l'URL du fichier image à afficher. Sans lui, rien ne s'affiche.
  • alt — le texte alternatif (voir ci-dessous).
  • width / height — la taille de l'image en pixels. Les définir réserve de l'espace pour que la mise en page ne saute pas pendant le chargement de l'image.

Pourquoi l'attribut alt est important

L'attribut alt contient une courte description textuelle de l'image. Il est obligatoire car il remplit plusieurs fonctions importantes :

  • Les lecteurs d'écran lisent le texte alt à voix haute, afin que les personnes qui ne peuvent pas voir l'image la comprennent quand même — c'est essentiel pour l'accessibilité.
  • Si l'image ne se charge pas, le navigateur affiche le texte alt à sa place.
  • Les moteurs de recherche l'utilisent pour comprendre ce que l'image représente.

Un bon texte alt décrit le contenu ou l'objectif de l'image en quelques mots, comme si vous la décriviez à quelqu'un par téléphone. Par exemple, au lieu de alt="Aleq" (qui n'a aucun sens pour quelqu'un qui ne sait pas ce qu'est « Aleq »), préférez quelque chose comme alt="Portrait d'un homme souriant portant des lunettes". Si une image est purement décorative et n'apporte aucune information, utilisez un alt="" vide afin que les lecteurs d'écran l'ignorent.

Exemple des images HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Essayez vous-même »

Les liens HTML

Les liens sont ce qui transforme des pages séparées en un web connecté — ils permettent aux utilisateurs de cliquer d'une page à une autre. Vous créez un lien avec la balise <a> (ancre) et l'enveloppez autour du texte ou de l'image qui doit être cliquable.

La destination est définie avec l'attribut href (abréviation de hypertext reference). C'est l'adresse vers laquelle le navigateur navigue lorsque le lien est cliqué — une URL absolue comme https://www.w3docs.com/, ou un chemin sur votre propre site comme /learn-html/html-links. Sans href, un élément <a> n'est que du texte et ne fait rien.

Exemple des liens HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Essayez vous-même »

Les boutons HTML

La balise <button> crée un bouton cliquable que les utilisateurs peuvent presser pour déclencher une action — soumettre un formulaire, ouvrir un menu, ou exécuter du JavaScript.

Un bouton possède un attribut type. Définir type="button" est une bonne habitude lorsque le bouton n'est pas destiné à soumettre un formulaire : par défaut, un <button> à l'intérieur d'un <form> a type="submit", donc omettre le type peut provoquer la soumission du formulaire (et le rechargement de la page) de façon inattendue. Utiliser type="button" fait que le bouton ne fait rien de lui-même jusqu'à ce que vous lui attachiez un comportement, ce qui évite cette soumission accidentelle.

Exemple de la balise HTML <button> :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Essayez vous-même »

Les listes HTML

Les listes regroupent des éléments connexes. Utilisez la balise <ul> pour une liste non ordonnée (éléments à puces, où l'ordre n'a pas d'importance) ou la balise <ol> pour une liste ordonnée (éléments numérotés, où la séquence compte, comme les étapes d'une recette). À l'intérieur de l'une ou l'autre, chaque élément est encapsulé dans une balise <li> (élément de liste).

Exemple des listes HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Essayez vous-même »

Les lignes horizontales HTML

La balise HTML <hr> représente une rupture thématique entre le contenu au niveau des paragraphes — par exemple, un passage à un nouveau sujet dans une section, ou un changement de scène dans une histoire. En HTML5, c'est un élément sémantique, pas seulement une ligne décorative : il indique que le contenu avant et après lui porte sur des sujets différents. Les navigateurs l'affichent généralement comme une ligne horizontale, mais ce n'est que son apparence par défaut. C'est une balise vide, elle n'a donc pas de balise de fermeture.

Exemple de la balise HTML <hr> :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Essayez vous-même »

Pratique

Pratique
Quelles affirmations concernant les éléments HTML de base sont vraies ?
Quelles affirmations concernant les éléments HTML de base sont vraies ?

Résumé

Les balises HTML de base présentées ici sont les blocs de construction de presque toutes les pages web :

Was this page helpful?