Etiqueta b en HTML

¿Qué es la etiqueta <b> en HTML?

La etiqueta <b> es una de las etiquetas de formato de texto de HTML5 y se utiliza para enfatizar una palabra o frase en negrita en el contenido de una página web.

La etiqueta <b> se utiliza cuando el texto enfatizado no tiene un significado adicional, es decir, se utiliza solo para hacer que el texto se destaque.

Si el texto enfatizado tiene un significado adicional o debe ser reconocido por los motores de búsqueda, se debe utilizar la etiqueta <strong> en su lugar.

Ejemplo de uso

Aquí hay un ejemplo de cómo se utiliza la etiqueta <b>:


<p>El <b>planeta Tierra</b> es el tercer planeta del sistema solar.</p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <b> para enfatizar la frase “planeta Tierra”. Cuando se muestra en un navegador web, el texto enfatizado se mostrará en negrita.

Es importante tener en cuenta que la etiqueta <b> solo se utiliza para presentar el texto de una manera más atractiva visualmente. Si se desea agregar significado adicional al texto enfatizado, se debe utilizar la etiqueta <strong> en su lugar.

Atributos

La etiqueta <b> es una etiqueta de formato de texto bastante simple, por lo que tiene muy pocos atributos.

Aquí están los atributos principales que se pueden utilizar con la etiqueta <b>:

  • id: permite identificar un elemento único en la página web para su posterior manipulación con JavaScript o CSS.
  • class: se utiliza para asignar una o varias clases CSS al elemento.
  • style: se utiliza para aplicar estilos CSS directamente al elemento.
  • title: se utiliza para proporcionar información adicional sobre el texto enfatizado cuando se pasa el cursor sobre él.
  • lang: se utiliza para especificar el idioma del contenido.
  • dir: se utiliza para especificar la dirección de lectura del contenido.
  • accesskey: se utiliza para especificar una tecla de acceso rápido para enfatizar el texto.

Es importante tener en cuenta que la etiqueta <b> solo se utiliza para presentar el texto de una manera más atractiva visualmente, por lo que los atributos que se utilizan con esta etiqueta generalmente se relacionan con la presentación del texto y no con su contenido semántico.

Ejemplo:

Aquí tienes un ejemplo de cómo utilizar la etiqueta <b> en HTML5 con algunos de sus atributos más comunes:


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta &lt;b&gt;</title>
</head>
<body>

	<h1><b id="titulo-principal" class="titulo-grande" style="color: red;">Bienvenido</b> a mi sitio web</h1>
	<p>Este es un sitio web <b lang="es" dir="ltr">interesante</b> sobre HTML5 y CSS3.</p>

</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado los siguientes atributos:

  • id: hemos asignado un id “titulo-principal” al elemento <b> para poder manipularlo más tarde con CSS o JavaScript.
  • class: hemos asignado la clase “titulo-grande” al elemento <b> para aplicar estilos CSS específicos.
  • style: hemos aplicado un color rojo al elemento <b> utilizando estilos CSS directamente en el atributo style.
  • lang: hemos utilizado el atributo lang para especificar que la palabra “interesante” está en español.
  • dir: hemos utilizado el atributo dir para indicar la dirección de lectura (izquierda a derecha).

Más ejemplos

Aquí te dejo dos ejemplos avanzados de cómo utilizar la etiqueta <b> en HTML5.

Ejemplo 1: Uso de CSS avanzado con la etiqueta <b>


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta &lt;b&gt;</title>
	<style>
		b {
			color: #F08080;
			font-weight: bold;
			text-shadow: 2px 2px 2px #ccc;
		}
		p b:first-of-type {
			font-size: 24px;
		}
		p b:last-of-type {
			font-size: 14px;
		}
	</style>
</head>
<body>

	<h1><b>Bienvenido</b> a mi sitio web</h1>
	<p>Este es un sitio web sobre <b>HTML5</b> y <b>CSS3</b>.</p>

	<p>La etiqueta &lt;b&gt; se utiliza para enfatizar texto en negrita. En este ejemplo, hemos utilizado CSS para cambiar el color del texto enfatizado a rosa claro y agregar una sombra de texto. También hemos utilizado CSS para establecer diferentes tamaños de fuente para los textos enfatizados en diferentes lugares en la página web.</p>

</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado CSS para dar estilo avanzado a la etiqueta <b>. Hemos utilizado la propiedad color para cambiar el color del texto enfatizado, la propiedad font-weight para establecer el grosor de la fuente, y la propiedad text-shadow para agregar una sombra de texto.

También hemos utilizado pseudo-selectores CSS como :first-of-type y :last-of-type para seleccionar los primeros y últimos elementos <b> dentro de los elementos <p> y aplicarles diferentes estilos de fuente.

Ejemplo 2: Uso de la etiqueta <b> para mejorar la accesibilidad


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta &lt;b&gt;</title>
</head>
<body>

	<h1><b tabindex="0" aria-label="Bienvenido a mi sitio web">Bienvenido</b> a mi sitio web</h1>
	<p>Este es un sitio web sobre <b tabindex="0" aria-label="HTML5">HTML5</b> y <b tabindex="0" aria-label="CSS3">CSS3</b>.</p>

	<p>En este ejemplo, hemos utilizado los atributos tabindex y aria-label para mejorar la accesibilidad de la etiqueta &lt;b&gt;. El atributo tabindex se utiliza para especificar el orden de tabulación del elemento y el atributo aria-label se utiliza para proporcionar una descripción accesible del elemento.</p>

</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado los atributos tabindex y aria-label para mejorar la accesibilidad de la etiqueta <b>. Hemos utilizado el atributo tabindex para especificar el orden de tabulación del elemento y el atributo aria-label para proporcionar una descripción accesible del elemento.

Esto ayudará a los usuarios que utilizan lectores de pantalla o dispositivos de asistencia a comprender mejor el contenido de la página web.