hidden

Description

L’attribut hidden cache un élément du rendu visuel et le rend inaccessible aux technologies d’assistance (équivalent à display: none). La valeur until-found (HTML moderne) cache l’élément mais permet aux fonctionnalités de recherche dans la page (Ctrl+F) de le trouver et de le révéler automatiquement.

Syntaxe

<div hidden>Contenu masqué</div>
<section hidden="until-found" id="details">Contenu cherchable mais masqué</section>

Exemples

Affichage/masquage dynamique :

<p id="message" hidden>Opération réussie !</p>
<button type="button" onclick="document.getElementById('message').hidden = false">
  Afficher le message
</button>

Section cherchable masquée :

<details-section hidden="until-found" id="faq-3">
  <h3>Réponse cachée mais cherchable</h3>
  <p>Cette section apparaîtra si l'utilisateur cherche ce texte avec Ctrl+F.</p>
</details-section>

Valeurs

Valeur	Comportement
hidden ou ""	Cache complètement l’élément (display: none)
until-found	Cache l’élément mais le révèle lors d’une recherche dans la page

Notes

Priorité CSS : l’attribut hidden peut être annulé par CSS si une règle définit display explicitement. Utiliser [hidden] { display: none !important; } dans le CSS global pour éviter les surprises.

visibility: hidden vs hidden : visibility: hidden masque visuellement mais conserve l’espace. hidden supprime l’élément du flux (comme display: none).

until-found et le défilement : quand until-found révèle un élément, le navigateur fait défiler la page jusqu’à lui et déclenche l’événement beforematch.