En algún momento, la mayoría hemos utilizado herramientas para redactar y dar formato a textos, permitiéndonos resaltar información con recursos como negritas, cursivas o incluso subrayado.
Estas acciones suelen ser muy simples gracias a las opciones disponibles al alcance de un clic. Pero, ¿qué sucede cuando necesitamos aplicar estas modificaciones en entornos fuera de las herramientas convencionales?
Ya sea en una página web creada directamente con código o mediante un CMS como WordPress, siempre podemos recurrir al uso de etiquetas HTML y estilos CSS para lograrlo.
En este artículo exploraremos, de manera clara y sencilla, cómo aplicar negritas, cursivas, subrayados y otros estilos utilizando HTML y CSS.
Tabla de contenidos
El uso de la Negrita
Las negritas suelen ser utilizada como una herramienta visual para destacar un contenido en concreto para capturar la atención del lector, por otro lado, su uso tiene implicaciones en cuando al rendimiento del contenido en términos de SEO y usabilidad.
Las características clave al momento de usar negritas en determinado contenido son las siguientes:
- Facilitan la lectura rápida: los lectores suelen realizar un vistazo rápido del texto y las negritas les permiten encontrar rápidamente lo que se considera importante.
- Ayudan en SEO: las negritas pueden destacar palabras clave, lo que facilita que los motores de búsqueda puedan interpretar mejor el contenido.
- Mejoran la comprensión: el resaltar conceptos clave hace que la información sea más fácil de entender y recordar.
- Aumentan la accesibilidad: las negritas pueden actuar como puntos visuales que guían a los lectores a lo largo del contenido.
- Generan interés: las negritas por sí mismas se encargan de destacar ideas importantes, manteniendo la atención del lector.
Poner negrita usando HTML
Si pretendemos utilizar solo HTML, podemos dar uso a las etiquetas <strong> o <b>, pueden parecer que hacen lo mismo, pero tienen una notable diferencia.
<strong>: indica que el texto tiene importancia semántica (recomendado para SEO).
<b>: solo aplica el estilo visual de negritas, sin importancia semántica.
Poner negrita usando CSS
Desde los estilos CSS podemos establecer un texto en negrita por medio de la propiedad “font-weight”, la cual nos brinda la opción de establecer distintos tipos de grosores, desde el más delgado hasta el más grueso.
p {
font-weight: bold;
}
Diferentes grosores: el grosor de la letra pueden ser establecidos desde valores numéricos como valores de texto, los cuales corresponden de la siguiente manera.
100 – thin (Delgado)
200 – extra-light o ultra-light (Extra Ligero)
300 – light (Ligero)
400 – normal (Por defecto)
500 – medium (Medio)
600 – semi-bold o demi-bold (Semi Negrita)
700 – bold (Negrita)
800 – extra-bold o ultra-bold (Extra Negrita)
900 – black o heavy (Grueso o Pesado)
<p style="font-weight: 900;">Este texto es más grueso.</p>
El uso de la Cursiva
Las cursivas en el contenido son una herramienta que nos ayuda a destacar y establecer un canal para comunicar de forma visual y semántica, frases, citas, sentimientos o simplemente palabras clave.
Las características clave al momento de usar cursivas en determinado contenido son las siguientes:
- Destacan información: las cursivas pueden resaltar términos clave o ideas importantes de forma discreta en el contenido.
- Marcan títulos o términos técnicos: por lo general suelen ser utilizadas para obras (libros, películas) o palabras técnicas y extranjeras.
- Añaden énfasis: las cursivas, por su parte, ayudan al autor a expresar emoción o importancia sin ser tan llamativas como las negritas.
- Mejoran la lectura rápida: como elemento visual, las cursivas ayudan al lector a identificar elementos clave al darle un vistazo rápido al contenido.
Poner cursivas usando HTML
Con HTML contamos con las etiquetas <em> o <i> respectivamente para aplicar cursivas, la diferencia entre ambas etiquetas es su uso semántico.
<em> (énfasis semántico): recomendada cuando el texto tiene importancia semántica.
<i> (estilo visual): solo cambia la apariencia, sin significado semántico.
<p style="font-weight: 900;">Este texto es más grueso.</p> <p>Este texto tiene <em>énfasis</em> semántico.</p> <p>Este texto está en <i>cursivas</i>.</p>
Si deseamos que los motores de búsqueda reconozcan el contenido destacado a través de las etiquetas, es importante priorizar el uso de <em> para garantizar que el énfasis sea interpretado correctamente.
Poner cursivas usando CSS
Podemos usar la propiedad font-style para crear cursivas por medio de los estilos CSS, sin depender de etiquetas específicas.
Este texto está en cursivas.
<p style="font-style: italic;">Este texto está en cursivas.</p>
Subrayar texto
El subrayado es una técnica visual que nos sirve para destacar determinado texto, aunque su uso debe ser estratégico y limitado para evitar confusiones a los lectores.
Las características clave al momento de subrayar un texto en determinado contenido son las siguientes:
- Destacar información importante: un texto subrayado es utilizado para llamar la atención sobre palabras o frases clave.
- Facilitar la lectura rápida: un texto subrayado ayuda a los lectores a encontrar lo esencial en textos largos.
- Indicar enlaces en la web: es común usar subrayados para marcar enlaces interactivos, de hecho un enlace en un contenido si no tiene estilos definidos, su efecto en hover será de un subrayado.
- Refuerza el énfasis: un texto subrayado, combinado con otras herramientas como negritas o colores, mejora la claridad del texto.
Subrayar un texto usando HTML
En HTML podemos encontrar la etiqueta <u> “underline” la cual se usa para subrayar texto, esta etiqueta es solo de uso visual y no representa un significado semántico, por lo que solo sirve para el diseño.
<p>Este texto está <u>subrayado</u>.</p>
Poner subrayar un texto usando CSS
Si decidimos usar estilos CSS tenemos a nuestra disposición la propiedad text-decoration, la cual nos permite subrayar texto si la definimos como “underline”.
<p style="text-decoration: underline;">Este texto está subrayado con CSS.</p>
Por medio de los estilos CSS podemos personalizar aún más el aspecto del subrayado, aportándole cambios al color, grosor y su estilo.
- text-decoration-color: red; Color del subrayado
- text-decoration-style: wavy; Estilo del subrayado
- text-underline-offset: 3px; Espacio entre el texto y el subrayado
Tachar texto
Si bien ya hemos cubierto los distintos estilos que le podemos aportar a un determinado texto, vale la pena destacar que también podemos tachar parte de un contenido.
Tachar parte de un texto puede ser útil en ciertos contextos para comunicar de manera visual cambios, errores o modificaciones en el contenido.
Las características clave al momento de tachar un texto en determinado contenido son las siguientes:
- Mostrar cambios o actualizaciones: indica que el texto que ya no es válido, pero sirve como referencia.
- Marcar errores o eliminaciones: permite visualizar elementos descartados.
- Resaltar descuentos: puede ser usado para comparar precios antiguos con los nuevos.
- Añadir humor o sarcasmo: un texto tachado puede ser considerado como un tono de humor en contenidos informales.
Poner un texto tachado usando HTML
Por medio de HTML si queremos tachar un determinado texto tenemos a nuestra disposicion las etiquetas <s> y <del>.
- <s>: se usa para indicar texto que ya no es relevante visualmente.
- <del>: además del aspecto visual, esta etiqueta tiene un significado semántico y representa texto eliminado en un contexto formal.
<p>Este texto está <s>tachado</s>.</p> <p>Este texto fue <del>eliminado</del>.</p>
Poner un texto tachado usando CSS
Si lo que queremos es utilizas estilos CSS, es posible tachar un texto usando la propiedad text-decoration al ser definida con “line-through”.
<p style="text-decoration: line-through;">Este texto está tachado con CSS.</p>
Al igual que con el texto subrayado, por medio de los estilos CSS podemos personalizar algunos aspectos del texto tachado, como el color y estilo del tachado.
- text-decoration-color: red; Color del texto tachado
- text-decoration-style: wavy; Estilo del texto tachado
Conclusión
A lo largo de este recorrido hemos demostrado que es completamente posible aplicar distintos estilos de visualización a partes específicas del texto, incluso cuando no se dispone de opciones directas desde la interfaz. Esto se puede lograr mediante el uso de etiquetas HTML o estilos CSS.
Contar con el conocimiento para agregar negrita, cursiva y subrayado a través de métodos alternativos se convierte en una habilidad valiosa para cualquier persona que desee gestionar y personalizar su contenido de manera efectiva.
Sin embargo, es importante no abusar de estas herramientas visuales. Más allá de su impacto gráfico, cada una de estas técnicas puede transmitir un sentido, cumplir una función o incluso evocar una emoción específica.
La negrita es ideal para destacar información clave, ayudando a los lectores a identificar rápidamente los puntos más importantes.
La cursiva se utiliza para enfatizar ideas, resaltar términos técnicos o palabras en otros idiomas, aportando dinamismo al texto.
El subrayado es útil para destacar texto relevante, aunque en el ámbito web suele estar asociado a enlaces, por lo que debe emplearse con cuidado.
Dominar estas técnicas no solo mejora la apariencia del contenido, sino también la experiencia del usuario y la accesibilidad de la página. Esto contribuye a lograr un diseño más profesional, funcional y, sobre todo, alineado con nuestras expectativas.
Tambien te puede interesar:
- ¿Cómo cambiar el color del texto en HTML?
- Etiquetas HTML, listado de tags HTML
- Cómo editar el CSS en WordPress
- Mejores editores HTML
- Mejores 10 editores de código para programar
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
