Saltar al contenido

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

febrero 6, 2022
Indian man learning how to bold and format text in HTML.jpgkeepProtocol

Si trabaja exclusivamente en un sistema de gestión de contenido como Centro de CMS o WordPress, está acostumbrado a poder poner en negrita, cursiva y subrayar el texto con un clic del botón. Pero, ¿qué sucede si su barra de herramientas no ofrece la opción de formato exacta que desea? ¿O no estás trabajando en un procesador de textos o un CMS?

No hay problema. Todo lo que necesitas es algo de HTML y CSS. A continuación, analizaremos algunos casos de uso para dar formato al texto. Luego, veremos el proceso para crear texto en negrita, cursiva, subrayado, tachado, subíndice y superíndice.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Al poner texto en negrita, se considera una buena práctica usar la etiqueta en lugar de la etiqueta . Esto se debe a que es un elemento semántico mientras que no lo es. Los elementos no semánticos pueden dificultar la localización del contenido y la prueba futura, según HTML5. 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 usando y la propiedad font-weight de CSS.

Cómo poner texto en negrita en HTML con el elemento fuerte

Para definir texto con gran importancia, coloque el texto dentro de las etiquetas . Veamos un ejemplo.

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo poner texto en negrita en html

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

Para poner texto en negrita simplemente como decoración, use la propiedad CSS font-weight en lugar del elemento fuerte HTML. Supongamos que desea poner en negrita una palabra en un párrafo: envolvería la palabra en 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; }

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo poner texto en negrita en html

Al igual que y , la etiqueta generalmente se prefiere a la etiqueta ya que es un elemento semántico, por lo que la usaremos en nuestros ejemplos de HTML. Para diseñar, apégate a CSS y evita la etiqueta .

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

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

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo agregar cursiva al texto en html

Cómo poner texto en cursiva en HTML con la propiedad de estilo de fuente CSS

Para poner el texto en cursiva para la decoración, use la propiedad de estilo de fuente CSS. Imagina que quieres poner en cursiva una palabra dentro de un párrafo. Primero, envuelva la palabra en etiquetas , luego aplique la propiedad de estilo de fuente solo al elemento span.

Aquí está el CSS:

 

.emphasized { font-style: italic; }

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo agregar cursiva al texto en html

También puede subrayar texto con el elemento , pero esto no debe usarse para subrayar texto con fines de presentación. El elemento está destinado a casos de uso específicos como marcar palabras mal escritas, denotar nombres propios en texto chino o indicar apellidos.

Veamos ambos métodos a continuación.

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

Si desea mostrar texto que no está articulado o tiene una anotación no textual, 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:

ejemplo de como subrayar texto en html

Cómo subrayar texto en HTML con la propiedad de decoración de texto CSS

Si desea subrayar el texto para la decoración, en lugar de representar una anotación no textual, entonces usaría la propiedad de decoración de texto CSS, así:

Aquí está el CSS:

 

.underlined {text-decoration: underline;}

Aquí está el HTML:

 

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

Y aquí está el resultado:

ejemplo de como subrayar texto en html y css

Cómo renderizar texto tachado en HTML

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

Si desea mostrar el texto como tachado por otro motivo, entonces usaría la propiedad CSS text-decoration-line y establecería esta propiedad en «line-through».

Es importante tener en cuenta que el elemento 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 actual de HTML.

Cómo tachar texto en HTML con el elemento tachado

Si desea tachar el texto para mostrar que ya no es correcto, preciso o relevante, coloque el texto dentro de las etiquetas . Veamos un ejemplo.

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de como tachar texto en html

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

Para tachar el 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 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:

ejemplo de como tachar texto en html

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

Para tachar texto con otro fin, utilice la propiedad text-decoration-line de CSS.

Aquí está el CSS:

 

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

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo tachar texto en html y css

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 el elemento . Vea el ejemplo a continuación.

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo escribir texto de subíndice en html

Cómo hacer superíndice de texto en HTML

Generalmente representado 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 usar para escribir notas al pie, derechos de autor, marcas comerciales registradas y también algunas fórmulas químicas.

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

Aquí está el HTML:

 

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

Aquí está el resultado:

ejemplo de cómo escribir texto en superíndice en html

Formateo de texto con HTML y CSS

Al dar formato al texto de 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 incluir subíndices en fórmulas químicas, el formato de texto solo requiere conocimientos básicos de HTML y CSS.

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

Nueva llamada a la acción