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
<!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>
¡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 paratext-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.
Quiero comentar algo