Encyclopédie des Balises HTML

Toutes les balises essentielles dont tu as besoin pour tes interfaces de haut niveau.

1. Structure & Sémantique Moderne

Contenu Périphérique (<aside>)

Définit un contenu de côté (comme une sidebar ou des pubs) lié au contenu principal, mais qui peut être séparé.

HTML

<article>
    <h2>Titre de l'article</h2>
    <p>Voici le texte principal du blog...</p></article><aside style="background:#f3f4f6; padding:10px;">
    <h4>À propos de l'auteur</h4>
    <p>Benjamin, dev web depuis 5 ans.</p></aside>

Titre de l'article

Voici le texte principal du blog...

Fenêtre Modale Native (<dialog>)

Crée une véritable fenêtre contextuelle ou boîte de dialogue native sans frameworks JS compliqués.

HTML

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

⚠️ Session expirée !

2. Tableaux & Listes Complexes

Tableau Complet (<table>, <thead>, <tbody>)

Structure vos données avec une ligne d'en-tête (th) et des cellules de données standard (td).

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>

Produit	Prix
Licence HTML	0 €

Liste de Définitions (<dl>, <dt>, <dd>)

Idéal pour créer des lexiques, des FAQ ou lister des caractéristiques (Terme / Définition).

HTML

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

SEO: Optimisation pour les moteurs de recherche.
CSS: Feuilles de style pour le design.

Image avec Légende (<figure> & <figcaption>)

Lie de manière sémantique et explicite une illustration, une photo ou un schéma à sa description textuelle.

HTML

<figure style="text-align:center;">
    <img src="https://picsum.photos/250/120" alt="Paysage" style="border-radius:6px;">
    <figcaption style="font-size:0.8rem; color:#6b7280;">Fig 1. Image générée aléatoirement.</figcaption>
</figure>

Paysage — Fig 1. Image générée aléatoirement.

3. Champs de Formulaires Utiles

Curseur coulissant (<input type="range">)

Permet à l'utilisateur de choisir graphiquement une valeur numérique à l'aide d'une glissière.

HTML

<label>Volume de l'effet (0 à 100) :</label><input type="range" min="0" max="100" value="45" class="demo-range">

Volume de l'effet (0 à 100) :

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

Ouvre la pipette ou le panneau de couleurs natif du système d'exploitation.

HTML

<label>Choisir la couleur de votre thème :</label><input type="color" value="#ea580c" class="demo-color">

Choisir la couleur de votre thème :

Calendrier / Date (<input type="date">)

Affiche un champ avec un mini calendrier intégré nativement pour sélectionner un jour, un mois et une année.

HTML

<label>Date de réservation :</label><input type="date" style="width:100%; padding:8px; border-radius:4px; border:1px solid #ccc;">

Date de réservation :

Compteur Numérique (<input type="number">)

Un champ restreint uniquement aux chiffres avec des petites flèches d'incrémentation (haut/bas).

HTML

<label>Quantité de produits (Min 1, Max 10) :</label>
<input type="number" min="1" max="10" value="1" class="demo-input">

Quantité (Min 1, Max 10) :

Autocomplétion Native (<datalist>)

Lien invisible qui propose des suggestions de mots automatiques dès que l'utilisateur écrit dans le champ relié.

HTML

<input list="navigateurs" class="demo-input" placeholder="Quel est ton navigateur ?">
<datalist id="navigateurs">
    <option value="Google Chrome">
    <option value="Mozilla Firefox">
    <option value="Safari">
</datalist>

4. Médias & Indicateurs Visuels

Lecteur Audio (<audio>)

Intègre un composant de lecture sonore complet (Play, Pause, Volume) sans code externe.

HTML

<audio controls style="width:100%;">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>

Barre de Progression (<progress>)

Parfait pour indiquer visuellement le chargement d'un fichier ou l'état d'avancement d'un questionnaire.

HTML

<label>Téléchargement en cours (70%) :</label>
<progress value="70" max="100" class="demo-progress"></progress>

Téléchargement en cours (70%) :

Surlignage de Texte (<mark>)

Surligne automatiquement un groupe de mots en jaune fluo pour attirer l'attention du visiteur.

HTML

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

L'offre expire ce soir à minuit !