Qu'est-ce qu'un élément HTML masqué ?
Un attribut HTML masqué indique que l'élément n'est pas encore ou plus pertinent. Si vous marquez un élément comme « masqué », vous indiquez aux navigateurs de ne pas l'afficher aux utilisateurs. Même s'ils utilisent des lecteurs d'écran. L'attribut masqué ressemble à ceci :Ce texte doit être masqué.
Ce texte ne doit pas être masqué.
Dans l'exemple ci-dessus, le navigateur n'affichera pas la première ligne de texte. Mais cela afficherait la deuxième ligne. L'attribut HTML hide permet aux développeurs de contrôler la visibilité des éléments sur une page. Cela peut aider à rationaliser l'expérience utilisateur en empêchant le contenu non pertinent d'encombrer la page Web jusqu'à ce que ce contenu devienne pertinent. Ou jusqu'à ce qu'un utilisateur interagisse avec des parties spécifiques de la page. Par exemple, si l'utilisateur clique sur un bouton ou sur un menu déroulant. Cette action pourrait déclencher le code JavaScript pour supprimer l'attribut masqué et révéler le contenu. L'attribut HTML masqué n'est peut-être pas le bon choix dans toutes les situations. Nous explorerons d'autres techniques plus loin dans l'article.
Comment utiliser l'attribut HTML masqué
Vous pouvez appliquer l'élément HTML hide dans le balisage HTML d'un composant pour le rendre invisible sur la page Web. Pour ce faire, ajoutez « caché » à l'élément que vous souhaitez masquer. Voici à quoi cela pourrait ressembler pour un titre et un paragraphe que vous souhaitez masquer :
Ce titre est masqué
Ce texte est également masqué
Cet attribut fonctionne sur les principaux navigateurs, notamment Chrome, Edge, Firefox et Safari.
Comment fonctionne l'attribut HTML Masquer
L'attribut HTML hide rend tout élément de page Web invisible pour les utilisateurs sans le supprimer du document HTML. Vous permettant de contrôler la visibilité du contenu sur une page. L'ajout de l'attribut masqué à un élément entraîne le navigateur à appliquer la propriété CSS suivante : display : aucun ; La page s'affiche comme si l'élément n'existait pas, le rendant invisible pour le spectateur. . Cependant, l'élément existe toujours dans le DOM (Document Object Model), ce qui signifie que vous pouvez y accéder et le manipuler à l'aide de JavaScript. Supposons que vous ayez une page Web avec un bouton « Lire la suite ». Vous pouvez marquer la section de contenu détaillé avec l'attribut masqué pour la rendre invisible. Ensuite, lorsque l'utilisateur clique sur le bouton « Lire la suite », une fonction JavaScript pourrait supprimer l'attribut masqué de la section de contenu détaillé, le rendant ainsi visible et accessible à l'utilisateur. L'attribut HTML « caché » est un attribut global, ce qui signifie que vous pouvez utilisez-le avec n'importe quel élément HTML. C'est aussi un attribut booléen. Il suffit donc qu'il soit présent sur l'élément pour prendre effet et ne nécessite pas de valeur spécifique.
Pourquoi voudriez-vous masquer un élément HTML ?
Apprendre à masquer des éléments HTML permet de :
Les éléments cachés vous permettent de minimiser les distractions sur une page pour présenter uniquement les informations les plus cruciales à vos utilisateurs. Par exemple, vous pouvez masquer des paramètres avancés ou des informations supplémentaires derrière des liens ou des boutons cliquables. Cela donne aux utilisateurs la possibilité de choisir s’ils souhaitent en savoir plus, sans quitter la page. Comme cette section de la page d'accueil de Semrush qui permet aux utilisateurs de sélectionner différents aspects de la suite d'outils pour en savoir plus : vous pouvez également attirer l'attention sur des informations cruciales ou des actions que vous souhaitez que les utilisateurs entreprennent en masquant des éléments moins importants. Par exemple, afficher bien en évidence un bouton d'inscription tout en masquant les FAQ détaillées sous les boutons déroulants. Pour mettre l'accent sur vos appels à l'action (CTA). Les utilisateurs peuvent toujours en savoir plus en cliquant sur les listes déroulantes. Vous pouvez également masquer les éléments HTML qui peuvent apparaître sur le bureau mais qui pourraient créer une expérience désordonnée sur mobile. Tels que des barres latérales ou des menus supplémentaires. L'attribut HTML hide est un moyen simple et sémantique d'indiquer qu'un navigateur ne doit pas afficher un élément. Mais d'autres techniques peuvent offrir plus de contrôle sur le masquage d'éléments et sur la manière dont ils affectent la mise en page et la visibilité de la page Web.
Autres techniques pour masquer des éléments dans la conception Web
Différentes techniques pour masquer des éléments dans la conception Web incluent l'utilisation de CSS et de JavaScript. Chaque approche offre des avantages uniques qui correspondent à des cas d'utilisation spécifiques. Le choix entre ces méthodes dépend de vos préférences, notamment de la manière dont les éléments doivent interagir avec la mise en page, si l'accessibilité est un problème et si vous avez besoin d'animations.
Utiliser l'affichage CSS
Vous pouvez utiliser la propriété « display » avec la valeur « none » pour masquer des éléments à l'aide de CSS. Cette méthode supprime l'élément du flux de documents, ce qui signifie qu'il ne prendra pas de place et sera invisible pour les utilisateurs. Il existe deux méthodes pour utiliser l'affichage CSS. La première se fait via CSS en ligne, où vous ajoutez un attribut « style » avec « display : none ; » dans votre élément HTML. Par exemple :Ce texte est masqué.
La deuxième méthode consiste à utiliser du CSS externe ou interne. Dans votre fichier CSS ou votre balise, ciblez l'élément que vous souhaitez masquer à l'aide d'une classe, d'un identifiant ou de n'importe quel sélecteur, et définissez « display : none ; » pour ce sélecteur. Par exemple :.texte-caché {
affichage : aucun ;
}Ensuite, dans votre code HTML, utilisez la classe « hidden-text » pour tout élément que vous souhaitez masquer :Ce texte est masqué.
Lorsque vous définissez un élément sur « display : aucun; » vous supprimez l'espace qu'il occuperait normalement et d'autres éléments peuvent se déplacer pour combler le vide. Éléments avec « affichage : aucun ; » la propriété n'apparaît pas pour les lecteurs d'écran et autres technologies d'assistance. Ainsi, le contenu est inaccessible aux utilisateurs utilisant ces technologies. Tenez compte des effets de l’utilisation de cette propriété pour vous assurer que vous ne masquez pas du contenu qui devrait être accessible à tous les utilisateurs.
Visibilité : Masquée et Opacité
La « visibilité : cachée » ; La propriété contient l'élément dans le flux de documents (occupant de l'espace) mais le rend invisible. Et les utilisateurs ne peuvent pas interagir avec lui. Cependant, « opacité : 0 ; » La propriété rend un élément entièrement transparent mais toujours interactif, et il prend toujours de la place. Voici un exemple de code CSS avec des propriétés de visibilité et d'opacité :.hidden-visibility {
visibilité : cachée ;
}
.transparent-opacité {
opacité : 0 ;
}Les deux éléments sont invisibles pour les utilisateurs. Les utilisateurs ne peuvent pas interagir avec l'élément .hidden-visibility, mais ils peuvent interagir avec l'élément .transparent-opacity. Pour la conception Web, « visibilité : cachée ; » est idéal pour conserver la structure de mise en page tout en masquant les éléments, car il préserve l'espace de l'élément. Vous pouvez utiliser « opacité : 0 ; » propriété lors de la création d’une transition en douceur vers l’invisibilité. Vous pouvez masquer des éléments avec « opacité : 0 ; » pour la créativité du design, mais cela peut dérouter les utilisateurs si vous ne le mettez pas en œuvre avec soin. Par exemple, les utilisateurs pourraient accidentellement cliquer sur un bouton entièrement transparent et accéder à une page qu'ils n'avaient pas l'intention de consulter. Les moteurs de recherche peuvent également envisager d'utiliser « opacité : 0 » ; pour cacher du contenu en tant que pratique de spam, surtout s'il s'agit d'une tentative de manipulation des classements. Cela pourrait avoir un impact négatif sur le classement de votre site Web ou entraîner des sanctions, comme le fait que le moteur de recherche supprime complètement votre page Web des résultats de recherche.Lectures complémentaires: Comment identifier et corriger une pénalité Google
Techniques JavaScript pour le masquage de contenu dynamique
JavaScript offre un moyen flexible d'afficher les éléments selon les besoins. Vous permettant d'afficher le contenu d'une page Web en fonction des interactions des utilisateurs ou de conditions spécifiques. JavaScript manipule les éléments HTML en modifiant leurs styles ou leurs attributs. Pour masquer des éléments, vous pouvez ajuster la propriété de style d'affichage sur « aucun » pour masquer un élément et la redéfinir sur « bloc » ou « en ligne » (selon la valeur d'affichage par défaut de l'élément) pour l'afficher. Quelques cas d'utilisation du masquage dynamique ou révélateur comprennent :
Dans la plupart des cas standards, le contenu que vous présentez aux utilisateurs sur les navigateurs doit être disponible pour ceux qui utilisent des appareils tels que des lecteurs d'écran. Il s'agit généralement d'une bonne pratique en matière d'accessibilité aux sites Web. Mais si vous souhaitez masquer le contenu pour les navigateurs mais pas pour les lecteurs d'écran, une option consiste à positionner le contenu hors écran. Vous ne devez pas faire cela pour les éléments navigables, comme les liens. Pour ce faire, créez d'abord une classe CSS comme ceci :.sr-only {
position : absolue ;
gauche : -10 000 px ;
haut : automatique ;
largeur : 1 px ;
hauteur : 1 px ;
débordement caché;
}Vous pouvez nommer la classe « .sr uniquement » autrement si nécessaire. Vous l'utiliserez pour positionner l'élément HTML que vous souhaitez masquer hors écran, comme ceci :Ce texte est masqué hors écran.Les lecteurs d'écran le liront comme si cela fait toujours partie du contenu de la page. Cependant, il sera positionné loin à gauche de l'écran, afin que les utilisateurs voyants ne le voient pas dans leur navigateur.
Les risques de masquer des éléments HTML
Un masquage incorrect d’éléments sur votre site Web pourrait avoir un impact négatif sur votre visibilité dans les résultats de recherche. Les moteurs de recherche peuvent considérer le contenu caché comme une tentative de manipuler les résultats de recherche en cachant le contenu aux utilisateurs mais en le présentant aux moteurs de recherche. Placer de grandes quantités de texte rempli de mots-clés hors écran ou utiliser CSS pour donner au texte la même couleur que l'arrière-plan étaient des techniques. Les spammeurs étaient employés aux débuts de Google. Mais les moteurs de recherche peuvent désormais considérer ces pratiques comme des tentatives de manipulation des classements, pouvant entraîner des sanctions. Soyez donc prudent lorsque vous masquez des éléments HTML. De plus, une mauvaise utilisation du code lorsque vous tentez de masquer des éléments peut entraîner des problèmes techniques avec votre site Web.
Résolvez les problèmes techniques de référencement avec l’audit de site
Des audits réguliers du site peuvent vous aider à identifier et à résoudre les problèmes de référencement. Y compris ceux qui pourraient survenir si vous faites des erreurs en essayant de masquer des éléments HTML. L'outil d'audit de site de Semrush aide à détecter les problèmes de référencement de votre site Web et fournit des recommandations sur la façon de les résoudre. Accédez à l'outil, entrez votre nom de domaine et appuyez sur le bouton « Démarrer l'audit« . Vous verrez un menu dans lequel vous pourrez configurer vos paramètres d'audit. Utilisez notre guide de configuration d'audit de site pour vous aider à configurer l'outil pour votre site Web. Lorsque vous êtes prêt, cliquez sur « Démarrer l'audit du site. »Une fois votre audit terminé, vous verrez un rapport détaillé sur la santé globale de votre site Web. Pour plus de détails, cliquez sur le «Problèmes« Onglet. Cet onglet vous montrera les problèmes avec votre site Web. Vous pouvez cliquez sur le « Pourquoi et comment y remédier» textez à côté de chaque problème pour en savoir plus et comment le résoudre. Résolvez les problèmes techniques de votre site en essayant gratuitement l'outil d'audit de site. Cet article a été mis à jour en 2024. Des extraits de l'article original de Connor Lahey peuvent rester.
FAQ
Quelle est la signification de l'état "en attente du cache" ?
L'état "en attente du cache" signifie que le système informatique est en train de chercher les données demandées dans la mémoire cache avant de les afficher. Cela peut permettre un accès plus rapide aux informations car elles sont déjà stockées temporairement.
Comment accéder aux fichiers cachés ?
Pour accéder aux fichiers cachés, il faut ouvrir l'explorateur de fichiers et cliquer sur "Affichage". Ensuite, sélectionner l'option "Options" puis aller dans l'onglet "Affichage".
Tout en bas, décocher la case "Masquer les fichiers protégés du système d'exploitation (recommandé)". Valider en cliquant sur "Appliquer" puis sur "OK". Les fichiers cachés seront alors visibles dans l'explorateur.
Comment activer le cache en écriture ?
Pour activer le cache en écriture, il faut d'abord accéder aux paramètres du système. Ensuite, chercher l'option de gestion du cache et la sélectionner.
Là, il suffit simplement de cocher la case qui active le cache en écriture pour que celui-ci soit activé. N'oubliez pas de sauvegarder les modifications avant de quitter les paramètres.
Pourquoi pourrait-on avoir besoin de voir le contenu web en cache ?
3. Parfois, des articles ou des vidéos intéressants peuvent être retirées du web, mais leurs versions en cache peuvent encore y être consultées. 4. En cas de problème technique sur un site, comme un bug ou une mise à jour qui ne fonctionne pas correctement, consulter sa version en cache peut permettre d'accéder au contenu souhaité sans difficulté.
Comment créer un cachet en ligne ?
Pour créer un cachet en ligne, il faut se rendre sur un site spécialisé dans la création de tampons ou faire appel à un prestataire. Ensuite, il suffit de choisir le modèle souhaité et de personnaliser les informations (nom, adresse, logo).
Une fois la commande passée et validée, le cachet sera fabriqué et livré à l'adresse indiquée. Il est également possible d'utiliser des logiciels ou applications en ligne pour créer soi-même son propre cachet électronique avec des fonctionnalités spécifiques.
