Damián De Luca - Capacitación & Desarrollo Web

Cómo resaltar y subrayar con HTML5 y CSS3

HTML5

A la hora de maquetar con HTML y aplicar estilos con CSS contamos con una variada gama de opciones para destacar los textos.

Una manera clásica de resaltar es aplicando la propiedad 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.

Salir de la versión móvil