Dans notre quête de frameworks et bibliothèques toujours plus sophistiqués, on oublie parfois que le HTML5 propose des balises natives offrant d’excellentes fonctionnalités accessibles et sémantiques. Ces balises permettent d’éviter du code JS ou CSS superflu et améliorent la robustesse de vos pages

1. <dialog> : fenêtres modales natives

Offrez une boîte de dialogue accessible sans librairie externe :

<dialog id="dlg">
  <h2>Titre</h2>
  <button id="fermer">Fermer</button>
</dialog>
<button id="ouvrir">Ouvrir</button>

<script>
  const dlg = document.getElementById('dlg');
  document.getElementById('ouvrir').onclick = () => dlg.showModal();
  document.getElementById('fermer').onclick = () => dlg.close();
</script>

Le focus, backdrop et accessibilité sont gérés automatiquement.

2. <details> et <summary> : accordéons faciles

Un contenu dépliable sans JS :

<details>
  <summary>Afficher plus</summary>
  <p>Voici du contenu masqué...</p>
</details>

La gestion clavier et l’état ouvert/fermé sont natifs.

3. <datalist> : suggestions natives

Pour des suggestions sans code compliqué :

<input list="browsers" placeholder="Navigateurs">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Limitations de style, mais efficacité maximale.

4. <meter> : jauges sémantiques

Idéal pour visualiser des valeurs avec seuils :

<meter value="75" min="0" max="100" low="30" high="70" optimum="80">75%</meter>

La couleur change selon la position de la valeur.

5. <output> : valeurs dynamiques calculées

Lié aux champs d’un formulaire :

<form oninput="result.value = +a.value + +b.value">
  <input id="a" type="number" value="2">
  <input id="b" type="number" value="3">
  = <output name="result" for="a b">0</output>
</form>

Parfait pour les calculs en temps réel medium.com.

6. <mark> : surlignage sémantique

Pour mettre en évidence du texte :

<p>La <mark>sauterelle</mark> est un insecte remarquable.</p>

Accessible et stylable avec CSS

7. <time> : dates/hours sémantiques

Créez des dates que les agents peuvent interpréter :

<time datetime="2025-06-12">12 juin 2025</time>

Améliore l’accessibilité et le SEO semrush.com.

8. <figure> & <figcaption> : figures autonomes

Illustrations avec légende :

<figure>
  <img src="photo.jpg" alt="Paysage">
  <figcaption>Paysage de montagne</figcaption>
</figure>

Sépare le contenu visuel et sa description semrush.com.

Pourquoi opter pour ces balises ?

• Pas de dépendance externe : tout est natif, pas besoin de librairies.
• Accessibilité assurée : gestion clavier, rôle ARIA et sémantique par défaut .
• Code plus léger et maintenable : moins de scripts, plus de clarté.
• SEO friendly : les moteurs comprennent mieux votre contenu.

En résumé

Avant de plonger dans des bibliothèques ou scripts complexes, explorez ces balises natives. Elles offrent des solutions élégantes et accessibles pour des composants courants :

• modales : <dialog>,
• accordéons : <details><summary>,
• suggestions : <datalist>,
• jauges : <meter>,
• résultats : <output>,
• surlignage : <mark>,
• metadonnées temporelles : <time>,
• figures : <figure><figcaption>.

Adoptez-les pour un HTML plus sémantique, efficace et accessible.