Si alguna vez necesitas marcar texto dentro de un párrafo, mejor utiliza la etiqueta <mark>. Es la versión HTML de un resaltador amarillo. Siempre he utilizado una etiqueta <span> con algo de estilo CSS salpicado, sin darme cuenta de que existía esta opción más semántica. HTML5 está lleno de todo tipo de bondades, estoy en lo cierto 😆
<p> <mark>Highlight</mark> text with HTML <mark> tag</p>Por defecto <mark> styling
El color de fondo por defecto de <mark> es amarillo.
<p> <mark>Default Yellow Highlight</mark></p>Salida
Estilos personalizados <marca> con CSS
Por supuesto, como cualquier etiqueta HTML de texto, puedes aplicar estilos personalizados con CSS. Puedes pensar en ello de forma similar a como estilizarías una etiqueta <p>.
mark { background: red; color: white;}Salida
<mark> vs Otras etiquetas HTML de texto
strong
<strong> se utiliza para indicar un texto que tiene una importancia más fuerte que el texto circundante, como una advertencia o un error. Semánticamente, su importancia. Aparece como negrita
b
<b> es muy similar a <strong> ya que también aparece como negrita. Sin embargo, a diferencia de ésta, no transmite realmente ninguna importancia y es más una cosa estilística que semántica.
em
<em> se utiliza para remarcar el énfasis en una palabra concreta. Aparece como una cursiva
marca
<mark> se limita a resaltar la relevancia de un determinado fragmento de texto. Antes de la existencia de esta etiqueta, muchos han utilizado em o strong para dar al contenido resaltado algún significado semántico. Pues ya no. Si necesitas resaltar, usa esta etiqueta 🌟
Por qué es importante la etiqueta HTML semántica
La razón por la que no usas simplemente las etiquetas <div> en todas partes es porque no son semánticas. Puede que seas como yo cuando empecé a aprender a programar: a quién le importa ser semánticamente correcto 🙄. Error ❌. De hecho, ¡los motores de búsqueda como Google lo hacen! Porque la semántica transmite el significado de tu sitio. Cuando los robots de búsqueda rastreen tu sitio, sabrán lo que hay. En otras palabras, ding ding ding en su SEO u optimización de motores de búsqueda 🏆
Otra razón para ser semánticamente correcto es para la accesibilidad. Muchas de las herramientas de accesibilidad se basan en la semántica de las etiquetas para convertir tu sitio en significado para el usuario humano que lo utiliza (es decir, lectores de pantalla). He aquí una analogía. Recuerde que en los días, cuando tenemos el ordenador leer el texto de un sitio. Sonaba súper robótico y extraño 🤖. Sin la semántica adecuada, es así. Funciona, claro, pero la experiencia auditiva es terrible 😱. Sin embargo, cuando se utiliza la semántica adecuada, es como escuchar a Siri. Suena mucho más humano porque tiene toda la inflexión diferente, los cambios de tono, e incluso saber cuándo hacer una pausa. Y este es el tipo similar de mejor experiencia que se puede lograr cuando se utilizan etiquetas HTML semánticamente correctas 👍
Etiqueta HTML5 y SEO
Sin embargo, quiero señalar una cosa.
John Mueller de Google mencionó esto en una respuesta en Twitter:
Ciertamente tiene sentido usar HTML5 correctamente si puedes, no hay ninguna desventaja de SEO al hacerlo :).
Esto es lo que deduzco de esto. Tanto si usas etiquetas HTML5 como si no, no perjudicará tu posicionamiento en los resultados de búsqueda de Google. Sin embargo, ¿significa eso que debes usar las etiquetas HTML5. En absoluto. Las ventajas de la accesibilidad siguen estando ahí. Y algunas etiquetas HTML5 tienen un comportamiento realmente interesante en el navegador y abre a tu usuario a una función más avanzada que antes no tenía 🤩
Preocupaciones de accesibilidad
Muy bien, espero haberte transmitido con éxito la importancia de las etiquetas HTML semánticas. Y ahora puedes entender cómo <mark> no es simplemente para dar estilo a los textos, sino que es semánticamente algo bueno.
¡Pero! hay cierta preocupación con su accesibilidad. Por desgracia, el uso de la etiqueta <mark> no es anunciado por la mayoría de los lectores de pantalla en su configuración por defecto. Pero buenas noticias, hay una manera de evitarlo. Puedes usar la propiedad de contenido CSS y el pseudo-elemento para hacer un anuncio.
mark::before { content: " ";}mark::after { content: " ";}/* Hide the text created in the CSS content property */mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}Entonces lo que el lector de pantalla hará aquí. Cuando encuentre texto envuelto en la etiqueta <mark>, anunciará «inicio de resaltado» seguido del texto dentro de la etiqueta. y luego anunciará «fin de resaltado» una vez que la etiqueta de marca termine.
PERO…
Tenga en cuenta: si tiene muchos de estos «anuncios», puede ser muy verboso y añadir información innecesaria a veces molesta. Lo que puede hacer que algunos usuarios de lectores de pantalla desactiven esta función. Así que, la lección aquí es. «Un gran poder conlleva una gran responsabilidad 🕷». No abuses de esta técnica y SOLO aplícala en los casos en los que NO conocer el contenido resaltado pueda afectar negativamente a la comprensión del usuario.
Caso de uso para <marcar>
¡Ahora viene lo divertido! Veamos algunos casos de uso para <mark>:
Caso de uso: Resultado de búsqueda
Aquí tienes uno muy popular. Puedes usarlo para destacar el término que un usuario ha buscado.
<p>Search Result for "Vue"</p><hr><p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>Salida
Caso de uso: Citas
Es estupendo proporcionar resaltados para la cita (<q>) y la cita en bloque (<blockquote>).
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>Salida
