La Etiqueta STRONG

Se utiliza para indicar que un fragmento de texto tiene importancia fuerte o seria, tanto semántica como visualmente.

La etiqueta <strong> en HTML se utiliza para indicar que un fragmento de texto tiene importancia fuerte o seria, tanto semántica como visualmente. Aunque suele mostrarse en negrita, su propósito principal es transmitir significado a navegadores, lectores de pantalla y motores de búsqueda. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<strong>Texto importante aquí</strong>

Ejemplo:

<p>
   Este es un mensaje <strong>crítico</strong> para el sistema.
</p>

Resultados:

Este es un mensaje crítico para el sistema.

Casos de uso comunes

a) Alertas o advertencias

<p>
   <strong>¡Advertencia!</strong> No cierre la ventana durante la actualización.
</p>

b) Palabras clave en un texto

<p>
   El <strong>HTML semántico</strong> mejora la accesibilidad y el SEO.
</p>

c) Instrucciones prioritarias

<p>
   <strong>Paso 1:</strong> Conecte el dispositivo antes de encenderlo.
</p>

Diferencias entre <strong>, <b>, <em> y <i>

Etiqueta Propósito
<strong> Indica importancia fuerte (semántica).
<b> Aplica negrita visual sin significado semántico.
<em> Indica énfasis (como una pronunciación acentuada).
<i> Muestra texto en cursiva para términos técnicos, citas o voces alternas.

Ejemplo comparativo:

<p>
   <strong>No tocar:</strong> Este cable está <em>energizado</em>.  
   <i>Nota: Consulte al equipo técnico.</i>
</p>

Accesibilidad

  • Los lectores de pantalla (como JAWS o NVDA) suelen anunciar <strong> con un tono más grave o pausado, señalando su importancia.

  • No abuses de <strong>, ya que demasiados elementos "fuertes" pueden confundir a los usuarios.

Personalización con CSS

Aunque el estilo predeterminado es font-weight: bold, puedes modificarlo:

strong {
  color: #e74c3c;          /* Color rojo */
  font-weight: 600;        /* Grosor personalizado */
  text-decoration: underline; 
}

Ejemplo:

<strong style="color: #2ecc71; font-size: 1.2em;">¡Éxito!</strong>

Resultado:

¡Éxito!

Errores comunes

Usar <strong> solo para negrita:

<strong>Texto en negrita sin importancia real</strong>

Anidar innecesariamente:

<strong><strong>Texto redundante</strong></strong> <!-- Evita esto -->

Buenas prácticas

  1. Prioriza la semántica: Usa <strong> solo para contenido que requiera énfasis fuerte.

  2. Combínalo con ARIA: En contextos interactivos, usa roles como role="alert" para emergencias.

  3. Evita reemplazar <b>: Si solo necesitas negrita sin significado, usa <b>.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    strong {
      background: #fff3cd;  /* Fondo amarillo claro */
      padding: 5px;
      border-left: 3px solid #ffc107; /* Borde lateral */
    }
    .error {
      color: #dc3545;
    }
  </style>
</head>
<body>
  <article>
    <h1>Guía de seguridad</h1>
    <p>
      <strong>Importante:</strong> Siempre use equipo de protección.  
      <em>No omita</em> los pasos marcados como <strong class="error">críticos</strong>.
    </p>
  </article>
</body>
</html>

Conclusión

La etiqueta <strong> es esencial para:

  • Reforzar la importancia semántica de un texto.

  • Mejorar la accesibilidad para usuarios con discapacidades.

  • Optimizar el SEO, ya que los motores de búsqueda valoran la estructura semántica.

Recuerda:

  • No confundas <strong> con <b> o <em>.

  • Úsala estratégicamente para destacar contenido clave.

  • Personaliza su estilo según el diseño de tu sitio.

¡Ahora puedes utilizar <strong> para dar énfasis adecuado a tus textos de manera profesional!