// module 01 — html

Encyclopédie HTML

Toutes les balises essentielles avec exemples de code et rendu visuel en direct.

Structure & Sémantique
01

Contenu Périphérique — <aside>

Définit un contenu latéral (sidebar, note) lié mais séparable du contenu principal.

HTML 
<article>
  <h2>Titre de l'article</h2>
  <p>Texte principal du blog...</p>
</article>
<aside>
  <h4>À propos de l'auteur</h4>
  <p>Benjamin, dev web.</p>
</aside>
Rendu

Titre de l'article

Texte principal du blog...

Fenêtre Modale Native — <dialog>

Crée une vraie fenêtre contextuelle native sans librairie externe.

HTML 
<dialog open
  style="border: 2px solid #ff6b35;
  padding: 15px; border-radius: 8px;">
  <p>⚠️ Session expirée !</p>
  <button>Se reconnecter</button>
</dialog>
Rendu

⚠️ Session expirée !
Tableaux & Listes Complexes
02

Tableau Complet — <table>

Structure tes données avec thead, tbody et cellules d'en-têtes th.

HTML
<table class="demo-table">
  <thead>
    <tr>
      <th>Produit</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Licence HTML</td>
      <td>0 €</td>
    </tr>
  </tbody>
</table>
Rendu
ProduitPrix
Licence HTML0 €

Liste de Définitions — <dl>

Parfait pour FAQ, glossaires ou paires Terme / Définition.

HTML
<dl>
  <dt><strong>SEO</strong></dt>
  <dd>Optimisation moteurs de recherche.</dd>
  <dt><strong>CSS</strong></dt>
  <dd>Feuilles de style pour le design.</dd>
</dl>
Rendu
SEO
Optimisation pour les moteurs de recherche.
CSS
Feuilles de style pour le design.

Image avec Légende — <figure>

Lie sémantiquement une illustration à sa description textuelle.

HTML
<figure style="text-align:center;">
  <img src="image.jpg" alt="Paysage"
    style="border-radius:6px;">
  <figcaption>
    Fig 1. Description de l'image.
  </figcaption>
</figure>
Rendu
Paysage
Fig 1. Image générée aléatoirement.
Formulaires Avancés
03

Curseur Coulissant — <input type="range">

Sélection graphique d'une valeur numérique via glissière.

HTML
<label>Volume (0 à 100) :</label>
<input type="range"
  min="0" max="100" value="45">
Rendu

Sélecteur de Couleur — <input type="color">

Ouvre la pipette native du système d'exploitation.

HTML
<label>Couleur du thème :</label>
<input type="color" value="#ff6b35">
Rendu

Calendrier — <input type="date">

Mini calendrier natif intégré pour sélectionner une date.

HTML
<label>Date de réservation :</label>
<input type="date">
Rendu

Autocomplétion — <datalist>

Suggestions automatiques lors de la saisie dans un champ texte.

HTML
<input list="nav" placeholder="Navigateur ?">
<datalist id="nav">
  <option value="Google Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
Rendu
Médias & Indicateurs
04

Lecteur Audio — <audio>

Lecteur natif complet (Play, Pause, Volume) sans code externe.

HTML
<audio controls style="width:100%;">
  <source
    src="audio.mp3"
    type="audio/mpeg">
</audio>
Rendu

Barre de Progression — <progress>

Indicateur visuel d'avancement pour chargements ou questionnaires.

HTML
<label>Téléchargement (70%) :</label>
<progress value="70" max="100">
</progress>
Rendu

Surlignage — <mark>

Surligne un groupe de mots en jaune pour attirer l'attention.

HTML
<p>L'offre expire
  <mark>ce soir à minuit</mark> !
</p>
Rendu

L'offre expire ce soir à minuit !