La Etiqueta MARK

La etiqueta <mark> se utiliza para resaltar fragmentos de texto que son relevantes en un contexto específico. Es un elemento semántico que indica que el contenido marcado tiene importancia o relevancia temporal, como resultados de búsqueda, términos clave en un tutorial, o citas destacadas.

Características clave:

• Por defecto, los navegadores aplican un estilo de fondo amarillo al texto: <mark>ejemplo</mark>.

• Es útil para mejorar la accesibilidad, ya que los lectores de pantalla pueden anunciar el texto resaltado.

• No confundir con <strong> (importancia) o <em> (énfasis).

Sintaxis básica

<p>
  Este es un texto normal, pero <mark>este fragmento está resaltado</mark>.
</p>

Resultado:

Este es un texto normal, pero este fragmento está resaltado.

Casos de uso comunes

Resaltar resultados de búsqueda

Cuando un usuario busca una palabra en tu sitio, puedes marcar las coincidencias:

<p>
  Resultados para "HTML":
  En <mark>HTML</mark>, la etiqueta <mark>&lt;mark&gt;</mark> es útil para destacar contenido.
</p>

Resultado:

Resultados para "HTML":

Destacar términos clave en tutoriales

<p>
  Para crear un botón en HTML, usa la etiqueta <mark>&lt;button&gt;</mark>.
</p>

Citas o referencias

<blockquote>
  "La creatividad es la inteligencia divirtiéndose."  
  <footer>— <mark>Albert Einstein</mark></footer>
</blockquote>

Personalización con CSS

Aunque el estilo por defecto es un fondo amarillo, puedes modificarlo:

mark {
  background-color: #7fffd4; /* Color turquesa */
  color: #333;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
}

/* Efecto de resaltado animado */
mark.highlight {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { background-color: #7fffd4; }
  50% { background-color: #00ffaa; }
  100% { background-color: #7fffd4; }
}

Ejemplo con CSS personalizado:

<mark style="background: #7fffd4; color: #333; padding: 2px 5px; border-radius: 3px; font-weight: bold;">Texto resaltado</mark>

Accesibilidad y buenas prácticas

No abuses del resaltado: Usa <mark> solo cuando el texto tenga relevancia contextual.

Combínalo con ARIA: Si el resaltado es dinámico (ej: búsqueda), añade role="mark" para claridad:

<mark role="mark" aria-label="Coincidencia de búsqueda">HTML</mark>

Navegadores antiguos: Todos los navegadores modernos soportan <mark>, pero en IE8 o inferior, agrega un polyfill CSS:

mark {
  background: yellow;
}

Errores comunes

Usar <mark> para decoración:
Si el resaltado es puramente visual (sin significado semántico), usa CSS en su lugar:

<!-- Incorrecto -->
<mark style="background: pink;">Texto decorativo</mark>

<!-- Correcto -->
<span class="decorativo">Texto decorativo</span>

Anidar elementos de bloque:
<mark> es un elemento en línea, así que evita envolver párrafos o listas:

<!-- Incorrecto -->
<mark>
  <p>Texto resaltado</p>
</mark>

Ejemplo avanzado: Resaltado dinámico con JavaScript

Puedes usar <mark> junto a JavaScript para resaltar términos buscados por el usuario:

<input type="text" id="buscar" placeholder="Buscar...">
<button onclick="resaltar()">Resaltar</button>

<p id="texto">
  Este es un texto de ejemplo donde puedes buscar palabras clave.
</p>

<script>
  function resaltar() {
    const termino = document.getElementById('buscar').value;
    const textoOriginal = document.getElementById('texto').innerHTML;
    const regex = new RegExp(termino, 'gi');
    const textoResaltado = textoOriginal.replace(regex, '<mark>$&</mark>');
    document.getElementById('texto').innerHTML = textoResaltado;
  }
</script>

Casos de uso reales

• Buscadores internos: Resaltar coincidencias en resultados.

• Educación: Destacar errores o aciertos en ejercicios interactivos.

• Documentación técnica: Marcar cambios en código o comandos importantes.

Conclusión

La etiqueta <mark> es una herramienta sencilla pero poderosa para mejorar la usabilidad y accesibilidad de tus contenidos. Úsala estratégicamente para guiar la atención del usuario hacia información relevante sin sacrificar la semántica de tu HTML. ????