Subrayado HTML

El subrayado HTML es uno de los elementos que se utilizan para hacer la lectura más fácil y atractiva en los textos online. En este artículo repasamos en nuestra nave todo lo que tienes que saber sobre el subrayado: cómo se hace, qué tipos de subrayado hay o como quitar el subrayado a un link.

¿Despegamos?

Etiqueta para subrayar en HTML

Lo primero de todo es saber cuál es la etiqueta para el subrayado HTML. Todas las funciones HTML funcionan con etiquetas, que les permiten a los textos modificarse.

En este caso, utilizamos la etiqueta <u> para subrayar en HTML. Esta <u> viene de la palabra subrayar en inglés. Es decir: ‘underline’.

<u></u>

Sin embargo, tienes que tener en cuenta que la etiqueta <u> está obsoleta (deprecated). Es decir, no se recomienda su uso. Para subrayar de una manera más efectiva, en 2023 se recomienda usar estilos CSS para conseguirlo.

No dejes de leer, más adelante te vamos a explicar cómo hacerlo de ambas maneras.

Texto subrayado en HTML

Primero, comencemos hablando de cómo hacer el subrayado de un texto con HTML. Como hemos dicho, la etiqueta que se necesita para hacerlo es <u>.

Por tanto, para el subrayado de cualquier texto será necesario añadir esta etiqueta antes del texto que quieras subrayar. Recuerda, por supuesto, que tendrás que cerrarla en el punto donde finalice la parte que quieres destacar, como el siguiente:

En la cultura popular, los extraterrestres son seres vivos de cualquier sitio fuera de la Tierra.

<p></u>En la cultura popular, los extraterrestres son seres vivos de cualquier sitio fuera de la Tierra.</u></p>

Subrayar una palabra en HTML

Para subrayar una palabra, el proceso es el mismo que con el texto. Deberás utilizar la etiqueta <u>, pero aplicarla solo en la palabra que desees subrayar, como en este caso, ‘tierra‘.

<p>como en este caso, ‘</u>tierra</u>’.</p>

Recuerda que en este caso, tanto la etiqueta de comienzo como la de cierre deberán ir pegadas a la palabra que subrayemos, sin dejar espacio entre la etiqueta y el texto. De esta manera, evitaremos que se subrayen los espacios o símbolos al lado de esa palabra, como en este caso, ‘extraterrestre‘.

<p>como en este caso</u>, ‘extraterrestre</u>’.</p>

Letra subrayada HTML

Por último, en caso de querer subrayar tan solo una letra, el procedimiento será el mismo que con textos o palabras, pero aplicado a la mínima escala. Eso sí, en este caso, es muy importante tener en cuenta los espacios, ya que el dejar un espacio de más en el lugar equivocado puede hacer que esa palabra se separe, quedando, por ejemplo, O VNI.

Por ello, es vital tener en cuenta ese aspecto a la hora de crear un texto HTML donde solo quieras subrayar una letra: OVNI.

<p>O</u>V</u>NI</p>

Link subrayado HTML

Habitualmente, los links o enlaces de las páginas web están subrayados. De hecho, es para lo que más se utiliza este tipo de resalto. El subrayado está, en definitiva, asociado a estos enlaces la mayoría de las veces.

Además, HTML5 actúa por defecto con los links. Por ello, en cuanto añadas un enlace en tu texto HTML, automáticamente aparecerá subrayado. Algo que, en todo caso, podrás eliminar o cambiar su estilo posteriormente, como realizamos en HTML Masters para que el subrayado solo aparezca cuando pones encima el ratón o clicas en el enlace.

Puedes conocer aquí cómo eliminar el subrayado de un enlace HTML. Y, en caso de que no sepas cómo insertar un enlace en HTML, te dejamos este otro artículo.

HTML subrayado CSS

Utilizar la etiqueta <u> como hemos visto hasta ahora es la manera de añadir un subrayado a textos, palabras o letras solo con HTML. Sin embargo, y como hemos comentado anteriormente, esta no es la manera en la que, actualmente, se recomienda subrayar.

Hoy en día, la manera correcta de conseguir el subrayado HTML es con CSS. El CSS permite dar cualquier estilo a nuestros textos y páginas web, de manera fácil y rápida. Es, en todo caso, un lenguaje fácil de aprender y que se puede insertar en el mismo texto HTML. Puedes conocer aquí cómo insertar un texto CSS en HTML.

Subrayar <p> HTML

Para hacer un subrayado en HMTL a través de CSS, es necesario que añadamos la propiedad ‘text-decoration: underline‘ a la parte del texto que queramos subrayar, ya sea un título, un texto, una palabra o una letra. En este caso, un párrafo <p>.

Esta es la manera de subrayar un texto HTML con CSS:

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         text-decoration: underline;
      }
   </style>
</head>
<body>
   <p>Esta es la manera de subrayar un texto HTML con CSS</p>
</body>
</html>

Otros subrayados HTML con CSS

Así se subraya una palabra en HTML con CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        span {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>Así se subraya una <span>palabra<span> en HTML con CSS</p>
</body>
</html>

Cómo subrayar una letra en HTML con CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        span {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>Cómo subrayar una letr<span>a<span> en HTML con CSS</p>
</body>
</html>

En todo caso, lo más fácil es que añadas la propiedad a una clase CSS. Por ejemplo: subrayado. De esta manera, todos los elementos a los que se le añada esa clase, tendrán subrayado:

<!DOCTYPE html>
<html>
<head>
    <style>
        .subrayado {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class=»subrayado»>Esta es la manera de subrayar un texto HTML con CSS</p>
    <p>Así se subraya una <span>palabra<span class=»subrayado»> en HTML con CSS</p>
    <p>Cómo subrayar una letr;<span class=»subrayado»>a<span> en HTML con CSS</p>
</body>
</html>

Tipos de subrayado HTML

El subrayado HTML más habitual es el que recorre una línea por debajo de un texto. Sin embargo, hay otras maneras de subrayar el texto.

A continuación repasamos los tipos de subrayado HTML que existen y cómo aplicarlos en tu texto con CSS.

Doble subrayado HTML

El primero que vamos a repasar es el subrayado doble. Es decir, la manera en la que dos líneas pasen por debajo de tu texto. Para ello, a la propiedad ‘text-decoration: underline’ tendremos que aplicarle una más: ‘text-decoration-style: double».

<!DOCTYPE html>
<html>
  <head>
    <style>
      .subrayado-doble {
        text-decoration: underline;
        text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <p class="»subrayado-doble»">Así es una nave espacial</p>
  </body>
</html>

HTML subrayado tachado

En el caso del subrayado tachado, es necesario cambiar el parámetro del subrayado al parámetro de tachado: ‘text-decoration: line-through’.

HTML subrayado punteado

Para conseguir un subrayado punteado en HTML, se necesita añadir la siguiente palabra clave al parámetro ‘text-decoration-style: dotted’ (punteado en inglés).

Otros subrayados HTML

Estas son todas las palabras clave que debes utilizar para cambiar el tipo de subrayado de tu texto, según cuál quieras. Todos ellos irán a continuación del parámetro ‘text-decoration-style’.

• solid: línea simple (opción por defecto).
• double: línea doble.
• dotted: línea punteada.
• wavy: línea ondulada.
• dashed: línea discontinua.
• none: no dibuja ninguna línea.

HTML subrayado color

Para crear un subrayado con colores en HTML, también será necesario darle estilos concretos. Lo haremos, como en anteriores casos, con estilos CSS.

Así, a los parámetros ‘text-decoration’ y/o ‘text-decoration-style’, les añadiremos el ‘text-decoration-color’, que le dará el color que deseemos a ese subrayado. Este color podremos seleccionarlo de tres maneras diferentes:

• Con su nombre de color HTML (por ejemplo, ‘yellow’, ‘pink’, ‘red’ o ‘blue’).
• El valor hexadecimal del color.
• El código RGB del color que queremos aplicar.

Así, en caso de que queramos realizar un subrayado rojo, estas serían las tres opciones que podríamos utilizar:

HTML subrayado amarillo

Para realizar un subrayado amarillo con HTML, se aplica ese mismo parámetro ‘text-decoration-color’ en el apartado CSS del texto que queramos subrayar de amarillo.

Para ello, podemos utilizar estas tres fórmulas:

• yellow;
• #FFFF00;
• rgb(255, 255, 0);

Con cualquiera de ellos, podremos realizar un subrayado que se vea de la siguiente manera:

Cambiar color subrayado HTML

Por último, en caso de querer modificar un color de un subrayado HTML que ya está realizado, necesitaremos buscar en el archivo HTML o CSS de la web el punto concreto que queramos modificar.

Una vez encontrado, cambiaremos el color al que nosotros deseemos, sin modificar ningún otro apartado del archivo. Así que… ¡Ten cuidado! En caso de borrar o modificar algún otro apartado parte de esa página web podrá modificarse o desaparecer.

Resumen

En resumen, te dejamos un pequeño resumen del artículo con varias preguntas frecuentes sobre subrayado HTML.

¿Qué etiqueta HTML es la encargada de agregar estilo de texto tachado?

La etiqueta HTML para agregar estilo tachado a nuestro texto es <del>. Sin embargo, esta etiqueta está en desuso, y se recomienda utilizar CSS para dar el estilo de texto tachado a tu creación.

¿Cómo subrayar textos en HTML?

Para subrayar textos únicamente con HTML es necesaria la etiqueta <u>. Sin embargo, esta etiqueta está obsoleta, por lo que se recomienda usar la etiqueta CSS ‘text-decoration: underline’.

¿Cómo subrayar un texto en HTML con color?

Para subrayar un texto HTML con un color, deberemos utilizar el parámetro CSS ‘text-decoration-color’. Además, tendremos que tener en cuenta que, posteriormente, apliquemos bien el color que deseemos, ya sea con código hexadecimal o RGB.

¿Cómo quitar el subrayado en HTML?

Para eliminar el subrayado de un texto HTML, es necesario eliminar la etiqueta <u> o la propiedad CSS ‘text-decoration: underline’ del texto, palabra o letra de la que quieras eliminar el subrayado.

Espero que este artículo te haya servido de ayuda. Si tienes dudas, no dudes en escribir un comentario.

¡Hasta la próxima!