Accueil / Balises HTML

Comprendre les balises HTML

Une balise HTML décrit un rôle : un titre, un paragraphe, une liste, un lien, une image, une section, etc. En général, on ouvre une balise puis on la ferme, par exemple <p>...</p>.

Règle simple : choisis toujours la balise qui décrit le mieux le contenu. C’est bon pour l’accessibilité, le référencement et la maintenance.

Les balises de structure minimales

Balise	Rôle
<!doctype html>	Indique qu’il s’agit d’un document HTML5.
<html>	Racine du document.
<head>	Contient les métadonnées, le titre, les liens CSS, etc.
<body>	Contient le contenu visible de la page.

Structure d’un document HTML

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exemple</title>
  </head>
  <body>
    <h1>Mon titre</h1>
    <p>Mon paragraphe</p>
  </body>
</html>

Les balises de contenu les plus courantes

<h1> à <h6> : titres hiérarchisés.
<p> : paragraphe.
<a> : lien.
<img> : image.
<ul>, <ol>, <li> : listes.
<div> et <span> : conteneurs génériques quand aucune balise sémantique ne convient.

Titre, paragraphe et lien

<h1>Apprendre HTML</h1>
<p>HTML sert à structurer le contenu d’une page.</p>
<a href="https://developer.mozilla.org/fr/docs/Web/HTML">Voir la doc MDN</a>

MDN HTML Spécification WHATWG HTML

Balises de mise en valeur du texte

Pour mettre en avant du contenu, utilise les balises sémantiques plutôt qu’un style visuel pur.

<strong> : importance forte.
<em> : emphase.
<code> : fragment de code.
<blockquote> : citation longue.

Mise en valeur sémantique

<p><strong>Important :</strong> utilisez la bonne balise.</p>
<p>Vous pouvez aussi mettre un mot en <em>emphase</em>.</p>
<p>La balise <code>&lt;code&gt;</code> affiche du code en ligne.</p>