Etiqueta HTML <strong>
La etiqueta HTML <strong> marca texto con gran importancia, seriedad o urgencia. Significado, accesibilidad, ejemplos y diferencias con <b> y <em>.
La etiqueta HTML <strong> marca texto como de gran importancia, seriedad o urgencia. Este es su propósito principal: transmite significado, no solo apariencia. Los navegadores renderizan el contenido de <strong> en negrita de forma predeterminada, pero la negrita es un efecto secundario — el verdadero valor está en indicarle a los navegadores, los motores de búsqueda y la tecnología de asistencia que ese texto importa más que el contenido circundante.
Esta página explica qué significa <strong>, en qué se diferencia del estilo negrita y de las etiquetas similares <b> y <em>, cómo lo tratan los lectores de pantalla y el SEO, y cómo usarlo correctamente con ejemplos funcionales.
¿Por qué usar <strong> en lugar de estilo negrita?
Es útil separar dos ideas diferentes:
- Peso visual — texto que simplemente se ve en negrita. Esto se logra con la propiedad CSS
font-weight: boldo la etiqueta<b>. Solo cambia la apariencia y no transmite ningún significado. - Importancia — texto que es más importante que su entorno. Eso es lo que representa
<strong>. La representación en negrita es la presentación predeterminada de esa importancia, pero puedes cambiar el estilo con CSS y el significado permanece.
Usa <strong> cuando el énfasis forma parte del significado del contenido — una advertencia, un plazo, una instrucción crítica. Usa estilo negrita (CSS o <b>) cuando solo quieres que las palabras destaquen visualmente, como el nombre de un producto o una palabra clave que resaltas para facilitar la lectura.
Aunque HTML4 definía <strong> como que implicaba un énfasis más fuerte, HTML5 lo redefinió para representar la gran importancia del contenido. También puedes anidar <strong> dentro de <strong> para aumentar la importancia relativa de una frase.
Si quieres texto en negrita puramente decorativo — sin importancia adicional — usa la etiqueta <b> o la propiedad CSS font-weight en lugar de <strong>.
<strong> vs <b> vs <em>
Estas tres etiquetas cambian el aspecto del texto, pero tienen significados distintos. Elegir la correcta es lo que hace que tu marcado sea semántico.
| Etiqueta | Apariencia predeterminada | Significado | Úsala para |
|---|---|---|---|
<strong> | Negrita | Gran importancia, seriedad, urgencia | Advertencias, plazos, instrucciones críticas |
<b> | Negrita | Sin importancia añadida — desplazamiento estilístico | Palabras clave, nombres de productos, frase inicial |
<em> | Cursiva | Énfasis de estrés que cambia el significado hablado | Palabras que pronunciarías con énfasis vocal |
Una forma rápida de recordarlo: <strong> significa "esto es importante", <em> significa "di esto de forma diferente" y <b> significa "solo ponlo en negrita". Para texto resaltado (en lugar de importante), consulta la etiqueta <mark>.
Accesibilidad y SEO
Los beneficios genuinos de <strong> son la semántica y la búsqueda:
- Los motores de búsqueda pueden usar el marcado como señal de que el texto envuelto es más significativo que el resto del contenido, lo que ayuda a describir de qué trata la página.
- La tecnología de asistencia recibe la importancia como parte de la estructura del documento. La mayoría de los lectores de pantalla populares no cambian automáticamente su voz para
<strong>de forma predeterminada, pero la importancia sigue siendo expuesta y los usuarios pueden configurar su software para anunciarla.
En resumen, no uses <strong> para obtener énfasis vocal — úsalo porque el texto genuinamente es más importante. El significado es en lo que se basan las herramientas; el aspecto en negrita es solo el predeterminado.
Sintaxis
La etiqueta <strong> viene en pares. El contenido se escribe entre las etiquetas de apertura (<strong>) y cierre (</strong>). Olvidar el cierre </strong> es un error frecuente — sin él, el resto del texto puede quedar marcado como importante también.
Ejemplo de la etiqueta HTML <strong>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We’ve used the <strong>strong</strong> tag to highlight this important part of the text.</p>
</body>
</html>Resultado
Ejemplo: urgencia y advertencias
Un uso natural de <strong> es señalar algo que el lector no debe pasar por alto:
<!DOCTYPE html>
<html>
<body>
<p><strong>Warning:</strong> this action permanently deletes your account.</p>
<p>Submit the form before <strong>5:00 PM on Friday</strong> — late entries are not accepted.</p>
</body>
</html>Atributos
La etiqueta <strong> admite los Atributos Globales y los Atributos de Evento. Por ejemplo, puedes aplicar una clase para darle un estilo diferente:
<strong class="warning">Important notice</strong>