Etiqueta strong en HTML: importancia, gravedad y urgencia

La etiqueta <strong> señala que un fragmento tiene especial importancia, gravedad o urgencia. Úsala para destacar una instrucción decisiva, una precaución o algo que el lector necesita atender antes de continuar. Por ejemplo, en unas instrucciones de envío permite distinguir la advertencia sobre la dirección del paquete de los pasos habituales para embalarlo. Su significado no depende de que el navegador la muestre en negrita.

Ejemplo mínimo de strong

<p><strong>Guarda una copia antes de borrar el archivo.</strong></p>

Inserta el fragmento dentro del <body> de un documento HTML, como el del caso práctico de esta guía, y ábrelo en el navegador. Verás un párrafo con una advertencia que suele aparecer en negrita. <strong> asigna importancia semántica a la instrucción completa: lo decisivo aquí es conservar la copia antes de borrar.

Si retiras <strong> y </strong>, el texto permanece, pero pierde ese marcado de importancia y normalmente la negrita. Si solo cambias su peso con CSS, el elemento conserva su significado en HTML.

Sintaxis y contexto válido

Escribe la apertura <strong>, el contenido y el cierre </strong>; ninguna de las dos etiquetas se puede omitir. No es un elemento vacío: <strong /> no lo cierra en HTML.

Puede aparecer donde se admite contenido de frase, por ejemplo dentro de un párrafo, un encabezado o un elemento de lista. También contiene contenido de frase: texto y elementos como <a>, <span> o <em>. No envuelvas párrafos, listas ni secciones dentro de <strong>; marca el fragmento pertinente dentro de cada uno.

Anidar un <strong> dentro de otro aumenta el grado relativo de importancia del fragmento interior. Es una decisión semántica, sin garantía de una negrita más gruesa. Resérvalo para una diferencia real de importancia: repetir etiquetas para forzar una apariencia dificulta identificar la advertencia principal. Estas reglas y el significado del anidamiento se recogen en el HTML Living Standard, sección de strong.

Strong frente a b y em

Elige según lo que comunica el texto, aunque el aspecto inicial se parezca:

Cambiar la advertencia a <b> puede conservar la negrita habitual, pero elimina el significado de especial importancia. <em> permite acentuar una palabra del discurso; <strong> cambia su importancia relativa, sin cambiar el sentido de la frase. MDN explica la diferencia entre strong, b y em.

Si solo quieres una apariencia en negrita, utiliza CSS font-weight en el elemento apropiado. Un <span> puede agrupar un fragmento para darle estilo sin asignarle importancia.

Caso práctico: redactar un aviso de envío

Primero redacta la precaución como una instrucción comprensible. Después marca la frase decisiva; no envuelvas todo el párrafo por costumbre. Aquí el plazo de recepción es información normal, mientras que comprobar la dirección es la acción que debe atenderse antes de entregar el paquete.

Guarda este documento completo como envio.html y ábrelo en el navegador. Incluye sus estilos y no necesita JavaScript, servidor ni archivos externos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Instrucciones para enviar libros</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      margin: 1.5rem;
    }

    .instrucciones {
      max-width: 38rem;
      margin-inline: auto;
    }

    .precaucion {
      color: #8a2c0d;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <main class="instrucciones">
    <h1>Cómo enviar tus libros</h1>
    <ol>
      <li>Protege los libros y colócalos en una caja resistente.</li>
      <li>Escribe el nombre y la dirección de la persona destinataria.</li>
      <li>Entrega el paquete y conserva el comprobante.</li>
    </ol>
    <p id="aviso-direccion">
      Recibimos paquetes de lunes a viernes.
      <strong class="precaucion">Importante: comprueba la dirección
      antes de entregar el paquete.</strong>
    </p>
    <p>El servicio de <b>Seguimiento</b> permite consultar el recorrido
      del paquete.</p>
  </main>
</body>
</html>

Verás un título, tres pasos y dos párrafos. La precaución aparecerá en negrita y en un tono oscuro; «Seguimiento» suele aparecer en negrita por el estilo predeterminado de <b>. El marcado distingue sus funciones, aunque ambos fragmentos tengan un grosor parecido.

Prueba estos cambios por separado, restaurando el documento entre pruebas:

1. Elimina el bloque <style> y recarga. Desaparecen los estilos personalizados, pero permanecen los pasos y la frase «Importante: comprueba la dirección antes de entregar el paquete». <strong> y <b> conservan sus significados y normalmente su negrita del navegador.
2. Cambia font-weight: 700 por font-weight: 400. La precaución pierde la negrita, pero sigue marcada con <strong> y sigue siendo comprensible por sus palabras.
3. Retira solo la apertura y el cierre de <strong>. La advertencia conserva su texto, aunque ya no tiene el marcado de importancia ni la clase que aplicaba su estilo. Sustituirlo por <b> también perdería la importancia semántica.

Atributos y accesibilidad

<strong> no tiene atributos específicos vigentes. Admite los atributos globales de HTML: class permite seleccionar el fragmento con CSS, id lo identifica de forma única y lang indica su idioma si cambia respecto al texto que lo rodea. En el ejemplo, class="precaucion" selecciona la advertencia; el id pertenece al párrafo y no es necesario para que <strong> funcione.

font-weight es una propiedad de CSS, no un atributo HTML. Los valores 400 y 700 equivalen a normal y bold, respectivamente, según la referencia de font-weight de MDN. Las propiedades DOM que se manipulan desde JavaScript tampoco son atributos específicos de <strong>; este ejemplo no necesita scripts.

Escribe la importancia con palabras: «Importante» y la acción concreta mantienen la precaución entendible sin color ni negrita. No prometas que todos los lectores de pantalla cambien la voz o anuncien el elemento de la misma manera. El mapeo accesible de strong describe su representación en las API de accesibilidad, pero no garantiza una entonación concreta. No hace falta añadir un rol ARIA redundante.

Errores y preguntas frecuentes

¿Strong siempre aparece en negrita? Es su presentación habitual. Si no ocurre, inspecciona font-weight en las herramientas del navegador y localiza la regla CSS que lo determina. Revisa también la fuente utilizada: el aspecto final puede variar. Cambiar ese estilo conserva el significado del elemento.

¿Strong sirve para títulos? Un título que estructura la página necesita un encabezado <h1> a <h6>. Puedes usar <strong> dentro de un encabezado para señalar una parte especialmente importante, pero no sustituye al encabezado ni crea su nivel.

¿Conviene marcar todo un párrafo? Puede ser válido si todo el contenido de ese párrafo es importante, como en el ejemplo mínimo. En instrucciones largas, selecciona la frase decisiva para que la advertencia se pueda distinguir del contexto.

¿Mejora el posicionamiento en buscadores? Esta etiqueta expresa significado en HTML; no garantiza mejoras de ranking. Úsala porque el contenido merece importancia, sin repetir palabras clave ni convertir todos los textos en avisos.

Para ampliar las alternativas, consulta las guías de b y la atención al texto, em y el énfasis y h1 a h6 y la jerarquía de encabezados.

Compatibilidad y fuentes

<strong> está ampliamente disponible en los navegadores actuales y funciona sin JavaScript ni bibliotecas. La compatibilidad documentada por MDN se consultó el 4 de octubre de 2026. Ese soporte no garantiza una apariencia o una lectura idénticas en todas las herramientas.

El HTML Living Standard fija el significado, el contenido permitido, las etiquetas y los atributos. Las referencias de MDN y W3C enlazadas arriba complementan la comparación de elementos, el estilo y el mapeo accesible.