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.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*



Encontrame en las redes sociales. Contactame.