Comment utiliser le html5 & lt; Mark & ​​gt; élément pour mettre en surbrillance le texte?

Soulignation du texte avec l'élément HTML5 <mark></mark>

L'élément HTML5 <mark></mark> est conçu spécifiquement pour mettre en évidence le texte, indiquant qu'il a été marqué ou mis en évidence pour une raison quelconque. Il est sémantiquement significatif, contrairement à l'utilisation du CSS pour changer la couleur du texte. Pour l'utiliser, vous enveloppez simplement le texte que vous souhaitez mettre en surbrillance dans les balises d'ouverture et de fermeture <mark></mark> . Par exemple:

 <code class="html"><p>This is some text. <mark>This text is highlighted.</mark> This is more text.</p></code>

Cela rendra le texte "Ce texte est mis en surbrillance" avec un point fort de fond jaune par défaut, généralement appliqué par le navigateur de l'utilisateur. Le style par défaut du navigateur est généralement un fond jaune subtil, ce qui fait que le texte en surbrillance se distingue facilement sans être trop distrayant. Il s'agit d'un aspect clé de sa conception - pour fournir un signal visuel clair sans perturber la lisibilité globale du contenu. Vous n'avez pas besoin d'attributs spéciaux ou de javascript pour le faire fonctionner; C'est une façon sémantique simple et sémantique de mettre en évidence le texte.

Considérations d'accessibilité pour l'élément <mark></mark>

L'utilisation correcte de l'élément <mark></mark> est cruciale pour l'accessibilité. Son objectif principal est d'indiquer que le texte en surbrillance est significatif d'une manière ou d'une autre, peut-être parce qu'il s'agit d'un résultat de recherche, d'une partie du texte sélectionnée par l'utilisateur ou d'une correction. Les lecteurs d'écran et d'autres technologies d'assistance interprètent l'élément <mark></mark> en conséquence, en transmettant l'importance du texte en surbrillance pour les utilisateurs handicapés.

Cependant, il est essentiel de fournir un contexte suffisant. Le simple fait de mettre en évidence le texte sans explication peut être déroutant. Envisagez d'utiliser l'attribut aria-label pour fournir des informations supplémentaires aux technologies d'assistance si le contexte n'est pas immédiatement apparent à partir du texte environnant. Par exemple:

 <code class="html"><p>The search term "HTML" yielded these results: <mark aria-label="Search result: HTML">HTML</mark> is a markup language.</p></code>

Cela ajoute une couche supplémentaire d'informations pour les lecteurs d'écran, expliquant la raison de la mise en évidence. Évitez de trop utiliser <mark></mark> , car une mise en évidence excessive peut rendre le contenu écrasant et difficile à comprendre pour tout le monde, y compris les utilisateurs de technologies d'assistance. La surutilisation peut également diluer la signification du point culminant lui-même. Utilisez-le judicieusement et délibérément pour maintenir l'accessibilité et une communication claire.

Styliser l'élément <mark></mark>

Bien que le navigateur fournit un style par défaut pour l'élément <mark></mark> , vous pouvez personnaliser son apparence à l'aide de CSS. Cela vous permet d'adapter la mise en évidence pour correspondre à la conception de votre site Web ou pour fournir un meilleur contraste aux utilisateurs ayant des déficiences visuelles. Vous pouvez cibler directement l'élément <mark></mark> en utilisant son nom de balise:

 <code class="css">mark { background-color: #FFD700; /* Gold */ color: #000000; /* Black text */ padding: 0.2em; /* Add some padding */ }</code>

Cet extrait CSS modifie la couleur d'arrière-plan en or, définit la couleur du texte en noir pour un meilleur contraste et ajoute un rembourrage pour une meilleure lisibilité. N'oubliez pas de considérer les rapports de contraste des couleurs pour assurer une visibilité suffisante pour les utilisateurs ayant des déficiences visuelles. Des outils sont disponibles en ligne pour vous aider à vérifier vos ratios de contraste de couleur. Évitez les couleurs trop vives ou distrayantes qui pourraient entraver la lisibilité. Un style cohérent sur votre site Web contribuera à une meilleure expérience utilisateur.

Différences par rapport aux autres méthodes de mise en évidence du texte

L'élément <mark></mark> se distingue des autres méthodes de mise en évidence du texte principalement à travers sa signification sémantique. Contrairement à l'utilisation de <span></span> avec des styles CSS en ligne pour la mise en évidence, <mark></mark> découvert explicitement que le texte est mis en évidence pour une raison spécifique. Cette différence sémantique est cruciale pour l'accessibilité et le référencement.

D'autres méthodes, telles que l'utilisation de balises audacieuses ( <strong></strong> ) ou italiques ( <em></em> ), transmettent l'accent ou l'importance, mais pas nécessairement en mettant en évidence. Ces balises ont des significations sémantiques spécifiques liées à l'importance du texte, et non au fait qu'elle est mise en évidence. Par conséquent, l'utilisation de <mark></mark> pour la mise en évidence est sémantiquement plus précise et fournit un meilleur contexte pour les technologies d'assistance et les moteurs de recherche. L'utilisation <mark></mark> aide à maintenir la séparation des préoccupations entre la présentation (style CSS) et la sémantique (structure HTML).

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!