logo oujood
🔍

 HTML5 attribut hidden : masquer des éléments sémantiquement

L'attribut hidden permet de masquer des éléments non pertinents du DOM tout en préservant l'accessibilité et la sémantique de votre page web

OUJOOD.COM

Définition et utilisation de l'attribut hidden en HTML5

HTML Les attributs globaux

L'attribut hidden est un attribut booléen global HTML5 qui permet de masquer des éléments du Document Object Model (DOM) de manière sémantique. Contrairement aux techniques CSS traditionnelles comme display:none, cet attribut indique explicitement qu'un élément n'est plus pertinent dans le contexte actuel de la page.

Lorsque l'attribut hidden est présent sur un élément HTML, il spécifie que cet élément ne doit pas être affiché à l'utilisateur car il n'est pas encore pertinent, ou qu'il n'est plus pertinent dans le contexte actuel de navigation. Cette approche améliore l'accessibilité web et la sémantique du document.

Les navigateurs modernes ne devraient pas afficher les éléments qui possèdent l'attribut hidden. Cet attribut est particulièrement utile pour les interfaces utilisateur dynamiques où certaines sections doivent être révélées progressivement en fonction des actions de l'utilisateur.

L'attribut hidden peut être utilisé pour empêcher un utilisateur de voir un élément jusqu'à ce qu'une condition spécifique soit remplie, comme la sélection d'une case à cocher, la validation d'un formulaire, ou le chargement de données asynchrones. Un script JavaScript peut ensuite supprimer dynamiquement l'attribut hidden et rendre l'élément visible, créant ainsi des expériences utilisateur interactives et fluides.

Syntaxe de l'attribut hidden

<element hidden>
<element hidden="hidden">
<element hidden="">

Ces trois syntaxes sont équivalentes et valides en HTML5. La première forme (sans valeur) est la plus concise et recommandée.

Exemple pratique : paragraphe masqué avec l'attribut hidden

Cet exemple démontre l'utilisation basique de l'attribut hidden pour masquer des paragraphes HTML. Les éléments marqués comme hidden ne seront pas rendus visuellement par le navigateur.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration attribut hidden HTML5</title>
</head>
<body>
<!-- Paragraphe masqué avec l'attribut hidden -->
<p hidden="hidden">Ce paragraphe est masqué et ne sera pas visible.</p>
<!-- Paragraphe visible normalement -->
<p>Ce paragraphe est visible pour tous les utilisateurs.</p>
<!-- Autre syntaxe valide de l'attribut hidden -->
<p hidden="">Ce paragraphe sera également masqué.</p>
<!-- Syntaxe la plus concise (recommandée en 2026) -->
<p hidden>Forme courte de l'attribut hidden.</p>
</body>
</html>

Manipulation dynamique de l'attribut hidden avec JavaScript

L'un des cas d'usage les plus puissants de l'attribut hidden est sa manipulation via JavaScript. Cela permet de créer des interfaces utilisateur réactives où les éléments apparaissent ou disparaissent en fonction des interactions utilisateur.

Exemple : masquer un élément au clic

Cet exemple illustre comment masquer dynamiquement un élément HTML lorsque l'utilisateur clique dessus, en utilisant la propriété JavaScript hidden.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribut hidden dynamique avec JavaScript</title>
<script>
// Fonction pour masquer l'élément ciblé
function masquerElement() {
// Récupération de l'élément par son ID
const element = document.getElementById('paragraphe-cliquable');
// Application de l'attribut hidden via JavaScript
element.hidden = true;
}
</script>
</head>
<body>
<h1>Démonstration interactive de l'attribut hidden</h1>
<!-- Paragraphe interactif qui se masque au clic -->
<p id="paragraphe-cliquable" onclick="masquerElement()" style="cursor: pointer; color: blue;">
Cliquez sur ce paragraphe pour le masquer dynamiquement.
</p>
</body>
</html>

Exemple avancé : afficher/masquer avec basculement

Pour des interfaces plus sophistiquées, voici un exemple de toggle (basculement) de l'attribut hidden permettant d'afficher et de masquer alternativement un élément.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle attribut hidden HTML5</title>
<script>
// Fonction de basculement de la visibilité
function toggleVisibilite() {
const contenu = document.getElementById('contenu-dynamique');
// Inverse l'état de l'attribut hidden
contenu.hidden = !contenu.hidden;
// Mise à jour du texte du bouton
const bouton = document.getElementById('bouton-toggle');
bouton.textContent = contenu.hidden ? 'Afficher le contenu' : 'Masquer le contenu';
}
</script>
</head>
<body>
<button id="bouton-toggle" onclick="toggleVisibilite()">Afficher le contenu</button>
<!-- Contenu initialement masqué -->
<div id="contenu-dynamique" hidden>
<h2>Contenu révélé dynamiquement</h2>
<p>Ce contenu était masqué et devient visible au clic.</p>
</div>
</body>
</html>

Compatibilité navigateurs de l'attribut hidden

L'attribut hidden est pris en charge dans tous les navigateurs modernes en 2026, y compris Chrome, Firefox, Safari, Edge et Opera. Les anciennes versions d'Internet Explorer (IE 10 et antérieures) ne supportent pas cet attribut. Pour les projets devant supporter les navigateurs obsolètes, utilisez un polyfill CSS :

  📋 Copier le code

/* Polyfill CSS pour l'attribut hidden */
[hidden] {
display: none !important;
}

Différences entre HTML 4.01 et HTML5

L'attribut hidden est une nouveauté introduite en HTML5. Il n'existait pas dans les spécifications HTML 4.01. Cette fonctionnalité fait partie des améliorations sémantiques apportées par HTML5 pour mieux structurer et gérer la visibilité du contenu web.

Attribut hidden vs CSS display:none

Bien que l'attribut hidden et la propriété CSS display:none produisent un résultat visuel similaire, ils ont des implications sémantiques différentes :

  • hidden : indique que l'élément n'est pas pertinent dans le contexte actuel (sémantique)
  • display:none : contrôle purement visuel sans signification sémantique particulière
  • Les lecteurs d'écran et technologies d'assistance peuvent traiter différemment ces deux approches
  • L'attribut hidden peut être surchargé par du CSS, contrairement à ce qu'on pourrait penser
Remarque importante : L'attribut hidden est un attribut booléen et peut être écrit de plusieurs façons équivalentes :
<element hidden> (syntaxe recommandée en 2026)
<element hidden="hidden">
<element hidden="">
Ces trois écritures expriment exactement la même chose et produisent le même résultat.
 Retour à la liste des attributs globaux      
accueil HTML 5

Par carabde | Mis à jour le 11 février 2026