La etiqueta <mark> resalta partes del texto con las que el usuario está trabajando actualmente y que son importantes para él. Visualmente, el contenido de la etiqueta se ve como marcado con un marcador.

Puedes usar la etiqueta <mark> para resaltar los resultados de una búsqueda en una página, o para resaltar la fecha actual en un calendario, por ejemplo.

En los navegadores Chrome y Firefox, el contenido de la etiqueta se resalta con un fondo amarillo, pero esto se puede cambiar usando la propiedad CSS background-color.

La etiqueta <mark> no contiene contexto semántico. Para enfatizar la importancia del texto resaltado, se usan las etiquetas de marcado semántico <strong> o <em>.

Sintaxis

El contenido de la etiqueta se escribe entre las etiquetas de apertura (<mark>) y cierre (</mark>).

Ejemplo

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Título del documento</title>
  </head>
  <body>
    <p>Aprende el lenguaje de marcado de hipertexto HTML en el sitio <mark>W3Docs.com</mark>.</p>
  </body>
</html>
Ejemplo de salida de etiqueta HTML mark
Ejemplo de salida de etiqueta HTML mark

¡Inténtalo tú mismo!

See the Pen Ejemplo_Tag_mark by Alex (@htmldesdecero) on CodePen.

Nota

  • La etiqueta HTML <mark> se encuentra dentro de la etiqueta <body>.
  • La mayoría de los navegadores mostrarán la etiqueta <mark> con un fondo amarillo, pero puedes cambiar este comportamiento con CSS.
  • La etiqueta <mark> define texto que tiene relevancia y no está pensada para usarse simplemente para aplicar un estilo de resaltador. Si deseas darle estilo a tu texto para que parezca resaltado, usa en su lugar una etiqueta <span> con el CSS adecuado.

Atributos

La etiqueta <mark> admite atributos globales y atributos de eventos.

¿Cómo agregar estilo a la etiqueta <mark>?

Propiedades comunes para cambiar la intensidad visual / resaltado / tamaño del texto dentro de la etiqueta <mark>:

  • Propiedad CSS font-style: establece el estilo de la fuente: normal | italic | oblique | initial | inherit
  • Propiedad CSS font-family: crea una lista prioritaria de nombres de familias de fuentes y / o un nombre general de fuentes para los elementos seleccionados.
  • Propiedad CSS font-size: establece el tamaño de la fuente.
  • Propiedad CSS font-weight: establece la intensidad de la fuente.
  • Propiedad CSS text-transform: establece el registro del texto (letras mayúsculas o minúsculas).
  • Propiedad CSS text-decoration: establece el formato del texto. Es una propiedad abreviada para text-decoration-line, text-decoration-color, text-decoration-style.

Color del texto dentro de la etiqueta <mark>:

  • Propiedad CSS color: define el color del contenido y el formato del texto.
  • Propiedad CSS background-color: establece el color de fondo del elemento.

Estilos de formato de texto para la etiqueta <mark>:

  • Propiedad CSS text-indent: indica el tamaño del sangrado de la primera línea en un bloque de texto.
  • Propiedad CSS text-overflow: indica cómo se mostrará al usuario el texto en línea que excede los límites del bloque.
  • Propiedad CSS white-space: indica cómo se mostrarán los espacios en blanco dentro del elemento.
  • Propiedad CSS word-break: indica el salto de línea.

Otras propiedades para la etiqueta <mark>:

  • Propiedad CSS text-shadow: agrega una sombra al texto.
  • Propiedad CSS text-align-last: alinea la última línea del texto.
  • Propiedad CSS line-height: establece el interlineado.
  • Propiedad CSS letter-spacing: establece el espacio entre las letras / símbolos en el texto.
  • Propiedad CSS word-spacing: establece el espacio entre las palabras en el texto.
5/5 - (1 voto)