<mark>

<mark> marca texto resaltado o relevante en su contexto actual: el término que el usuario buscó y aparece en los resultados, la palabra que se está definiendo en el párrafo, la parte de una cita que importa para el punto que se está argumentando. El navegador lo renderiza con fondo amarillo por defecto.

La clave de <mark> es la palabra “contextual”: la relevancia que marca no es permanente ni inherente al texto, sino que depende de la situación. El término querySelector no está siempre resaltado — solo cuando fue lo que el usuario buscó, o cuando es el término que se está presentando en ese momento. En otro contexto, el mismo texto iría sin <mark>.

Eso lo distingue de <strong> (importancia permanente e inherente al contenido) y de <em> (énfasis de entonación que cambia el sentido). Si la relevancia del fragmento depende del contexto —de lo que el usuario buscó, de lo que la página está presentando ahora— es <mark>. Si la relevancia es del contenido mismo, independiente del contexto, es <strong>.

Cómo funciona

<mark> es un elemento en línea. Le comunica al agente de usuario y a las tecnologías de asistencia que ese fragmento de texto tiene relevancia contextual: fue buscado, es el término central de la sección, es la parte que el usuario debe notar en este momento. Esa relevancia es situacional — el mismo texto puede estar marcado en un resultado de búsqueda pero no en otro contexto.

El fondo amarillo por defecto se puede sobreescribir con CSS:

mark {
  background-color: #fef08a;
  color: #1c1917;
}

Modelo de contenido

Acepta contenido en línea (phrasing content). No puede contener elementos de bloque. Va dentro de párrafos, headings, <li>, <td>, o cualquier elemento que acepte contenido en línea.

Sintaxis

<!-- Resultado de búsqueda -->
<p>La función <mark>querySelector</mark> devuelve el primer elemento.</p>

<!-- Término que se define -->
<p>El <mark>box model</mark> describe cómo el navegador calcula el espacio que ocupa un elemento.</p>

<!-- Parte relevante en contexto -->
<p>De todos los pasos, el más crítico es <mark>verificar el exit code</mark>.</p>

Atributos

<mark> no tiene atributos propios. Acepta los atributos globales de HTML.

Accesibilidad

El rol implícito de <mark> es mark. Los lectores de pantalla pueden anunciar el inicio y fin del resaltado, aunque el soporte varía. Para garantizar que el contenido sea accesible sin depender solo del resaltado visual, asegurate de que el texto sea igualmente comprensible sin el color de fondo.

Cuándo usar <mark> vs. alternativas

Notas, gotchas e interacción

• <mark> es contextual, no permanente. La diferencia con <strong> es que <mark> depende del contexto: en un resultado de búsqueda, el término buscado es relevante; en otra página del mismo sitio, el mismo término no estaría marcado.
• No lo uses para énfasis de entonación. Para “esto cambia el sentido de la oración”, usá <em>. Para “esto es importante siempre”, usá <strong>.
• El fondo amarillo puede contrastar mal en modo oscuro. El color por defecto (mark { background-color: Mark; color: MarkText; }) en CSS System Colors intenta adaptarse, pero conviene definir el color explícitamente con media query prefers-color-scheme.

Vigente / legacy

<mark> es un elemento de HTML5, sin precedente en HTML 4. Está completamente vigente. No hay forma legacy.