Elemento mark en HTML

Elemento mark en HTML

El elemento <mark> se utiliza para resaltar texto que es relevante o importante en el contexto del contenido. Este elemento es útil para marcar partes de un texto que necesitan ser destacadas, como citas, términos clave o información importante.

Su uso frecuente es en:

• Fragmentos de texto que se desea resaltar.
• Términos importantes.
• Comparaciones o referencias dentro de un texto.

<p>El <mark>HTML semántico</mark> mejora la accesibilidad y el SEO.</p>

Ejemplos de uso

Resaltando coincidencias de búsqueda:

<p>
  Resultados para "programación":  
  Aprende <mark>programación</mark> desde cero con HTML.
</p>

Enfatizar diferencias

<p>El gato pesa 5kg, pero el <mark>perro</mark> pesa 20kg.</p>

Comparaciones dentro de un texto:

<p>
  En la <mark>primera</mark> guerra mundial, el uso de armas químicas fue devastador.
  En la <mark>segunda</mark> guerra mundial, la tecnología avanzó aún más.
</p>

Si solo se desea agregar la decoración del elemento mark, lo mejor es hacerlo con un span y CSS:

<p>
  El <span class="highlight">HTML semántico</span> mejora la accesibilidad y el SEO.
</p>
<style>
  .highlight {
    background-color: yellow;
    color: black;
  }
</style>