NeoAttack » Como poner negrita, cursiva y subrayado en HTML

Como poner negrita, cursiva y subrayado en HTML

por | Mar 23, 2023 | BLOG, DISEÑO WEB, FORMACIÓN, WORDPRESS | 0 Comentarios

El HTML es el lenguaje de marcado utilizado para crear contenido en páginas web. A través de él, podemos definir el contenido y la estructura de una página con las mejores técnicas de desarrollo web. Además, podemos utilizar etiquetas para dar formato al texto, como poner negrita, cursiva y subrayado en HTML.

En este post, vamos a explicar cómo utilizar correctamente estas etiquetas para dar formato a tu texto en HTML.

Etiquetas HTML para dar formato al texto

En primer lugar qué y cuáles son las etiquetas HTML. Pues bien, estas etiquetas son una herramienta poderosa para dar forma al texto en una página web.

La negrita, la cursiva, el subrayado y el tachado son técnicas comunes para enfatizar el texto y hacer que se destaque en una página web. Las etiquetas HTML correspondientes para estas técnicas son <strong>, <em>, <u> y <del> respectivamente.

Etiqueta <strong>

La etiqueta <strong> se utiliza para dar formato al texto en negrita en HTML. Todo lo que se escribe entre las etiquetas <strong> y </strong> aparecerá en negrita en la página web.

Es importante tener en cuenta que la negrita no solo se utiliza para enfatizar el texto, sino también para resaltar el contenido importante en la página.

Etiqueta <em>

La etiqueta <em> se utiliza para dar formato al texto en cursiva en HTML. Todo lo que se escribe entre las etiquetas <em> y </em> aparecerá en cursiva en la página web.

La cursiva se utiliza para enfatizar el texto de una manera más sutil que la negrita, y a menudo se utiliza para indicar énfasis o para resaltar el contenido importante de una oración.

Etiqueta <u>

La etiqueta <u> se utiliza para dar formato al texto subrayado en HTML. Todo lo que se escribe entre las etiquetas <u> y </u> aparecerá subrayado en la página web. El subrayado se utiliza para resaltar el texto, a menudo para indicar un enlace o para resaltar el contenido en una web.

Es importante tener en cuenta que el subrayado también puede ser confuso, ya que en algunos casos puede parecer un enlace, incluso si no lo es. Por lo tanto, se debe utilizar con precaución y solo cuando sea necesario.

Etiqueta <del>

La etiqueta <del> se utiliza para dar formato al texto tachado en HTML. Todo lo que se escribe entre las etiquetas <del> y </del> aparecerá tachado en la página web. El texto tachado se utiliza para indicar que el contenido ha sido eliminado o que no es relevante.

Esta etiqueta se utiliza a menudo en la edición de texto y en documentos revisados, pero también puede ser utilizada en páginas web para resaltar cambios o para indicar contenido que ya no es válido o relevante.

tachado-html

Cómo poner negrita en HTML

Como ya hemos dicho, la negrita es una forma común de enfatizar el texto en una página web. Hay dos formas principales de poner texto en negrita en HTML: utilizando la etiqueta <b> o la propiedad CSS font-weight.

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

La etiqueta para negrita en HTML es <b>. Todo lo que escribas dentro de esta etiqueta aparecerá en negrita en la página web. Esta etiqueta se utiliza para enfatizar el texto, resaltándolo y haciéndolo más visible. Por ejemplo:

<p>Este es un texto en <b>negrita</b></p>

El resultado en el navegador se verá como:

Este es un texto en negrita

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

La propiedad CSS font-weight se utiliza para controlar el grosor de la fuente del texto en una página web. Puedes utilizar esta propiedad para poner texto en negrita. Para ello, el valor de la propiedad font-weight debe ser bold. Por ejemplo:

<p style=»font-weight: bold;»>Este es un texto en negrita</p>

El resultado en el navegador se verá como:

Este es un texto en negrita.

Cómo poner cursivas en HTML

Las cursivas son otra forma común de enfatizar el texto en una página web. Hay dos formas principales de poner texto en cursiva en HTML: utilizando el elemento de énfasis <i> o la propiedad CSS font-style.

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

La etiqueta para cursiva en HTML es <i>. Todo lo que escribas dentro de esta etiqueta aparecerá en cursiva en la página web.

Esta etiqueta se utiliza para indicar que una palabra o frase tiene un significado especial, o para resaltar una palabra o frase que de otra forma podría pasar desapercibida. Por ejemplo:

<p>Este es un texto en <i>cursiva</i></p>

El resultado en el navegador se verá como:

Este es un texto en cursiva.

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

La propiedad CSS font-style se utiliza para controlar el estilo de la fuente del texto en una página web y puedes emplear esta propiedad para poner texto en cursiva.

En este caso, el valor de la propiedad font-style debe ser italic. Por ejemplo:

<p style=»font-style: italic;»>Este es un texto en cursiva</p>

El resultado en el navegador se verá como:

Este es un texto en cursiva

subrayado-html

Cómo subrayar un texto en HTML

El subrayado es otra de las formas más comunes de enfatizar el texto en una página web. Hay dos formas principales de subrayar el texto en HTML: utilizando el elemento de anotación no articulado <u> o la propiedad CSS text-decoration.

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

La etiqueta para subrayado en HTML es <u>. Todo lo que escribas dentro de esta etiqueta aparecerá subrayado en la página web.

Se utiliza para dar énfasis a una palabra o frase específica, o para indicar que es importante. Por ejemplo:

<p>Este es un texto <u>subrayado</u></p>

El resultado en el navegador se verá como:

Este es un texto subrayado.

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

La propiedad CSS text-decoration se utiliza para controlar la decoración del texto en una página web, incluyendo el subrayado.

El valor de la propiedad text-decoration debe ser underline. Por ejemplo:

<p style=»text-decoration: underline;»>Este es un texto subrayado</p>

El resultado en el navegador se verá como:

Este es un texto subrayado

negrita-html

Cómo representar el texto tachado en HTML

El texto tachado es otra forma común de enfatizar el texto en una página web. Hay tres formas principales de tachar el texto en HTML: utilizando el elemento strikethrough <s>, el elemento de texto eliminado <del> o la propiedad CSS text-decoration-line.

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

El elemento strikethrough <s> se utiliza para tachar el texto en HTML. Todo lo que escribas dentro de esta etiqueta aparecerá tachado en la página web. Por ejemplo:

<p>Este es un texto <s>tachado</s></p>

El resultado en el navegador se verá como:

Este es un texto tachado

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

El elemento de texto eliminado <del> se utiliza para representar el texto tachado en HTML. Todo lo que escribas dentro de esta etiqueta aparecerá tachado en la página web. Por ejemplo:

<p>Este es un texto <del>tachado</del></p>

El resultado en el navegador se verá como:

Este es un texto tachado

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

La propiedad CSS text-decoration-line se utiliza para controlar la línea de decoración del texto en una página web, incluyendo el texto tachado. El valor de la propiedad text-decoration-line debe ser line-through. Por ejemplo:

<p style=»text-decoration-line: line-through;»>Este es un texto tachado</p>

El resultado en el navegador se verá como:

Este es un texto tachado

Combinar etiquetas para dar formato al texto

Puedes combinar las etiquetas HTML para dar formato al texto de diferentes maneras. Por ejemplo, si quieres poner un texto en negrita y cursiva, puedes utilizar las etiquetas <b> y <i> juntas. Por ejemplo:

<p>Este es un texto en <b><i>negrita y cursiva</i></b></p>

El resultado en el navegador se verá como:

Este es un texto en negrita y cursiva

También puedes combinar las etiquetas para poner texto en negrita y subrayado, cursiva y subrayado, o incluso en negrita, cursiva y subrayado. Por ejemplo:

<p>Este es un texto en <b><u>negrita y subrayado</u></b></p>

<p>Este es un texto en <i><u>cursiva y subrayado</u></i></p>

<p>Este es un texto en <b><i><u>negrita, cursiva y subrayado</u></i></b></p>

etiqueta-html

Como puedes ver, existen diferentes formas de poner en negrita, cursiva, tachado y subrayado en HTML y propiedades CSS. Al utilizar estas técnicas, puedes mejorar la legibilidad y enfatizar el contenido importante de tu sitio web.

¿A qué estás esperando para probarlo? Si tu web se basa en HTML, contacta con nosotros y nuestro equipo profesional le dará las mejores soluciones adaptatas a tus necesidades.

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

¿Quieres ser mejor que tu competencia?

Descubre cómo.

Estos posts también podrían interesarte

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

Publicidad en TikTok: la guía completa

Me gustaría empezar este post afirmando que, como buen millennial al límite de ser Gen Z: ¡me declaro adicto a TikTok! Y, como buen Paid Media, me declaro también adicto a la publicidad en TikTok y a su gran variedad de formatos publicitarios a los que da soporte. Hoy...

leer más

¿Cómo recuperar el posicionamiento en Google de tu web?

Google ha cambiado mucho desde sus inicios y ahora considera los sitios web que se esfuerzan en hacer un trabajo limpio de posicionamiento o SEO de calidad, teniendo en cuenta desde un Backlink natural hasta la experiencia de usuario en el sitio web. Para saber cómo...

leer más