Etiqueta mark en HTML
¿Qué es la etiqueta <mark> en HTML?
La etiqueta HTML <mark> es una etiqueta de formato de texto que se utiliza para resaltar o resaltar un fragmento de texto dentro de un párrafo o una sección de una página web. Cuando se usa la etiqueta <mark>, el texto dentro de ella se mostrará en un fondo amarillo predeterminado en la mayoría de los navegadores web.
La etiqueta <mark> es útil para resaltar texto importante, como una palabra clave o un título, para hacerlo más visible y destacado. También se puede utilizar para resaltar texto que ha sido cambiado o editado, para indicar algo que necesita atención o para resaltar errores en un documento.
La etiqueta <mark> es una de las nuevas características introducidas en HTML5, lo que significa que algunos navegadores más antiguos pueden no reconocerla o no mostrarla correctamente.
Sin embargo, la mayoría de los navegadores modernos admiten la etiqueta <mark> y su uso se está volviendo cada vez más común en la construcción de sitios web.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <mark> en HTML5:
<p>El <mark>plazo de entrega</mark> para este producto es de dos días hábiles.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la frase “plazo de entrega” en una oración que indica cuánto tiempo tardará en llegar un producto.
Esto indica al usuario que esta información es importante y relevante para su decisión de compra.
Atributos
La etiqueta HTML <mark> no admite muchos atributos, ya que se utiliza principalmente para resaltar o destacar una sección de texto en una página web.
Los atributos principales que admite son los siguientes:
- class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <mark> y para agrupar varias etiquetas con el mismo estilo.
- id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <mark> también admite otros atributos opcionales, como “title”, que se utiliza para proporcionar información adicional sobre la sección de texto resaltada.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <mark>:
<p>La <mark class="importante">fecha límite</mark> para la presentación de solicitudes es el 31 de marzo.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la fecha límite para la presentación de solicitudes. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <mark>.
En la regla CSS definida, hemos aplicado un fondo amarillo y un borde negro alrededor del texto resaltado para indicar que es importante.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <mark> de HTML5:
Ejemplo 1: Utilizando la etiqueta <mark> para resaltar una sección de texto y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark</title>
<style>
.importante {
background-color: yellow;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>El <mark class="importante">plazo de entrega</mark> para este producto es de dos días hábiles.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la frase “plazo de entrega” en una oración que indica cuánto tiempo tardará en llegar un producto. Hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta <mark>.
En la regla CSS definida, hemos aplicado un fondo amarillo, un color negro y un peso de fuente negrita alrededor del texto resaltado para indicar que es importante.
Ejemplo 2: Utilizando la etiqueta <mark> dentro de un enlace <a> para resaltar una sección de texto y crear un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark en un enlace</title>
</head>
<body>
<p>Para obtener más información, visite nuestro sitio web <a href="https://www.ejemplo.com"><mark>www.ejemplo.com</mark></a>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <mark> dentro de un enlace <a> para resaltar la dirección web “www.ejemplo.com”.
Esto indica al usuario que este es el sitio web al que deben dirigirse para obtener más información. Al hacer clic en el enlace, se abrirá la página web especificada en el atributo “href”.
Ejemplo 3: Utilizando la etiqueta <mark> dentro de la etiqueta <p> para resaltar varias secciones de texto en una oración.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark en un párrafo</title>
</head>
<body>
<p>El <mark>proyecto</mark> comenzará el <mark>1 de mayo</mark> y se espera que finalice a finales de <mark>julio</mark>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <mark> dentro de la etiqueta <p> para resaltar las palabras “proyecto”, “1 de mayo” y “julio” en una oración que indica cuándo comenzará y terminará un proyecto. Esto indica al usuario que estas son las fechas importantes a recordar.