Cómo Poner Cursiva, Subrayado y Negrita en HTML

¿Te preguntas cómo dar formato a tu texto en HTML de manera efectiva? ¿Quieres resaltar partes importantes para que tu contenido sea más atractivo? ¿Te gustaría aprender a poner negrita, cursiva, subrayado y tachado en tus publicaciones? ¡Estás en el sitio correcto! Dar formato a un texto puede conseguir que tu contenido sea más dinámico y fácil de leer, capturando mejor la atención de tus lectores y destacando los puntos clave de tu mensaje.

Un texto bien estructurado y visualmente atractivo facilita la lectura y mantiene el interés de tus lectores. Es por eso que, además de cuidar el contenido, debe cuidarse también el formato en el que se presenta. Un buen uso del formato ayuda a destacar puntos clave, mejorar la comprensión y crear una experiencia de lectura más fluida y agradable. En este artículo, aprenderás a poner la negrita en HTML, así como la cursiva, el subrayado y el tachado, para mejorar la presentación de tu contenido y asegurar que tus publicaciones sean efectivas y atractivas.

Qué es el código HTML y para qué sirve

El Lenguaje de Marcado de Hipertexto (HTML) es el código utilizado para estructurar y desplegar una página web y sus contenidos, proporcionando el marco sobre el cual se construyen las páginas y los sitios en Internet. El término «hipertexto» se refiere a los enlaces que conectan páginas web entre sí, permitiendo la navegación tanto dentro de un mismo sitio como entre diferentes sitios web.

HTML utiliza etiquetas para organizar el texto, las imágenes y otros contenidos que se mostrarán en un navegador web. Estas etiquetas ayudan a estructurar el contenido de manera que los navegadores puedan interpretarlo y presentarlo correctamente. Cada etiqueta HTML está rodeada por signos de menor que “<” y mayor que “>”, y el nombre del elemento dentro de la etiqueta no distingue entre mayúsculas y minúsculas.

Las etiquetas HTML suelen venir en pares, con una etiqueta de apertura y una de cierre. La etiqueta de apertura, por ejemplo, <p>, señala el comienzo de un elemento, mientras que la etiqueta de cierre, como </p>, marca su final. Esto asegura que el navegador interprete correctamente el inicio y el final del contenido que debe formatear o estructurar. Algunas etiquetas, como <img>, son auto-cerrantes y no requieren una etiqueta de cierre.

A la hora de poner la negrita en HTLM, la cursiva, el subrayado o el tachado, disponemos de una serie de etiquetas específicas que dan formato a nuestro contenido de manera sencilla. A continuación, te mostramos cómo utilizar estas etiquetas para aplicar estos estilos a tus contenidos.

Cómo poner negrita en HTML

La negrita en HTML es el formato más utilizado en Internet cuando se quiere resaltar algo en concreto en un texto de una página web. Existen dos etiquetas para poner negrita en HTML, la etiqueta <b> y la etiqueta <strong>. Todo lo que escribas dentro de estas estiquetas aparecerá en negrita. Estas estiquetas se suelen utilizar para enfatizar el texto, resaltándolo y haciéndolo más visible.

Por lo tanto, si escribes el código de la negrita en HTML de la siguiente manera:

<p>Este es un <b>ejemplo de texto en negrita</b> utilizando la etiqueta.</p>

Donde <p></p> es la etiqueta que indica que es un párrafo y <b></b> es la etiqueta de la negrita, se mostrará de la siguiente manera:

Este es un ejemplo de texto en negrita utilizando la etiqueta.

Lo mismo ocurre si se utiliza la etiqueta <strong></strong>:

<p>Este es un <strong>ejemplo de texto en negrita</strong> utilizando la etiqueta.</p>

Este es un ejemplo de texto en negrita utilizando la etiqueta.

Aunque las dos etiquetas se ven igual en la mayoría de los navegadores, <strong> añade un significado adicional al texto, indicando que es de especial importancia o relevancia. Esto puede ser muy útil si se tiene en cuenta la accesibilidad y el SEO.

Cómo poner cursiva en HTML

La cursiva se utiliza para enfatizar el texto de una manera más sutil que la negrita, y a menudo se emplea para indicar énfasis o para resaltar el contenido importante de una oración. Aunque es menos llamativa que la negrita y no se percibe tan claramente, poner cursiva en HTML sigue siendo una herramienta eficaz para destacar palabras o frases que requieren atención especial.

Hay dos etiquetas en HTML para marcar un texto en cursiva: <em> y <i>. Todo lo que escribas entre las etiquetas <em> y </em> o <i> y </i> aparecerá en cursiva en la página web. Esta etiqueta es útil para indicar que una palabra o frase tiene un significado especial, o para destacar algo que podría pasar desapercibido.

Por lo tanto, si escribes cualquiera de las dos etiquetas para poner cursiva en HTML como hacemos a continuación:

<p>Este es un <i>ejemplo de texto en cursiva</i> utilizando la etiqueta.</p>

<p>Este es un <em>ejemplo de texto en cursiva</em> utilizando la etiqueta.</p>

El resultado será el siguiente:

Este es un ejemplo de texto en cursiva utilizando la etiqueta.

Aunque ambos formatos tienen el mismo aspecto visual en la mayoría de los navegadores, la etiqueta <em> no solo aplica cursiva, sino que también añade énfasis semántico, lo que puede ser importante para la accesibilidad y el SEO, al indicar que el contenido tiene un peso o significado adicional en el contexto.

Cómo poner subrayado en HTML

El subrayado es una forma de dar énfasis a un texto en Internet, pero hay que ser cautelosos al usarlo y hacerlo solo cuando sea necesario. En la web, lo más habitual es que los textos subrayados sean enlaces, por lo que subrayar algo que no lo es puede confundir al lector. Por eso, es recomendable utilizar el subrayado con moderación y solo en casos donde realmente sea necesario destacar el texto.

La etiqueta HTML que se utiliza para subrayar un texto es la etiqueta <u>. Todo lo que se escriba entre las etiquetas <u> y </u> aparecerá subrayado en el sitio web. Por lo tanto, si pones subrayado en HTML de la siguiente manera:

<p>Este es un <u>ejemplo de texto subrayado</u> utilizando la etiqueta.</p>

En la página web aparecerá así:

Este es un ejemplo de texto subrayado utilizando la etiqueta.

Es importante recordar que, debido a la convención en Internet de usar el subrayado para los enlaces, es mejor evitar el subrayado para otros propósitos a menos que sea absolutamente necesario, para no confundir a los lectores.

Cómo tachar un texto en HTML

Tachar un texto en Internet se utiliza generalmente para indicar que algo es incorrecto, que ha sido modificado o que ya no es relevante. Es una forma visual de mostrar cambios o eliminar información sin borrarla completamente, permitiendo al lector ver la corrección o actualización realizada.

Existen dos etiquetas para tachar un texto en HTML: <s> y <del>. Ambas tienen un propósito similar, pero con diferencias en su uso semántico:

• <s>: Esta etiqueta se usa para indicar que el texto es incorrecto o ha sido anulado. Es una opción más general para tachar cualquier texto que se quiera desmarcar visualmente.
• <del>: Esta etiqueta se utiliza específicamente para señalar que el texto ha sido eliminado o borrado como parte de una modificación o actualización del contenido. La etiqueta <del> proporciona un significado semántico adicional, indicando a los navegadores y motores de búsqueda que el texto ha sido eliminado del documento.

Por lo tanto, si escribes cualquiera de las dos etiquetas para tachar un texto en HTML como hacemos a continuación:

<p>Este es un <s>ejemplo</s> de texto tachado utilizando la etiqueta.</p>

<p>Este es un <del>ejemplo</del> de texto tachado utilizando la etiqueta.</p>

El resultado visual sería el siguiente:

Este es un ejemplo de texto tachado utilizando la etiqueta.

La elección entre <s> y <del> depende del contexto. Si simplemente deseas marcar el texto como incorrecto o no relevante, <s> es una buena opción. Si, en cambio, estás indicando que el texto fue eliminado como parte de una actualización o edición, <del> es la opción más adecuada.

Uso de CSS para cambiar el formato del texto

Además de HTML, también puedes utilizar CSS (Cascading Style Sheets) para controlar la apariencia y el formato del texto en una página web. CSS es un lenguaje de diseño utilizado para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML se encarga de la estructura y el contenido, CSS se utiliza para mejorar la apariencia visual, incluyendo el formato de texto como la negrita, cursiva, subrayado y tachado. A continuación, te mostramos cómo puedes usar CSS para aplicar estos estilos al texto.

#1 Negrita con CSS

Además de la negrita en HTML, la propiedad CSS font-weight se utiliza para controlar el grosor de la fuente del texto en una página web. Para poner el texto en negrita utilizando CSS, debes establecer el valor de la propiedad font-weight en bold.

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

Este es un texto en negrita

#2 Cursiva con CSS

La propiedad CSS font-style se emplea para controlar el estilo de la fuente del texto, y puedes usarla para poner texto en cursiva. Para ello, debes configurar el valor de la propiedad font-style en italic.

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

Este es un texto en cursiva

#3 Subrayado con CSS

La propiedad CSS text-decoration se utiliza para agregar decoraciones al texto, como el subrayado. Para subrayar un texto, debes establecer el valor de la propiedad text-decoration en underline.

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

Este es un texto subrayado

#4 Texto Tachado con CSS

Para tachar un texto usando CSS, puedes utilizar la propiedad text-decoration-line. Esta propiedad te permite aplicar una línea a través del texto estableciendo su valor en line-through.

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

Este es un texto tachado

Conclusión: Da formato a tu texto poniendo negrita, cursiva, subrayado y tachado en HTML

Dar formato a tus textos añadiendo negritas, cursivas, subrayado y texto tachado en HTML según las necesidades del escrito, puede ayudar considerablemente a la lectura y comprensión del artículo. La negrita en HTML es la opción más utilizada para enfatizar información clave, guiar la atención del lector y mejorar la estructura visual del contenido. Sin embargo, elijas la que elijas, es importante usarlos con moderación para evitar la sobrecarga visual y mantener la claridad del mensaje.

Con el conocimiento adecuado de HTML y CSS, puedes mejorar el diseño web de tu página creando textos que no solo sean visualmente atractivos, sino también efectivos en transmitir tu mensaje. Las estiquetas como <b>, <i>, <u> y <s> ofrecen opciones variadas para aplicar diferentes estilos a tu texto, como negrita, cursiva, subrayado y tachado.

¿Qué te ha parecido nuestro artículo sobre cómo poner negrita, cursiva, subrayado y tachado en HTML? ¿Hay algo que te haya llamado la atención? ¿Crees que nos hemos dejado algo atrás? ¿Te has quedado con alguna duda o pregunta? Entonces te animamos a que dejes un comentario. Estamos aquí para responder a tus preguntas y ayudarte a aprovechar al máximo esta poderosa herramienta de marketing digital.