1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
title: hidden
slug: Web/HTML/Attributs_universels/hidden
tags:
- Attribut
- Attribut universel
- HTML
- Reference
translation_of: Web/HTML/Global_attributes/hidden
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>hidden</strong></code> est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p>
<p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p>
<p>Par exemple, on peut utiliser l'attribut ARIA <code>aria-describedby</code> pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un <em>buffer</em> hors champ par moteur graphique scripté.</p>
<div class="note">
<p><strong>Note :</strong> Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a <code>display: flex</code> sera affiché à l'écran, même si l'attribut <code>hidden</code> est présent.</p>
</div>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Définit le rendu par défaut suggéré en CSS lorsque l'attribut <code>hidden</code> est utilisé.</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("html.global_attributes.hidden")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
<li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Utiliser l'attribut <code>aria-hidden</code></a></li>
</ul>
|
