Etiqueta HTML <mark>
La etiqueta HTML <mark> resalta texto como relevante en el contexto actual. Aprende sus usos, atributos y estilos con ejemplos.
La etiqueta <mark> es uno de los elementos HTML5. Marca un fragmento de texto como relevante o destacado como referencia, de la misma manera en que se pasaría un marcador fluorescente sobre las palabras en una página impresa. Los navegadores la renderizan con un fondo amarillo por defecto.
Esta página explica qué significa <mark> semánticamente, cuándo usarla en lugar de un simple <span>, los tres casos de uso clásicos y cómo se compara con <strong>, <b> y <em>.
¿Por qué <mark> y no un <span>?
Un <span> es un contenedor genérico sin significado — es únicamente un gancho de estilo. Podrías darle a un <span> un fondo amarillo y parecería resaltado, pero para un lector de pantalla, un motor de búsqueda o cualquier otra máquina seguiría siendo texto ordinario.
<mark> es diferente porque lleva semántica: le indica al navegador y a las tecnologías de asistencia "esta parte del texto es notable o relevante en el contexto actual". El resaltado forma parte del significado del documento, no solo de su apariencia.
Usa esta regla general:
- Si el resaltado transmite significado (este texto coincide con la búsqueda, este pasaje es el punto que se está haciendo) → usa
<mark>. - Si solo quieres un fondo de color para decoración → usa un
<span>con CSS.
Cuándo usar <mark>
La especificación describe tres escenarios principales:
- Resaltado de resultados de búsqueda. Marca las palabras en un pasaje que coinciden con lo que el usuario buscó, para que pueda localizar rápidamente el lugar relevante.
- Relevancia dentro de una cita. Cuando citas texto escrito por otra persona,
<mark>resalta la parte que es relevante para el motivo por el que estás citándolo — un énfasis que el autor original no añadió. - Contenido resaltado por el usuario. Representa texto que el lector ha resaltado, similar a la función de "resaltado" en una aplicación de lectura o anotación.
Nunca uses <mark> para resaltado de sintaxis o coloreado puramente visual. Para eso, usa un <span> con CSS apropiado.
Sintaxis
La etiqueta <mark> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<mark>) y de cierre (</mark>).
Ejemplo de la etiqueta HTML <mark>:
Etiqueta HTML <mark>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Resultado
Ejemplo real: resaltado de coincidencias de búsqueda
Imagina una página de resultados de búsqueda donde el usuario buscó la palabra highlight. Envuelves cada palabra coincidente en un párrafo con <mark> para que el resultado sea fácil de escanear. El siguiente ejemplo también personaliza el color de resaltado y añade una regla @media print, porque el fondo amarillo por defecto suele eliminarse al imprimir una página:
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
/* Custom highlight color instead of the default yellow */
mark {
background-color: #c8f7c5;
color: #14532d;
padding: 0 2px;
border-radius: 3px;
}
/* Make sure highlights are still visible when printed */
@media print {
mark {
background-color: transparent;
color: inherit;
text-decoration: underline;
}
}
</style>
</head>
<body>
<p>
You can <mark>highlight</mark> search terms so the user finds them
fast. Each <mark>highlight</mark> marks where the query matched.
</p>
</body>
</html><mark> y otras etiquetas HTML
Varios elementos HTML son similares a <mark> pero tienen significados diferentes. Elegir el correcto es importante para la accesibilidad y el SEO, ya que cada uno comunica una intención distinta a los navegadores y a las tecnologías de asistencia.
La etiqueta HTML <strong>
La etiqueta <strong> marca el texto como de importancia fuerte, seriedad o urgencia — por ejemplo, un error o una advertencia. Los navegadores la renderizan en negrita por defecto. Usa <strong> cuando el texto importa, no solo cuando deba resaltarse.
La etiqueta HTML <b>
La etiqueta <b> también renderiza en negrita, pero a diferencia de <strong> no transmite importancia. Llama la atención por razones estilísticas únicamente — como palabras clave o el nombre de un producto — sin implicar que el texto sea más significativo.
La etiqueta HTML <em>
La etiqueta <em> pone énfasis en una palabra, de la misma forma en que cambias el tono de voz al hablar. Se renderiza en cursiva por defecto y puede cambiar el significado de una oración.
En resumen: <mark> = relevante/resaltado aquí, <strong> = importante, <b> = negrita visual, sin significado, <em> = énfasis al hablar.
Atributos
La etiqueta <mark> no tiene atributos específicos — acepta únicamente los atributos globales y los atributos de evento.
Cómo aplicar estilo a una etiqueta HTML <mark>
Puedes cambiar el fondo amarillo por defecto usando la propiedad CSS background-color:
mark {
background-color: #ffeb3b;
color: #333;
}