Publié le 23 avril 2024, modifié le 13 mai 2024 par Lucie Blanchard

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

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 :

  • Désencombrer les interfaces
  • Prioriser le contenu
  • Créer un design réactif
  • 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é.

    affichage : aucun ;

    dans votre code HTML

    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é

    visibilité : cachée ;

    opacité : 0 ;

    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  :

  • Interactions avec les utilisateurs: Comme cliquer sur un bouton, survoler un élément ou soumettre un formulaire. Par exemple, masquer un formulaire après sa soumission pour afficher un message de réussite
  • Conditions de chargement des pages: définissez les éléments à apparaître ou à disparaître en fonction des situations de chargement de la page. Comme l'heure de la journée ou la localisation de l'utilisateur
  • Réponses aux données: modifiez la visibilité du contenu en réponse à l'affichage des animations de chargement en attendant les données. Vous pouvez ensuite les masquer une fois que les données apparaissent
  • Masquage du contenu pour les navigateurs mais pas pour les lecteurs d'écran

    position : absolue ;

    gauche  : -10 000 px ;

    haut : automatique ;

    largeur  : 1 px ;

    hauteur  : 1 px ;

    débordement caché;

    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

    audit de site pour vous aider à configurer l'audit du site Cet onglet vous montrera les problèmes avec votre site Web 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 ?

  • Lorsque nous avons une connexion internet lente, voir le contenu web en cache peut nous permettre de le consulter plus rapidement. 2. Si le site web que nous voulons visiter est momentanément indisponible, accéder à sa version en cache peut nous éviter d'attendre qu'il soit à nouveau accessible.

    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.

    Categories: Interview

    Lucie Blanchard

    Lucie Blanchard

    S’abonner
    Notification pour
    guest

    Commentaires
    Commentaires en ligne
    Afficher tous les commentaires
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x