Cómo poner negrita, cursiva y subrayado en HTML

Escrito por: Pablo Londoño

HTML Y CSS PARA MARKETERS

Aprende los conceptos básicos de HTML y CSS para tu sitio web

Descarga aquí
Cómo poner negrita en HTML

Actualizado:

Publicado:

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.

    ¡Listo!

    Haz clic en este enlace para acceder a este recurso en cualquier momento.

    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 negrita en HTML

    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:

    Etiqueta para negrita en HTML y CSS

    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 itálicas en HTML

    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:

    Etiqueta para itálicas en HTML y CSS

    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.

    << Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

    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 poner subrayado en HTML

    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 poner subrayado en HTML y CSS

    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 en HTML

    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 poner tachado en lista en HTML

    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 tachar en HTML y CSS

    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 poner un subíndice en HTML

    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:

    Cómo poner superíndice en HTML

    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.

    New Call-to-action
    Temas: HTML

    Artículos relacionados

    Aprende los conceptos básicos de HTML y CSS para tu sitio web