Como poner negrita, cursiva y subrayado en HTML con etiquetas

Nunca está de más aprender cosas nuevas. Y el lenguaje HTML, a pesar de que ahora no se utiliza tanto como hace unos años, sigue siendo uno de los principales en la creación de páginas web. Por eso, si eres diseñador de páginas, saber cómo poner negrita, cursiva y subrayado en HTML es algo que debe dominar.

Pero, ¿sabes hacerlo? Si no es así, a continuación te vamos a dar un pequeño tutorial para que no tengas ningún problema para hacerlo. Seguro que te viene bien para refrescar conocimiento o aprender algo nuevo. ¿Empezamos?

Cómo poner negrita, cursiva y subrayado en HTML: las etiquetas

Lo primero que debes saber sobre HTML que te interesa son las llamadas etiquetas. Son una herramienta con la que te permite crear diferentes «tipos» de letras, como puede ser cursiva, tachado, negrita, subrayado… Aprender estas etiquetas te quitará mucho tiempo.

Y es que, con ellas, tienes la mitad del conocimiento, siendo la otra mitad solo la práctica a la hora de ponerlas.

Verás.

Poner negrita en HTML

Imagina que tienes un texto y quieres que se resalte una palabra. De la frase anterior, queremos que se resalte «texto». Y para poner negritas usas HTML (porque es una web).

Así que has de saber cuál es la etiqueta correspondiente a las negritas en HTML. En este caso, la etiqueta es <strong>.

Ahora bien, no se trata de ponerla al principio del texto y ya está. Tampoco al final. Has de colocarla al lado de la palabra o grupo de palabras que quieres poner en negrita. Y siempre debes cerrarlo con la etiqueta cerrada, es decir, </strong>.

Para que te quede más claro:

<strong>Imagina que tienes un texto y quieres que se resalte una palabra.

Estaría mal porque le decimos a HTML que toda esa frase va en negrita. Pero también la siguiente, y la siguiente, y la siguiente, debido a que no hay etiqueta de cierre.

Imagina que tienes un texto y quieres que se resalte una palabra. <strong>

En este caso es como si la siguiente palabra o frase que se escriba vaya a ser la que se ponga en negrita.

Imagina que tienes un texto y quieres que se resalte una palabra.<strong></strong>

También habitual encontrarlo, pero en realidad no sirve para nada. Y es que entre esas dos etiquetas no hay frase ni palabra, por lo que se anulan sin poner negritas a nada.

Imagina que tienes un <strong>texto y quieres que se resalte una palabra.

Aquí estaría «casi» bien. Y es que a partir de texto, todo lo demás que se escriba saldrá en negrita.

Imagina que tienes un <strong>texto</strong> y quieres que se resalte una palabra.

Esta sería la forma correcta de colocar negritas en HTML.

Poner cursiva en HTML

Ya tienes dominada la negrita. Así que pasamos a la cursiva. Y de nuevo nos encontramos con lo mismo. Hay una etiqueta concreta para conseguir esto en HTML. Hablamos de <em>.

Igual que ocurre con la negrita, tienes que tener una etiqueta de apertura, que sería <em> y otra de cierre, en este caso </em>.

Usando los mismos ejemplos de antes, te pones casos que no estarán bien y el que sí lo está.

<em>Imagina que tienes un texto y quieres que se resalte una palabra.

Estaría mal porque le decimos a HTML que toda esa frase va en cursiva. Así como la siguiente, y la otra, y la otra. Al no haber etiqueta de cierre no sabe en qué momento dejar de ponerla.

Imagina que tienes un texto y quieres que se resalte una palabra. <em>

En este caso lo que le decimos a este lenguaje es que la siguiente palabra o frase irá en cursiva. Pero si no ponemos la etiqueta de cierre ocurrirá con el ejemplo anterior.

Imagina que tienes un texto y quieres que se resalte una palabra.<em></em>

Ocurre lo mismo que con las negritas. Al no haber nada entre esas dos etiquetas se anulan sin que haga cursiva en ningún sitio. Cuidado, porque tendrías código basura que no funciona.

Imagina que tienes un <em>texto y quieres que se resalte una palabra.

Aquí estaría «casi» bien. Va a poner en cursiva la palabra texto, pero al no tener cierre seguirá con la cursiva hasta que dejes de escribir.

Imagina que tienes un <em>texto</em> y quieres que se resalte una palabra.

Esta sería la forma correcta de colocar cursiva en HTML.

Poner subrayado en HTML

Finalmente nos queda el subrayado. En este caso, la etiqueta que debes conocer es <u>. Todo lo que escribas entre la apertura <u> y el cierre </u> irá subrayado (aunque tú, en el código, no lo puedas ver).

No es recomendable utilizarlo porque a menudo se confunde con un enlace, que como sabes en las páginas aparece subrayado y de otro color. Lo que puede hacer que muchos usuarios quieran entrar en la página y no puedan (dando mala imagen).

Por eso solo se reserva para ocasiones esporádicas.

Aquí te dejamos ejemplos siguiendo la misma frase anterior.

<u>Imagina que tienes un texto y quieres que se resalte una palabra.

Al ponerla al principio de la frase le decimos que va a ir toda ella en subrayado. Sin embargo, si no se coloca el cierre de la etiqueta, continuará subrayando todo lo demás que se escriba.

Imagina que tienes un texto y quieres que se resalte una palabra. <u>

A pesar de que puede estar colocado bien para la siguiente frase, no vas a lograr así que se ponga subrayada la palabra texto porque no está en el lugar correcto.

Imagina que tienes un texto y quieres que se resalte una palabra.<u></u>

En este caso estas etiquetas así se anulan mutuamente. Y como no hay palabras o frases puestas entre ellas no subrayarán nada.

Imagina que tienes un <u>texto y quieres que se resalte una palabra.

Casi. Pondrá subrayada la palabra texto. Pero también el resto de palabras y frases porque carece de la etiqueta de cierre.

Imagina que tienes un <u>texto</u> y quieres que se resalte una palabra.

Esta sería la forma correcta de colocar subrayado en HTML.

¿Te ha quedado claro cómo poner negrita, cursiva y subrayado en HTML? ¿Tienes algunas dudas? Déjanoslas en comentarios y te echaremos una mano.