13 Balises et attributs HTML5 intéressants [MAJ 2026]
jeudi 20 août 2026 11:45
Les balises
<details>
L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.
L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.
🆒🆕 L'attribut [name] permet de créer un accordéon : si on donne le même attribut [name] à plusieurs <details>, l'ouverture de l'un provoquera la fermeture de l'autre !
<style>
details{font-style:italic;cursor:pointer}
details:after summary{content:"▶"}
details[open]:after summary{content:"▼"}
details p{margin-left: 25px}
</style>
<details>
<summary>Ligne de résumé.</summary>
<p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.
Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...
en savoir plus - compatibilité 96%
<dialog>
Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture
en savoir plus - compatibilité 96%
<data>
La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.
<p>New Products:</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>en savoir plus - compatibilité 99%
<base>
Fournit l'url de base et le target pour tous les liens relatifs de la page.
Astuce: en faisant <base target="_blank"> tous les liens s'ouvriront dans une nouvelle page...
en savoir plus - compatibilité 98%
<meter>
Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)
<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
en savoir plus - compatibilité 96%
<progress>
Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)
<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
en savoir plus - compatibilité 98%
<mark>
Qui sert simplement à mettre en surbrillance un passage de façon plus sémantique.
en savoir plus - compatibilité 96%
<optgoup>
pour regrouper les options d'un select <optgoup label="groupe1">
en savoir plus - compatibilité 96%
Les <input> autres que text:
Rappel, HTML5 sait bien produire des sélecteurs natifs sans JS:
- type="date" [compatibilité 89%] (et month, week...)
- type="time" [compatibilité 90%],
- type="color" [compatibilité 96%],
- type="range" [compatibilité 96%],
- ...
Les attributs
🆒🆕 L'attribut popover
Permet de désigner un élément qui est affiché par-dessus le contenu actuel. Affichage déclenchable sans js.
<button popovertarget="example-popover">Toggle popover
<div id="example-popover" popover>
No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!
</div>
en savoir plus - compatibilité 90%
L'attribut poster de la balise <video>
On peut spécifier une image qui s'affiche pendant le chargement de la vidéo en faisant <video poster="chemin/vers/image.jpg">
en savoir plus - compatibilité 82%
l'attribut loading="lazy"
Permet de ne charger l'élément que s'il est affiché réellement. en savoir plus - compatibilité 94%
L'attribut spellcheck de la balise <input> (ou tout contenteditable)
On peut autoriser ou interdire la vérification orthographique avec cet attribut <input type="text" spellcheck="false">
en savoir plus - compatibilité 99%
Sources:
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/>
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/>
<script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js">
<script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});► Commentaires
