Cómo poner en negrita, cursiva y formato de texto en HTML

Si trabaja exclusivamente en un sistema de gestión de contenido como Centro CMS o WordPress, está acostumbrado a poner texto en negrita, cursiva y subrayado con solo hacer clic en un botón. Pero, ¿qué sucede si su barra de herramientas no ofrece exactamente las opciones de formato que necesita? ¿O tal vez no trabajas en un editor de texto o CMS?

No hay problema. Todo lo que necesitas es algo de HTML y CSS. A continuación, cubriremos algunos casos de uso para el formato de texto. A continuación, repasaremos el proceso de creación de texto con negrita, cursiva, subrayado, tachado, subíndice y superíndice.

Cuando se usa texto en negrita, se recomienda usar una etiqueta en lugar de la etiqueta . Sucede porque es un elemento semántico, mientras que no es. Según HTML5. los elementos no semánticos pueden dificultar la localización del contenido y la verificación futura especificación. 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 con el uso de y propiedades de peso de fuente CSS.

¿Cómo hacer que el texto HTML esté en negrita con un elemento fuerte?

Para definir texto muy significativo, colóquelo en etiquetas . Veamos un ejemplo.

Aquí está el código HTML:

 
<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>

Aquí está el resultado:

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

Para texto en negrita solo para decoración, use CSS font-weight en lugar del elemento HTML fuerte. Supongamos que desea poner en negrita una palabra en un párrafo: la envuelve con etiquetas y usará el selector de clase CSS para aplicar la propiedad font-weight solo al intervalo especificado.

Aquí está el CSS:

 
.bolded { font-weight: bold; }

Aquí está el código HTML:

 
<p>This is some normal paragraph text, and this <span class="bolded">word</span> is bold for decoration.</p>

Aquí está el resultado:

Igual que y etiqueta generalmente se prefiere a una etiqueta porque es un elemento semántico, por lo que lo usaremos en nuestros ejemplos de HTML. Para diseñar, adhiérase a CSS y evite la etiqueta .

Aprende más: Una guía para principiantes de HTML y CSS

¿Quieres saber más sobre HTML? Descarga nuestra guía gratuita para conocer las mejores prácticas para comenzar con HTML.

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

Para definir texto con énfasis en acento, coloque el texto dentro de las etiquetas . Veamos un ejemplo.

Aquí está el código HTML:

 
<p>This is some normal paragraph text, <em>and this is some emphasized text.</em></p>

Aquí está el resultado:

¿Cómo sesgo el texto en HTML usando la propiedad CSS Font-Style?

Para sesgar el texto para la decoración, use la propiedad de estilo de fuente CSS. Imagina que quieres poner en cursiva una palabra en un párrafo. Primero, rodee la palabra con etiquetas y luego aplique la propiedad de estilo de fuente solo para abarcar.

Aquí está el CSS:

 
.emphasized { font-style: italic; }

Aquí está el código HTML:

 
<p>This is some normal paragraph text, and this <span class="emphasized">word</span> is italicized for decoration.</p>

Aquí está el resultado:

También puede subrayar el texto con un elemento pero no debe utilizarse para subrayar texto con fines de presentación. Elemento está destinado a casos de uso específicos como resaltar palabras mal escritas, etiquetar sus propios nombres en texto chino o especificar apellidos.

Veamos ambos métodos a continuación.

¿Cómo subrayo el texto en HTML usando un elemento de anotación no articulado?

Si desea mostrar texto que no está articulado o contiene una anotación que no es texto, coloque el texto dentro de las etiquetas. . Por ejemplo:

 
<p>This <u>wrd</u> is misspelled, so we've underlined it.</p>

Aquí está el resultado:

¿Cómo resaltar texto HTML usando la propiedad de decoración de texto CSS?

Si desea subrayar el texto para la decoración, en lugar de presentar una anotación que no sea texto, use la propiedad de decoración de texto CSS de la siguiente manera:

Aquí está el CSS:

 
.underlined {text-decoration: underline;}

Aquí está el código HTML:

 
<p>This text is normal, and <span class="underlined"> this text is underlined</span>.</p>

Aquí está el resultado:

Cómo renderizar texto tachado en HTML

Hay muchas formas de representar texto HTML tachado que se muestra con una línea horizontal atravesada. Puedes usar la etiqueta para indicar que el texto ahora es incorrecto, inexacto o irrelevante. Si desea indicar texto que se ha eliminado, utilice una etiqueta .

Si desea mostrar el texto tachado por cualquier otro motivo, utilice la propiedad CSS text-decoration-line y establezca esta propiedad en line-through.

Observe que el HTML ha quedado obsoleto y ya no es una opción viable para mostrar texto tachado.

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

Cómo tachar texto en HTML usando un elemento tachado

Si desea tachar texto para mostrar que ya no es correcto, preciso o relevante, póngalo en etiquetas . Veamos un ejemplo.

Aquí está el código HTML:

 
<p>The meeting will begin at 5:00 PM on <s>Saturday</s> now on Sunday.</p>

Aquí está el resultado:

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

Para tachar texto para mostrar que se ha eliminado, coloque el texto dentro de las etiquetas . Veamos un ejemplo con un elemento de lista:

Aquí está el código HTML:

 
<p>Appointments are now available for:</p>
<ul>
<li><del>3 PM</del></li>
<li><del>4 PM</del></li>
<li>5 PM</li>
</ul>

Aquí está el resultado:

Cómo tachar texto en HTML usando CSS Text-Decoration-Line

Para tachar texto con otros fines, utilice la propiedad text-decoration-line de CSS.

Aquí está el CSS:

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

Aquí está el código HTML:

 
<p>This text is normal, and <span class="strike"> this text is line-through</span>.</p>

Aquí está el resultado:

Cómo hacer un subíndice de texto en HTML

Por lo general, se presenta en una fuente más pequeña pero más pesada, el texto del subíndice 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, use un elemento _{. Vea el ejemplo a continuación.}

Aquí está el código HTML:

 
<p>The chemical formula for water is H<sub>2</sub>O.</p>

Aquí está el resultado:

Cómo superíndice texto HTML

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

Para crear texto en superíndice en HTML, use un elemento ^{. Vea el ejemplo a continuación.}

Aquí está el código HTML:

 
<p>Water is essential for all forms of life.<sup>1</sup></p>

Aquí está el resultado:

Dar formato al texto con HTML y CSS

Al formatear su texto en cualquiera de las formas descritas anteriormente, puede ayudar a sus lectores a comprender y retener mejor la información de su sitio. Ya sea que desee poner palabras clave en negrita o agregar subíndices a fórmulas químicas, el formato de texto solo requiere una comprensión básica de HTML y CSS.

Nota del editor: esta publicación se publicó originalmente en octubre de 2020 y se actualizó para que sea completa.