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 Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.