HTML Masquer l'élément
L'attribut global caché en HTML5 est un attribut booléen. Il précise que l'élément ciblé est en outre pertinent ou non pour le document HTML. Un exemple d'utilisation de l'attribut caché est qu'il peut être utilisé pour couvrir/découvrir tout contenu particulier présent sur la page Web HTML qui n'est pas autorisé à moins que l'utilisateur n'ait été authentifié. D'ici là, les navigateurs n'afficheront pas les éléments avec une propriété cachée active (c'est-à-dire que l'attribut est défini).
Utilisation de l'attribut caché
Une telle utilisation des attributs cachés peut revenir à empêcher un utilisateur de voir un élément jusqu'à ce que certaines conditions soient remplies (telles que la sélection d'un bouton radio, etc.), après quoi, un code JavaScript pourrait stipuler à nouveau l'attribut caché. , rendant ainsi l'élément visible. Cet attribut ne doit pas être utilisé pour masquer le contenu uniquement pour une présentation individuelle ; il doit plutôt rester dans le même état pour toutes les présentations si un contenu reste masqué.
Le contenu masqué ne doit pas être associé à un contenu non masqué ou à un contenu descendant d'un contenu masqué qui est pourtant actif. Cela garantit que les éléments du formulaire peuvent encore être soumis et que les éléments de script peuvent encore être exécutés. Les scripts et les éléments peuvent cependant faire référence à tout contenu masqué dans un autre contexte.
Il serait totalement incorrect d'utiliser le
Syntaxe
<element hidden> </element>
Exemples d'éléments HTML masqués
Vous trouverez ci-dessous des exemples d'éléments HTML masqués :
Exemple n°1
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>
Sortie :
Exemple n°2
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>
Sortie :
Exemple n°3 – Utilité de l’attribut.
Selon la définition de l'attribut Hidden, nous pouvons masquer tout contenu présent dans une page Web HTML à l'aide de l'attribut caché, puis le code JavaScript peut être utilisé pour y accéder ultérieurement. L'objectif de masquer un élément peut également être atteint par CSS avec la propriété comme propriété d'affichage (c'est-à-dire en la définissant sur aucun), mais l'utilisation de l'attribut caché est une approche simple. Par conséquent, nous pouvons dire que le contenu avec un attribut caché est une tranche du DOM, mais l'utilisateur ne peut pas y accéder.
Dans l’exemple ci-dessous, nous choisirons le paramètre
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>
Sortie :
Points importants à retenir
Voici quelques points importants qui doivent être bien connus avant d'interagir avec l'attribut caché :
- Le contenu accessible dans des résolutions et des tailles d'écran distinctes ne doit pas utiliser d'attribut caché pour masquer le contenu.
- L'attribut caché ne doit pas être utilisé pour masquer/couvrir les sections non visibles d'un sélecteur de contenu ou d'un composant d'onglet.
- L'élément non masqué ne doit pas être lié par hyperlien à un élément masqué.
- Les éléments marqués comme masqués sont toujours potentiellement actifs.
- Si vous souhaitez masquer le contenu à tous les utilisateurs, utilisez l'attribut caché HTML5 (avec l'affichage CSS : aucun pour les navigateurs qui ne prennent pas encore en charge le masqué). Il n'est pas nécessaire d'utiliser aria-hidden.
Conclusion
Vous trouverez ci-dessous quelques-uns des principaux points clés que vous devez retenir de ce sujet.
Les cas d'utilisation appropriés pour l'attribut caché incluent :
- Contenu qui n'est pas encore pertinent mais qui pourrait être nécessaire plus tard.
- Contenu qui a été utilisé précédemment mais qui n'est plus nécessaire.
- Contenu réutilisable et utilisé par diverses autres parties de la page à la manière d'un modèle.
- Création d'une toile hors écran comme tampon de dessin.
Les cas d'utilisation non appropriés d'un attribut caché incluent :
- Masquage des panneaux dans une boîte de dialogue à onglets.
- Masquer le contenu dans une présentation individuelle tout en souhaitant qu'il soit visible dans les autres.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment installer des consultations sous Windows
Sep 29, 2025 am 10:27 AM
1. Allez sur le site officiel pour télécharger: https://www.consul.io/downloads.html2. Décompression: 3. Définir les variables d'environnement: chemin pour ajouter e: \ ProgramFiles \ consul; 4.CMD Démarrage: Consulagent-DEV5. Ouvrez l'URL: http: // localhost: 8500, vous pouvez voir l'interface et l'interface découverte par les services connexes.
Comment faire écho aux balises HTML dans PHP
Sep 29, 2025 am 02:25 AM
Utilisez des devis simples ou échappés doubles pour sortir HTML en php. Il est recommandé d'envelopper des chaînes avec des devis simples pour éviter les conflits de citation d'attribut. Le contenu dynamique peut être généré en combinaison avec l'épissage variable ou la syntaxe Heredoc.
Comment créer une entrée téléphonique dans HTML
Oct 04, 2025 am 04:23 AM
Usetype = "tel" inhtmlinputtocreateatelephonefield, qui optimise laMobileKeyboardsAndimproveSuserexperiences; amélioretwithattributes-lingpattern, requis, maxlaning, andautocompleteforvalidation etvabilité.
Comment mettre en place automatiquement une vidéo muette en html
Oct 04, 2025 am 12:55 AM
Utilisez les propriétés de lecture automatique, muet et playSinline pour réaliser une lecture automatique silencieuse des vidéos HTML. La plupart des navigateurs modernes exigent que la vidéo soit muette pour jouer automatiquement, en muette rencontre cette condition, PlaySinline garantit que la lecture en ligne d'iossafari au lieu de l'écran complet, les commandes sont éventuellement utilisées pour afficher la barre de contrôle. Si vous avez besoin de réactiver le son, vous pouvez définir Video.Muted = false après l'interaction utilisateur via JavaScript. Lors du déclenchement par programme, il doit également être défini sur muet d'abord et capter les erreurs possibles. Ajoutez correctement ces propriétés et confirmez le chemin du fichier pour atteindre la lecture automatique silencieuse compatible compatible à disque croisée.
Comment désactiver un bouton dans HTML5
Oct 04, 2025 am 02:05 AM
Réponse: Utilisez l'attribut désactivé pour désactiver le bouton HTML5. L'ajout de désactivé directement à la balise de bouton peut le rendre gris et non cliable. Il prend en charge le contrôle dynamique via JavaScript, tel que document.getElementyId ("btn"). Disabled = false; et peut utiliser le CSS: pseudo-classe désactivé pour définir le style pour améliorer l'expérience utilisateur.
Quelle est la balise Meta de la fenêtre en HTML?
Sep 29, 2025 am 12:38 AM
TheViewportMetAtAntenSuresProperDisplayOnMobileSicesBySettingWidth = Device-WidthandInitial-Scale = 1,0, empêchant, non réadableContent et en permettant de répondre à la disposition des dressages.
Quel est le rôle du doctype dans html5
Sep 29, 2025 am 04:34 AM
Thehtml5DocTypeenSureSSTAndardsModeredering, empêchant la valeur de la manière d'IntusesAmpledClarationwithoutdtd, permet auxmenderfeaturesLeseMantagsandcanvas, et aPPPortSconsisteCrOwsSerctagsandcanvas.
Comment mettre en place une vidéo avec un son dans HTML5
Oct 05, 2025 am 04:10 AM
La réponse est que les navigateurs modernes bloquent par défaut les vidéos audio audio. Pour obtenir une lecture automatique inoubliable, les propriétés de lecture automatique et de malin peuvent être utilisées; Si la lecture sonore est requise, la lecture JavaScript doit être déclenchée par l'interaction utilisateur (telles que les clics), et il peut être déterminé s'il est bloqué en détectant l'état de la promesse de lecture. Certains sites Web adoptent d'abord la stratégie de la lecture des sourcils, puis permettant aux utilisateurs d'allumer le son pour améliorer l'expérience.
