A la hora de maquetar con HTML y aplicar estilos con CSS contamos con una variada gama de opciones para destacar los textos. A la hora de aplicar diseño a a las páginas de nuestro sitio o los de nuestros clientes, resaltar y subrayar con HTML5 y CSS3 nos resultará muy útil.

Una manera clásica de resaltar es aplicando la propiedad CSS background-color, ya sea a un párrafo a una parte de él, por ejemplo a un <strong> si deseamos el texto en negrita o <span> si buscamos un contenedor de texto genérico al que le podremos aplicar estilos.

El elemento mark en HTML5

Con la llegada de HTML5, surge la etiqueta <mark>. Su significado semántico apunta a destacar un bloque dentro de un elemento de texto.

De manera predeterminada, el texto que queda envuelto dentro de <mark> recibe un color de fondo amarillo.

Puede recibir los atributos globales (id, class, etc) y se ubica como un elemento en línea dentro del bloque de texto.

El subrayado

Las opciones para subrayar texto vienen dadas por CSS desde hace tiempo. Esto se puede lograr mediante text-decoration: underline.

Es importante saber que text-decoration, también puede recibir los valores overline (línea por encima del renglón), line-through (línea en el medio del renglón, como tachado) y underline overline (en conjunto, con una línea por encima y otra por debajo del renglón).

La mayoría de los elementos de HTML no cuentan con subrayado por defecto, salvo el caso de <a>. Si deseamos quitarle el subrayado, podremos aplicar, desde CSS, text-decoration:none.

En conclusión

Resaltar y subrayar con HTML5 y CSS3 nos puede ayudar en diferentes situaciones relacionadas con el diseño de una página.

Estas características pueden ser muy útiles tanto para títulos, como también para textos en general.