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. 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.

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 *

*