HTML: cómo poner negrita, cursiva y subrayado

Cuando una persona empieza a crear sus primeras páginas web, una de las dudas más frecuentes es cómo resaltar palabras dentro de un texto. En un procesador como Word basta con pulsar un botón para dejar un párrafo en negrita o en cursiva, pero en HTML el asunto funciona de otra forma: el formato no se aplica con botones, sino con etiquetas que rodean el texto que se quiere destacar. Conocer esas etiquetas, entender qué significa cada una y saber cuándo conviene usarlas es una de las bases de la maquetación web y una habilidad muy útil para cualquiera que publique contenido en internet.

En este artículo se explica, con ejemplos prácticos, cómo poner negrita, cursiva y subrayado en HTML, qué diferencia existe entre etiquetas que se ven iguales pero significan cosas distintas, cómo se combinan varios formatos en una misma frase y qué errores conviene evitar para no escribir código confuso. Para que todo se entienda, los ejemplos se muestran de forma legible: por ejemplo, aparece como texto visible y no como un formato ya aplicado.

Antes de empezar: cómo leer los ejemplos

A lo largo de esta guía los ejemplos de código aparecen con los signos < y > escritos como texto, de manera que el lector puede ver exactamente qué etiqueta debe escribir sin que el navegador la ejecute. Cuando un ejemplo se presenta así:

texto en negrita

lo que se está mostrando es la instrucción que debe escribirse dentro del archivo HTML. Cada ejemplo indica además el resultado que se verá en pantalla, para que el efecto quede claro incluso si nunca se ha tocado una página web.

Poner texto en negrita: las etiquetas b y strong

La forma más directa de poner un texto en negrita es rodearlo con la etiqueta , cuyo nombre viene de la palabra inglesa bold. Todo lo que quede entre y su cierre se verá con un trazo más grueso y oscuro que el resto del párrafo. El ejemplo mínimo es este:

Este fragmento se ve en negrita

El resultado es que la frase aparece remarcada con un trazo más pesado. La etiqueta existe desde las primeras versiones de HTML y su única función es cambiar la apariencia: negrita por negrita, sin añadir ningún significado especial al contenido.

Junto a existe otra etiqueta con el mismo aspecto visual pero con un propósito más profundo: . Aunque en pantalla el texto también se muestra en negrita, comunica que ese contenido tiene importancia dentro del documento. Para un navegador, para un lector de pantalla o para un buscador no es lo mismo afirmar "esta palabra es visualmente gruesa" que afirmar "esta palabra es importante". Por eso se recomienda cuando se quiere dar un énfasis real a una idea:

Recuerda que el plazo es improrrogable y vence el último día del mes.

El navegador mostrará la palabra improrrogable en negrita y, además, los programas de asistencia podrán anunciarla con un tono de voz especial para personas con discapacidad visual. La regla práctica es sencilla: si solo se busca un efecto decorativo, sirve ; si lo que se quiere es señalar importancia, se usa . En los textos reales de una página web casi siempre se necesita , porque las palabras que se remarcan suelen ser justamente las que importan.

Las dos etiquetas admiten textos de cualquier extensión: se puede poner en negrita una palabra suelta, una frase completa o incluso un bloque largo, con la única condición de abrir y cerrar la etiqueta en el lugar correcto. El error más común del principiante es olvidar el cierre o ; cuando eso pasa, todo lo que sigue queda en negrita hasta que el navegador encuentra otra marca o el documento termina, y el diseño se rompe por completo.

La cursiva: las etiquetas i y em

Para escribir en cursiva, HTML ofrece un par de etiquetas equivalente al de la negrita. La primera es , abreviatura de italic, que inclina el texto hacia la derecha sin añadir ningún significado. La segunda es , abreviatura de emphasis, que además de inclinar el texto comunica énfasis, igual que comunica importancia en la negrita.

El ejemplo básico con es el siguiente:

texto en cursiva

Con esa instrucción el navegador inclina el texto hacia la derecha. La etiqueta se usa, por ejemplo, para los títulos de libros, películas u obras de arte dentro de un párrafo, y para palabras en otro idioma que todavía no forman parte del vocabulario habitual.

La etiqueta se escribe de la misma manera:

Esto sí hay que revisarlo antes de firmar.

En ese ejemplo la palabra sí aparecerá en cursiva, pero además el énfasis quedará registrado para los sistemas que leen la página. La diferencia entre y es la misma que entre y : la primera cambia solo el aspecto y la segunda aporta un matiz de significado. Cuando se redacta contenido para la web conviene pensar primero en el sentido: si una palabra se diría con un tono de voz más fuerte al leerla en voz alta, lo correcto es .

Subrayado: la etiqueta u, con moderación

Para subrayar un texto en HTML se usa la etiqueta , de underline. Su forma es idéntica a la de las anteriores:

texto subrayado

El navegador dibuja una línea debajo del texto. Sin embargo, el subrayado es el formato que más cuidado exige, porque los usuarios de internet tienen aprendido que un texto subrayado y de color es un enlace. Si se subrayan palabras que no llevan a ningún sitio, quien lee la página puede intentar hacer clic y sentirse confundido al comprobar que no ocurre nada. Por esa razón, la recomendación general es reservar el subrayado para casos muy concretos, como señalar una corrección ortográfica, destacar una referencia dentro de un documento técnico o marcar una palabra que luego se define en el mismo texto, y evitar subrayar frases completas solo por estética.

Además, conviene recordar que el subrayado de los enlaces lo pone el propio navegador o la hoja de estilos de la página; no hace falta añadir a un enlace para que se vea subrayado, y si se hace, el resultado puede ser una doble línea o un aspecto descuidado.

Un extra útil: texto tachado con del y s

Aunque la pregunta de este artículo menciona tres formatos, conviene conocer dos etiquetas más que aparecen constantemente en la web: las que tachan el texto. La primera es <del>, que representa contenido que fue eliminado de un documento, como en las correcciones de un contrato o en el historial de cambios de una página:

El precio anterior era <del>120</del> y ahora es 90.

La segunda es <s>, que se usa para contenido que ya no es correcto o que quedó obsoleto, pero que se conserva visible a propósito, como una oferta que terminó:

<s>Envío gratis solo hasta el viernes.</s>

Visualmente ambas dibujan una línea sobre el texto, pero su significado es distinto: <del> indica una eliminación real y <s> indica que algo dejó de ser válido. Usar la etiqueta correcta ayuda a que el contenido sea comprensible para las máquinas y para los programas de accesibilidad.

Combinar varios formatos en una misma frase

Las etiquetas de formato se pueden combinar para lograr, por ejemplo, una palabra en negrita y cursiva a la vez. Solo hay que anidarlas correctamente, es decir, abrir y cerrar cada una en el orden adecuado, como se muestra aquí:

atención, dato importante

En este ejemplo la etiqueta se abre primero y se cierra antes que ; esa es la forma correcta de encadenar marcas. Si los cierres se cruzan, el navegador puede interpretar el documento de forma inesperada y el formato no se aplica bien. La misma lógica vale para combinar negrita con subrayado o cursiva con tachado: primero se define el contenido y luego se rodea con las etiquetas una dentro de otra, siempre de la más interna a la más externa.

Conviene, eso sí, no abusar de las combinaciones. Un texto donde casi todas las palabras tienen dos o tres formatos a la vez es difícil de leer y pierde el efecto de jerarquía que se buscaba. El formato debe usarse como un semáforo: pocas señales, bien colocadas, orientan mejor que muchas luces encendidas al mismo tiempo.

Qué no se debe hacer: formatos de adorno y estilos confusos

Existen varias malas prácticas muy extendidas que conviene evitar. La primera es usar negrita, cursiva o subrayado en bloques enteros: un párrafo completo en negrita cansa la vista y hace que nada destaque de verdad. La segunda es subrayar texto que no es un enlace, como ya se explicó. La tercera es escribir todo un texto con mayúsculas para simular un grito cuando lo que se necesita es una etiqueta de formato.

También hay que señalar que en el pasado se usaban etiquetas como , ya obsoletas, para cambiar el aspecto del texto directamente desde HTML. Hoy la recomendación es separar el contenido de la presentación: HTML define qué es cada cosa y CSS define cómo se ve. Si lo que se busca es un efecto puramente visual sin significado semántico, la alternativa correcta a las etiquetas de formato es una hoja de estilos con propiedades como font-weight, font-style y text-decoration. Por ejemplo, para dejar un párrafo en negrita con una regla de estilo aplicada directamente, se podría escribir algo parecido a esto:

Este párrafo se ve en negrita por CSS.

Esa forma funciona, aunque lo más ordenado es llevar esas reglas a un archivo CSS externo y no repetirlas dentro de cada etiqueta. La idea central es elegir la herramienta según la intención: si la palabra es importante, ; si lleva énfasis, ; si solo se quiere un aspecto concreto, una regla CSS.

Tabla resumen de etiquetas para dar formato al texto

Para terminar, esta tabla reúne las etiquetas explicadas con su efecto visual y el caso en el que se recomienda usarlas:

Etiqueta	Efecto visual	Cuándo usarla
<b>	Texto en negrita	Cuando solo se busca el aspecto de negrita sin significado adicional.
<strong>	Texto en negrita	Cuando el texto tiene importancia real dentro del contenido.
<i>	Texto en cursiva	Para títulos de obras, palabras extranjeras o tono alternativo sin énfasis.
<em>	Texto en cursiva	Cuando la frase necesita énfasis, como si se leyera en voz alta.
<u>	Texto subrayado	Solo en casos puntuales, porque el subrayado se asocia con los enlaces.
<del>	Texto tachado	Para marcar contenido eliminado o corregido en un documento.
<s>	Texto tachado	Para indicar que algo ya no es válido o quedó obsoleto.

Resumen rápido

Si se quiere llevar una idea central de esta guía, puede resumirse en estas pautas:

Para negrita visual se usa ; para marcar importancia se usa .
Para cursiva visual se usa ; para marcar énfasis se usa .
El subrayado con debe reservarse a casos contados para no confundirlo con un enlace.
<del> y <s> tachan el texto y cada una tiene un matiz distinto.
Los formatos se pueden combinar anidando las etiquetas en el orden correcto.
Si el formato es puramente decorativo, la alternativa limpia es CSS y no etiquetas de adorno.

Dominar estas etiquetas convierte cualquier texto plano en una página legible y bien jerarquizada, y es un primer paso sólido antes de pasar a las hojas de estilo. Quienes publican contenido en la web con regularidad encuentran en este tipo de detalles la diferencia entre un artículo que se lee con fluidez y uno que cansa a la vista. En Kardex Tauro se publican guías prácticas como esta para acompañar el aprendizaje paso a paso.

Labels:

#html #negrita cursiva #formato de texto