Liste des balises HTML5 essentielles avec exemples

🏗️ Structure de base

Définit la base de tout document HTML.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
  </head>
  <body>
    <!-- Commentaire HTML -->
  </body>
</html>

<!DOCTYPE html>: indique l’utilisation de HTML5.
<html>: racine du document.
<head>: contient les métadonnées et configurations.
<meta>: définit des informations comme l’encodage ou la vue adaptative.
<title>: titre qui apparaît dans l’onglet du navigateur.
<body>: contient tout le contenu visible de la page.
<!– Texte quelconque –>: commentaire visible uniquement par le développeur dans le code.

📝 Texte et formatage

Organisent et donnent du style au texte du document.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Ceci est un paragraphe.</p>
<strong>Texte important</strong>
<em>Texte avec emphase</em>
<span style="color:red;">Texte en ligne</span>
<br> Saut de ligne
<a href="https://exemple.com">Lien</a>

<h1>–<h6>: hiérarchie de titres, <h1> étant le plus important et <h6> le moins.
<p>: définit un paragraphe.
<strong>: indique l’importance (texte en gras).
<em>: met en évidence avec emphase (texte en italique).
<span>: conteneur en ligne pour appliquer des styles.
<br>: insère un saut de ligne.
<a>: crée un lien vers une autre page ou ressource (attribut href).

🎬 Multimédia

Insèrent des images, vidéos, audios ou graphiques SVG.

<img src="photo.jpg" alt="Description de l'image">

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

<img>: insère une image (l’attribut alt décrit son contenu pour l’accessibilité).
<svg>: permet de créer des graphiques vectoriels évolutifs.
<video>: affiche une vidéo avec contrôles.
<audio>: lit du son ou de la musique.
<source>: définit les fichiers multimédias dans <video> ou <audio>.

🧩 Formulaires

Permettent de collecter des informations utilisateur via des champs interactifs.

<form action="/envoyer" method="post">
  <label>Nom:</label>
  <input type="text" name="nom">

  <label>Âge:</label>
  <input type="number" name="age">

  <label>Genre:</label>
  <input type="radio" name="genre" value="homme"> Homme
  <input type="radio" name="genre" value="femme"> Femme

  <label>Loisirs:</label>
  <input type="checkbox" name="sport"> Sport
  <input type="checkbox" name="musique"> Musique

  <label>Commentaires:</label>
  <textarea name="commentaires" rows="3" cols="30"></textarea>

  <label>Pays:</label>
  <select name="pays">
    <option>Espagne</option>
    <option>Mexique</option>
  </select>

  <input type="submit" value="Envoyer">
</form>

<form>: regroupe les champs du formulaire.
<label>: étiquette descriptive d’un champ.
<input type= »text »>: champ de texte court.
<input type= »number »>: champ numérique.
<input type= »radio »>: option unique dans un groupe.
<input type= »checkbox »>: sélection multiple.
<textarea>: zone pour texte long ou commentaires.
<select> / <option>: liste déroulante.
<input type= »submit »>: bouton pour envoyer le formulaire.

🧱 Sémantique SEO

Organisent le contenu de manière structurée et compréhensible pour les moteurs de recherche.

<header>En-tête du site</header>
<nav>Menu de navigation</nav>
<main>Contenu principal</main>
<section>Section thématique</section>
<article>Article ou post</article>
<aside>Information latérale</aside>
<footer>Pied de page</footer>

<header>: en-tête du site ou de la section.
<nav>: contient les liens de navigation.
<main>: contenu principal de la page.
<section>: regroupe des contenus liés.
<article>: bloc indépendant de contenu (comme un post).
<aside>: information latérale ou complémentaire.
<footer>: pied de page.

🌈 Autres balises utiles

<ul>
  <li>Élément A</li>
  <li>Élément B</li>
</ul>

<ol type="A">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ol>

<table>
  <tr><th>Nom</th><th>Âge</th></tr>
  <tr><td>Ana</td><td>30</td></tr>
</table>

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Légende de l'image</figcaption>
</figure>

<ul>: liste non ordonnée (puces).
<ol>: liste ordonnée (type="A", "a", "I", "1").
<li>: élément dans une liste.
<table>: crée des tableaux de données.
<tr>: ligne du tableau.
<th>: cellule d’en-tête.
<td>: cellule normale de données.
<figure> et <figcaption>: image avec légende descriptive.