Etiqueta mark en HTML: resaltar texto por su relevancia

La etiqueta <mark> en HTML representa texto resaltado por su relevancia en un contexto, por ejemplo una palabra que coincide con una búsqueda. Úsala para señalar qué parte de un resultado responde a la consulta del lector o qué fragmento de un texto estás comentando. Su significado depende de esa relación, no del color que le des.

Ejemplo mínimo de mark

<p>Resultado: aprende a crear <mark>formularios</mark> en HTML.</p>

Verás la frase completa y la palabra «formularios» resaltada, habitualmente con fondo amarillo y texto negro si no hay estilos que cambien la presentación. El resto del párrafo conserva su apariencia. Este ejemplo supone que esa palabra es relevante para la consulta del lector.

Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guárdalo y ábrelo en el navegador. Si retiras <mark> y </mark> conservando la palabra, la frase seguirá diciendo lo mismo, pero perderá la marca semántica y el resaltado habitual.

Sintaxis y contexto válido

Escribe una apertura <mark> y un cierre </mark>: ninguno se puede omitir. El elemento admite contenido de frase, como texto y otros elementos que forman parte de una frase. Puedes colocarlo dentro de un párrafo, un encabezado o un elemento de lista; no debe envolver párrafos ni listas completas. Para resaltar fragmentos de varios párrafos, escribe una marca dentro de cada uno.

El HTML Living Standard define su contenido y significado. El fondo amarillo no es un requisito de HTML. Puedes modificarlo con CSS y conservar la relevancia del fragmento, igual que una marca puede tener significado aunque los estilos eliminen su diferencia visual.

Si señalas una parte de una cita para comentarla, aclara que el resaltado es tuyo cuando esa distinción afecte a la interpretación. No atribuyas al autor original una marca añadida durante tu análisis.

Relevancia frente a importancia y énfasis

Elige la etiqueta según el motivo por el que destacas el texto:

• <mark> identifica lo relevante para una actividad actual: «formulario» dentro de los resultados de esa búsqueda.
• <strong> expresa importancia, gravedad o urgencia: «Guarda los cambios antes de cerrar» en una advertencia.
• <em> marca énfasis que cambia el sentido de una frase: «Debes revisar este formulario» para distinguirlo de otro.

Una coincidencia de búsqueda no se convierte en una advertencia por aparecer resaltada. Tampoco la negrita, la cursiva o el amarillo bastan para elegir una etiqueta. Si solo quieres una decoración sin relevancia contextual, usa un contenedor como <span> con CSS.

Caso práctico: tres resultados de búsqueda

Esta página muestra resultados preparados por el autor para la consulta «formulario». Cada resultado contiene una coincidencia exacta; la consulta aparece en texto y las marcas tienen un borde además del fondo. Guarda el código completo en UTF-8 como resultados.html y ábrelo en el navegador:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resultados para formulario</title>
    <style>
      body {
        margin: 1rem;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
      }
      li {
        margin-block: 0.75rem;
      }
      mark.coincidencia {
        color: #17221c;
        background-color: #ffe599;
        border-bottom: 2px solid currentColor;
      }
    </style>
  </head>
  <body>
    <h1>Resultados de búsqueda</h1>
    <p>Consulta: «formulario». Tres resultados contienen esa palabra.
      Las coincidencias aparecen resaltadas y con un borde inferior.</p>
    <ul>
      <li>Crear un <mark class="coincidencia">formulario</mark> de contacto.</li>
      <li>Validar los campos de un <mark class="coincidencia">formulario</mark>.</li>
      <li>Enviar un <mark class="coincidencia">formulario</mark> al servidor.</li>
    </ul>
  </body>
</html>

Verás el encabezado, la consulta y tres resultados de muestra. Solo las coincidencias de «formulario» tendrán el fondo y el borde definidos. Puedes abrir el archivo directamente en el navegador.

Para comprobar qué aporta cada parte:

1. Cambia background-color a transparent: desaparecerá el fondo, pero quedarán el borde, el texto y los elementos <mark>.
2. Retira el bloque <style>: las coincidencias volverán al resaltado predeterminado del navegador. La consulta y los tres resultados seguirán legibles.
3. Retira las etiquetas <mark> conservando sus palabras: desaparecerán las marcas y sus estilos. La consulta visible seguirá explicando por qué se muestran esos resultados.

<mark> no realiza la búsqueda. Si cambias la consulta a «contacto», el navegador no trasladará las marcas: tendrás que seleccionar los resultados pertinentes y marcar las nuevas coincidencias. En una aplicación, ese trabajo lo prepara el servidor o un script. <search> puede agrupar contenido de búsqueda o filtrado, pero tampoco implementa por sí mismo el buscador.

Atributos y accesibilidad

<mark> no tiene atributos específicos vigentes; admite los atributos globales de HTML. class="coincidencia" permite seleccionar las marcas del ejemplo con CSS. id identifica un fragmento y debe ser único en el documento. lang indica el idioma si un fragmento cambia respecto al que hereda de su contexto.

Para cambiar los colores, usa las propiedades CSS color y background-color, como en la clase .coincidencia del ejemplo.

Comprueba el contraste entre texto y fondo al cambiar los colores, incluidos los estilos del sitio que puedan sobrescribirlos. El borde del ejemplo aporta otra señal visual, y la consulta escrita mantiene el contexto sin depender solo del color. Si la relevancia comunica información esencial distinta de una consulta visible, explícalo también con texto.

Los lectores de pantalla pueden omitir el anuncio del resaltado; MDN describe esta limitación. La consulta visible ayuda a entender por qué se han seleccionado los resultados, incluso sin percibir las marcas.

Errores frecuentes y preguntas

¿Mark y strong significan lo mismo? No: relevancia contextual frente a importancia. Usa <strong> para una advertencia importante aunque el lector no esté buscando ninguna palabra.

¿Por qué no veo el amarillo? Comprueba primero que el elemento contiene texto y que tiene su cierre. Después inspecciona las reglas CSS de background-color y color: un fondo transparente o igual al del entorno puede ocultar la diferencia visual. La etiqueta no exige amarillo.

Evita usar <mark> en cada palabra llamativa o en todos los títulos. Si casi todo está marcado, resulta difícil identificar las coincidencias. Para colorear categorías de una sintaxis usa <span> con CSS; para señalar el fragmento concreto que estás examinando, <mark> puede ser adecuado.

Compatibilidad y fuentes

<mark> está ampliamente disponible en los navegadores actuales, según la referencia y compatibilidad de MDN. El soporte del elemento y su presentación visual no garantizan un anuncio uniforme mediante tecnologías de asistencia.

Fuentes consultadas el 3 de octubre de 2026: HTML Living Standard para significado, sintaxis y atributos; MDN para presentación, accesibilidad y compatibilidad. Los ejemplos usan HTML estático y CSS, sin APIs de búsqueda.