La présence de l'attribut hidden indique que l'élément ne doit pas être atteint, et donc par défaut ne doit pas être affiché. Il faut bien comprendre que ceci relève en premier lieu de la sémantique et qu'il ne faut pas le confondre avec la propriété display:none en CSS qui ne relève que de l'aspect graphique.
Exemple d'utilisation de l'attribut hidden
Les étapes d'un formulaire, affichées après avoir complété des informations préliminaires et nécessaires pour accéder aux étapes suivantes. Il s'agira alors d'ajouter/supprimer cet attribut sur les conteneurs en question.
Exemple de non utilisation de l'attribut hidden (en CSS avec display:none)
Pour un diaporama ou un système d'onglets pour afficher/cacher du contenu dynamiquement.
On peut également présumer que l'attribut pourra renseigner plus efficacement les moteurs de recherche sur les zones qu'il est inutile d'indexer. Cependant rien ne garantit que les robots le prendront effectivement en compte.
Syntaxe
<element hidden>...</element>
Valeurs possibles
L'attribut hidden est de type booléen (vrai ou faux), sa seule présence suffit avec une syntaxe HTML. Il est également possible d'écrire hidden="hidden" si l'on se conforme à la syntaxe XHTML.
Démonstration
<section id="etape2" hidden>Contenu non atteignable</section>
Changement d'état avec JavaScript
Il est bien entendu possible de changer l'état avec un script :
<script>
document.getElementById('etape1').hidden = false;
</script>
Prise en charge de l'attribut hidden
| Navigateurs | Versions |
|---|---|
 |
Firefox 6+ |
 |
Chrome 7+ |
 |
Safari 5.1+ |
 |
Opera 11.1+ |
L'inconvénient de cet attribut est qu'il n'est pas supporté jusqu'à Internet Explorer 10 inclus. Il est néanmoins possible de combler ce manque avec un surplus de JavaScript, par exemple en jQuery. Il n'existe pas de solution automatisée (et optimisée) de repli qui surveillerait la présence des attributs hidden en JavaScript pour afficher/masquer les éléments, car l'événement DOM onpropertychange est encore peu supporté.