Etiqueta HTML <mark>
La etiqueta <mark> es uno de los elementos HTML5. Marca una parte del texto que tiene relevancia. Se puede usar para resaltar texto y mostrar énfasis, resaltar términos de búsqueda en los resultados para proporcionar contexto; o distinguir nuevo contenido añadido por el usuario mostrándolo de manera diferente.
En Chrome y Firefox, el contenido de la etiqueta se marca en amarillo, pero se puede cambiar con la propiedad CSS background-color.
TIP
La etiqueta <mark> no tiene semántica estructural, pero sí transmite relevancia o urgencia a las tecnologías de asistencia. Para mostrar la importancia del texto marcado, utiliza las etiquetas <strong> o <em>.
TIP
Nunca uses la etiqueta <mark> para resaltado de sintaxis. Para ello, puedes usar la etiqueta HTML <span> con las propiedades CSS adecuadas.
La etiqueta <mark> se puede usar para indicar una parte específica del contenido relevante para la actividad actual del usuario, como indicar las palabras que coinciden con una operación de búsqueda.
Sintaxis
La etiqueta <mark> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<mark>) y cierre (</mark>).
Ejemplo de la etiqueta HTML <mark>:
Etiqueta HTML <mark>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Resultado
La etiqueta <mark> y otras etiquetas HTML
A continuación se presenta una lista de algunos elementos HTML que tienen similitudes con el elemento <mark>. Repasemos cada uno de ellos.
La etiqueta HTML <strong>
Puedes usar la etiqueta <strong> para indicar texto o parte del texto que es muy importante. Por ejemplo, un error o una advertencia. Aparecerá en negrita.
La etiqueta HTML <b>
La etiqueta <b> tiene algunas similitudes con <strong>. También aparece en negrita. La principal diferencia es que el elemento <b> no indica ninguna importancia. Se usa con fines de diseño.
La etiqueta HTML <em>
Usamos la etiqueta <em> para enfatizar una palabra específica. Aparece en cursiva.
Atributos
La etiqueta <mark> admite los atributos globales y los atributos de eventos.
Cómo dar estilo a una etiqueta HTML <mark>
Puedes cambiar el fondo amarillo predeterminado usando la propiedad CSS background-color:
mark {
background-color: #ffeb3b;
color: #333;
}Práctica
¿Cuál es el propósito de la etiqueta HTML <mark>?