La etiqueta mark HTML5 sirve para representar un texto relevante, este puede ser importante o no dentro del contexto de la página. No confundir con la etiqueta strong que indica enfasis e importancia.
Por ejemplo, podremos usar mark cuando tengamos que resaltar el texto relevante en un listado de resultados de búsquedas para facilitar su visualización.
Otras etiquetas interesantes con similar funcionamiento son:
- bdi que sirve para aislar el texto y respetar su orientación de derecha a izquierda.
- wbr para realizar saltos de línea condicionales en los párrafos.
Otro elemento interesante es la etiqueta template.
Sintaxis de la etiqueta mark HTML5
Veamos la sintaxis HTML5 extraída de su web oficial:
|
1 |
<mark>Texto resaltado</mark> |
Tal y como se puede ver en la sintaxis esta nueva etiqueta engloba entre sus tags el texto a resaltar.
Ejemplo de la etiqueta mark HTML5
En las primeras líneas de este post indiqué que la funcionalidad de esta etiqueta es la de resaltar textos. Dichos textos pueden ser las palabras de resultados de una búsqueda.
Hasta ahora se resaltaban con etiquetas span y similares, lo cual semánticamente no es correcto. Os pongo un ejemplo:
|
1 2 3 4 5 |
<h1>Has buscado: "Color"</h1> <ul> <li>El <mark>color</mark> de mis ojos es marrón</li> <li>Voy a pintar la pared de <mark>color</mark> blanco</li> </ul> |