Cómo poner negrita, cursiva y subrayado en HTML

Si trabajas exclusivamente en un sistema de gestión de contenidos como CMS Hub de HubSpot o WordPress, seguramente estás acostumbrado a hacer clic en el botón de negrita (bold), cursiva (italic) y subrayar el texto (underline).

Pero ¿qué pasa cuando la barra de herramientas no ofrece la opción de formato que necesitas? ¿O qué pasa si no estás trabajando en un procesador de texto o en un CMS? ¿Qué se puede hacer en estos casos? Todo lo que necesitas saber es algo de código HTML y CSS.

A continuación, hablaremos de algunos casos de uso para formatear el texto en cualquiera de las opciones que mencionamos hace un momento: negrita, cursiva y subrayar el texto. Asimismo, recorreremos el proceso para crear texto con formato tachado, subíndice y superíndice. 

Se considera una buena práctica usar la etiqueta <strong> en favor de la etiqueta <b>. Esto se debe a que <strong> es un elemento semántico, mientras que el segundo no lo es. Los elementos no semánticos pueden dificultar la localización del contenido y las pruebas futuras, de acuerdo con la especificación HTML5. Además, si el texto en negrita es puramente estilístico, es mejor usar CSS y mantener todos los estilos de página separados del contenido.

Por esta razón, solo mostraremos ejemplos usando <strong> y la propiedad font-weight de CSS.

Cómo poner negritas en HTML usando la etiqueta <strong>

Para definir un texto con gran importancia, simplemente hay que agregar la frase dentro de las etiquetas <strong>. Veamos un ejemplo:

<p>Esta es una línea sin formato, <strong>y esta de aquí es muy importante</strong></p>

Para que el código funcione correctamente, debemos utilizar la etiqueta <strong> y </strong> para cerrar el código, dentro del párrafo, que está señalado por las etiquetas <p> y </p>.

El resultado se vería así:

Cómo poner en negrita el texto en HTML con la propiedad CSS Font-Weight

Para poner en negrita el texto simplemente por motivos de decoración, es más útil la propiedad CSS font-weight en lugar del elemento HTML <strong>.

Supongamos que queremos poner en negrita una palabra en un párrafo: envolvería la palabra en <span> etiquetas y usaría un selector de clase CSS para aplicar la propiedad font-weight solo al elemento span específico. Aquí está el CSS:

.bolded { font-weight: bold; }

Así se vería en HTML:

<p>Esta es una línea sin formato, y esta <span class="bolded">palabra</span> está decorada con negritas.</p>

Y este sería el resultado:

Ahora, veamos el proceso para las cursivas.

Así como sucede con <strong> y <b>, la etiqueta <em> generalmente es más aceptada que su contraparte <i> debido a que la primera aporta un elemento semántico, así que utilizaremos esta en los ejemplos de HTML. Para el estilo, es recomendable usar CSS y evitar la etiqueta <i>.

Cómo poner en cursiva el texto en HTML con el elemento de énfasis

Para definir el texto con mayor énfasis, solo hay que colocar la frase dentro de la etiqueta <em>. Veamos el siguiente ejemplo de HTML:

<p>Esta es una frase normal, <em>y esta sección tiene mayor énfasis.</em></p>

Así se vería el resultado:

Cómo poner cursivas en el texto en HTML con la propiedad CSS Font-Style

Para utilizar las cursivas como decoración, lo más recomendable es acudir a la propiedad CSS font-style. Imagina que quieres poner en cursivas una palabra dentro de un párrafo. En primer lugar, envuelve la palabra en las etiquetas <span> y, a continuación, aplica la propiedad font-style solo al elemento span. Aquí está el CSS:

.emphasized { font-style: italic; }

Así es como se vería en HTML:

<p>Este es un texto sin formato, y esta <span class="emphasized">palabra</span> está decorada en cursivas.</p>

El resultado sería este:

A continuación, veamos el subrayado.

También se puede subrayar el texto con el elemento <u>, pero no debe utilizarse para subrayar el texto con fines de presentación. El elemento <u> está pensado para casos de uso específicos, como marcar palabras mal escritas, denotar nombres propios en texto chino o indicar nombres de familia. Veamos ambos métodos a continuación.

Cómo subrayar texto en HTML con el elemento de anotación no articulado

Si deseas mostrar un texto no articulado o con una anotación no textual, añade el texto dentro de las etiquetas <u>. Por ejemplo:

<p>Esta <u>plbra</u> no está escrita correctamente, así que la subrayamos.</p>

El resultado se vería así:

Cómo subrayar texto en HTML con la propiedad CSS Text-Decoration

Si quieres subrayar el texto como decoración, en lugar de representar una anotación no textual, entonces utilizarás la propiedad CSS text-decoration. Este es el CSS:

.underlined {text-decoration: underline;}

Así se vería en HTML:

<p>Este es un texto normal, y <span class="underlined"> esta línea está subrayada</span>.</p>

El resultado sería este:

Cómo representar el texto tachado en HTML

Hay varias formas de representar el texto tachado en HTML, que es el texto que se muestra con una línea horizontal que lo atraviesa.

Puedes utilizar la etiqueta <s> para indicar que el texto es ahora incorrecto, inexacto o irrelevante. Si quieres indicar que el texto ha sido eliminado, utiliza la etiqueta <del>.

O bien, si quieres mostrar el texto como tachado por otra razón, entonces utilizarías la propiedad CSS text-decoration-line y establecerías esta propiedad como line-through.

Es importante tener en cuenta que el elemento HTML <strike> ha quedado obsoleto y ya no es una opción viable para mostrar el texto tachado.

Veamos los tres métodos admitidos en la versión actual de HTML.

Cómo tachar un texto en HTML con el elemento strikethrough

Si deseas tachar un texto para mostrar que ya es incorrecto o irrelevante, pon el texto dentro de las etiquetas <s> (strikethrough). Veamos un ejemplo en HTML:

<p>La reunión empezará a las 17:00 horas en <s>sábado</s>, será el domingo.</p>

Aquí está el resultado:

Cómo tachar un texto en HTML con el elemento de texto eliminado

Para tachar un texto con la intención de mostrar que ha sido eliminado, basta con agregar el texto dentro de las etiquetas <del>. Veamos un ejemplo con un elemento de lista en HTML:

<p>Las citas están disponibles para:</p>

<ul>

<li><del>3 pm</del></li>

<li><del>4 pm</del></li>

<li>5 pm</li>

</ul>

Así es como se vería:

Cómo tachar texto en HTML con la propiedad CSS Text-Decoration-Line

Para tachar el texto con otro propósito, utiliza la propiedad CSS text-decoration-line.

 Aquí está el CSS:

.strike { text-decoration-line: line-through; }

Y así se vería un ejemplo en HTML:

<p>Este es un texto normal, y <span class="strike"> esta línea está tachada</span>.</p>

El resultado sería este:

Cómo hacer un subíndice en HTML

Por lo general, un subíndice se representa en una fuente más pequeña pero más pesada y aparece medio carácter por debajo de la línea normal. Se puede usar en fórmulas químicas, ecuaciones matemáticas, fracciones y más. Para crear texto de subíndice en HTML, hay que utilizar el elemento <sub>.

Veamos el ejemplo en HTML:

<p>La fórmula del agua es H₂O.</p>

Así es como se vería:

Cómo hacer un superíndice en HTML

Por lo general el superíndice se representa en una fuente más pequeña pero más pesada, y aparece medio carácter por encima de la línea normal. Se puede usar para escribir notas al pie, marcas registradas y algunas fórmulas químicas también.

Para crear un superíndice en HTML, basta con utilizar el elemento <sup>.

Aquí hay un ejemplo en HTML:

<p>El agua es esencial para todas las formas de vida.¹</p>

Aquí está el resultado:

Al formatear el texto de cualquiera de las formas descritas anteriormente, puedes ayudar a tus lectores a comprender y retener mejor la información de tu sitio. Ya sea que desees poner en negrita palabras clave o incluir subíndices, el formato del texto solo requiere conocimientos básicos de HTML y CSS.