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.
Códigos de programación para CSS
Descarga códigos y snippets CSS útiles y funcionales para personalizar y mejorar el diseño de tu sitio web de manera efectiva.
- Pestañas de navegación CSS.
- JavaScript onClick con CSS.
- Degradados CSS.
- Desplegables CSS.
Descargar ahora
Todos los campos son obligatorios.
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.
Cómo poner negrita en HTML
Para poner el texto en negrita en HTML hay que usar la etiqueta <strong> o la etiqueta <b> (negrita). Los navegadores pondrán en negrita el texto al usar cualquiera de estas dos etiquetas. La etiqueta <strong> indica que el texto es de especial importancia o urgencia. También puedes poner el texto en negrita con la propiedad CSS font-weight establecida en negrita.
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.
Cómo poner cursivas en HTML
Para poner el texto en cursiva en HTML, utiliza la etiqueta em o la etiqueta i (italic). Ambas etiquetas convierten el texto en cursiva. Sin embargo, la etiqueta em indica además que el texto tiene énfasis cuando se lee. También puedes poner el texto en cursiva con la propiedad CSS font-style establecida en italic.
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.
Cómo subrayar un texto en HTML
Para subrayar un texto en HTML y CSS, utiliza la propiedad CSS text-decoration, establecida en subrayar.
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.
![<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>](https://no-cache.hubspot.com/cta/default/53/81607f16-1f47-4f2d-9363-c6ac8242f7db.png){kind=small}
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<sub>2</sub>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.<sup>1</sup></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.
