¿Como funciona el comando en HTML5: 'mark'?

Instrucción HTML5 de <mark>: Descripción y Atributos

El elemento <mark> en HTML5 se utiliza para resaltar fragmentos de texto que son de especial interés o importancia para el usuario. Su uso evita la necesidad de emplear métodos menos semánticos, como <span> con estilos específicos; mediante <mark>, se logra un marcado semánticamente significativo y estilísticamente relevante.

El <mark> elemento tiene los siguientes atributos globales:

• accesskey: Facilita el acceso al elemento por medio de combinaciones de teclas.
• class: Permite asociar el elemento a una o varias clases CSS para su estilización.
• contenteditable: Indica si el contenido del elemento puede ser editado por el usuario.
• dir: Define la dirección del texto. Puede ser "ltr" (left to right) o "rtl" (right to left).
• draggable: Especifica si el elemento puede ser arrastrado.
• hidden: Oculta el elemento.
• id: Define un identificador único para el elemento.
• lang: Especifica el idioma del contenido textual.
• spellcheck: Indica si el navegador debe revisar la ortografía del texto dentro del elemento.
• style: Permite aplicar estilos CSS directamente en el elemento.
• tabindex: Incluye el elemento en el orden de tabulación del documento.
• title: Proporciona información adicional sobre el elemento.
• translate: Indica si el contenido de este elemento debería ser traducido o no.

No tiene atributos específicos únicos adicionales más allá de estos atributos globales.

Uso de <mark> en HTML5

El uso del elemento <mark> es bastante sencillo y suele aplicarse en aquellos casos donde se quiere resaltar texto que tiene un significado contextualmente relevante. Por ejemplo, puede utilizarse para señalar las palabras clave encontradas en los resultados de una búsqueda.

Ejemplo 1: Resaltar texto en un párrafo

<p>A medida que te desplazas por este documento, notarás varios términos destacados, como <mark>HTML5</mark>, que son claves para entender el contenido.</p>

En este ejemplo, la palabra "HTML5" se encuentra resaltada dentro de un párrafo, indicando su importancia.

Ejemplo 2: Resultados de una búsqueda

<p>Los resultados de tu búsqueda incluyen las siguientes coincidencias: "<mark>JavaScript</mark>", "<mark>CSS</mark>", y "<mark>HTML</mark>".</p>

Aquí, las palabras "JavaScript", "CSS" y "HTML" están resaltadas ya que son relevantes para la búsqueda realizada por el usuario.

Ejemplo 3: Estilización personalizada mediante CSS

Aunque <mark> tiene un estilo predeterminado (normalmente un fondo amarillo pálido), también puede ser estilizado mediante CSS:

<style>
  mark {
    background-color: lightgreen;
    color: black;
    font-weight: bold;
  }
</style>

<p>Una vez que dominas <mark>JavaScript</mark>, puedes crear aplicaciones web interactivas y eficientes.</p>

En este caso, el elemento <mark> tiene un fondo verde claro y texto en negrita gracias a la regla CSS incluida en el <style>.

Resumen

El elemento <mark> en HTML5 proporciona una manera semánticamente correcta de resaltar textualmente información relevante, simplificando tanto la lectura como la estilización del documento. Utilizar atributos globales con <mark> enriquece aún más su funcionalidad permitiendo un control detallado sobre cómo se presenta y comporta en el navegador.