La Etiqueta B

Se utiliza para aplicar negrita a un texto sin implicar un significado semántico especial. Es un elemento puramente visual heredado de HTML, pero aún válido en HTML5 para casos específicos.

La etiqueta <b> se utiliza para aplicar negrita a un texto sin implicar un significado semántico especial. Es un elemento puramente visual heredado de HTML, pero aún válido en HTML5 para casos específicos.

Sintaxis básica

<p>Este es un texto <b>importante visualmente</b> pero no semántico.</p>

Resultado: Este es un texto importante visualmente pero no semántico.

Casos de uso correctos

Destacar palabras clave sin significado especial

<p>El <b>tiempo de carga</b> es crucial para la experiencia de usuario.</p>

Nombres de productos o términos técnicos

<p>Nuevo lanzamiento: <b>XPhone 12 Pro</b> con pantalla OLED.</p>

Nombres de productos o términos técnicos

<p>Nuevo lanzamiento: <b>XPhone 12 Pro</b> con pantalla OLED.</p>

Resaltado visual en listas

<ul>
  <li><b>Paso 1:</b> Descargar el instalador</li>
  <li><b>Paso 2:</b> Ejecutar como administrador</li>
</ul>

Diferencias clave con <strong>

Etiqueta Propósito Semántica Ejemplo
<b> Negrita visual Sin importancia semántica Palabras clave
<strong> Importancia semántica Énfasis en significado Alertas, advertencias
<em> Énfasis semántico Cambio de tono "Esto es urgente"
<mark> Resaltado contextual Destacar relevancia Resultados de búsqueda

Accesibilidad

  • Los lectores de pantalla no dan énfasis al texto en <b>.

  • Si el resaltado tiene significado, usa <strong>:

<!-- Correcto para significado -->
<p><strong>¡Advertencia!</strong> No apague el equipo durante la actualización.</p>

Estilización con CSS

Personaliza el estilo manteniendo la semántica:

<style>
  b.custom-bold {
    color: #e74c3c;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }
</style>

<p>Texto con <b class="custom-bold">negrita personalizada</b></p>

Errores comunes

Usar para significado semántico

<!-- Incorrecto -->
<p><b>¡Cuidado!</b> Piso mojado</p>

<!-- Correcto -->
<p><strong>¡Cuidado!</strong> Piso mojado</p> 

Anidación innecesaria

<!-- Redundante -->
<p><b><b>Texto doble negrita</b></b></p>

Reemplazar encabezados

<!-- Incorrecto -->
<b style="font-size: 24px;">Título importante</b>

<!-- Correcto -->
<h2>Título importante</h2>

Ejemplos avanzados

Glosario técnico

<dl>
  <dt><b>SEO</b></dt>
  <dd>Optimización para motores de búsqueda</dd>
</dl>

Comparación de precios

<p>Precio anterior: <b style="text-decoration: line-through;">$200</b> Nuevo: $150</p>

Botones personalizados

<button style="border: none; background: none;">
  <b>Reproducir video</b>
</button>

Buenas prácticas

Usar CSS para control visual:

<style>
  .keyword { font-weight: bold; }
</style>
<p>Las <span class="keyword">variables</span> son esenciales en programación.</p>

Priorizar semántica cuando corresponda:

  • Usar <strong> para importancia

  • Usar <em> para énfasis

  • Usar <mark> para resaltado contextual

Evitar uso excesivo:

  • Demasiada negrita reduce la jerarquía visual

Comparación histórica

HTML Versión Estado de <b> Alternativas modernas
HTML4 Presentacional aceptado CSS font-weight
XHTML Desaprobado (luego restaurado) Uso con CSS
HTML5 Válido para uso específico <strong>, <mark>, <em>

Conclusión:

La etiqueta <b> es útil para:

  • Resaltado visual sin significado adicional

  • Mantener compatibilidad con sistemas heredados

  • Casos donde el peso semántico no es relevante

Siempre que necesites transmitir significado, prioriza elementos semánticos como <strong>, <em> o <mark>. ¡Usa la negrita con propósito!