Tag HTML <b>
A tag <b> é usada para destacar em negrito uma parte do texto que desejamos tornar mais evidente para o utilizador
A tag HTML <b> é usada para renderizar uma parte do texto em negrito, destacando-a visualmente. A tag <b> apenas altera a aparência visual; não carrega nenhum significado semântico (incluindo para motores de busca).
Este capítulo é para quem escreve HTML e deseja colocar texto em negrito da maneira correta. Você aprenderá para que serve a tag <b> no HTML moderno, quando utilizá-la em vez de CSS, e como ela se diferencia de <strong>, <i> e <em> — quatro tags que é fácil confundir.
No HTML5, a tag <b> destina-se à ênfase estilística não semântica, como marcar palavras-chave, nomes de produtos ou rótulos de interface, em vez de ser um substituto para outras tags.
Quando usar a tag <b>
No HTML5, a tag <b> tem uma finalidade específica e restrita: chamar a atenção para um trecho de texto por razões puramente estilísticas, sem implicar que o texto seja mais importante. A especificação HTML lista três casos clássicos:
- Palavras-chave num documento, por exemplo a primeira ocorrência de um termo técnico.
- Nomes de produtos numa avaliação ou descrição.
- A frase inicial ou as palavras de abertura de um parágrafo de artigo.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>Em cada caso, o texto em negrito se destaca visualmente, mas não é necessariamente mais importante para o significado da frase — essa distinção é o que separa <b> de <strong>.
Evite usar a tag <b> para títulos e cabeçalhos. Em vez disso, use as tags <h1>–<h6>, que carregam significado na estrutura do documento.
<b> ou CSS?
Se o seu objetivo é puramente visual e está vinculado a uma regra de design — por exemplo, "todos os nomes de produtos neste catálogo estão em negrito" — aplicar negrito com a propriedade CSS font-weight geralmente é a melhor escolha, pois o estilo fica na folha de estilos e pode ser alterado em um único lugar. Use a tag <b> quando o negrito faz parte do próprio conteúdo do documento (uma palavra-chave pontual ou introdução), e não um padrão de design repetível. De qualquer forma, nenhuma das abordagens transmite importância para tecnologias assistivas — para isso você precisa de <strong>.
Sintaxe
A tag <b> vem em pares. O conteúdo é escrito entre as tags de abertura ( <b> ) e de fechamento ( </b> ).
Exemplo da tag HTML <b> :
Exemplo da tag HTML <b> |W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>A aparência padrão do elemento <b> é negrito, mas essa renderização em negrito é apenas o estilo padrão do navegador — você pode alterá-la com CSS.
Aplicar negrito ao texto com CSS
Quando o negrito é definido pelo design e não pelo conteúdo, defina-o com a propriedade CSS font-weight em um <span> (ou qualquer elemento), em vez de usar <b> ``. Isso mantém o estilo reutilizável na sua folha de estilos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> vs <strong>
Tanto o elemento <b> quanto o <strong> renderizam o texto em negrito por padrão, portanto parecem idênticos na tela. A diferença está no significado:
<strong><b>
Aqui estão as mesmas palavras marcadas das duas formas:
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Regra geral: se o negrito significa algo — este texto é mais importante e o utilizador de leitor de tela deve saber disso — use <strong> . Se você apenas quiser uma indicação visual, use <b> ou CSS font-weight.
<b> vs <i> , <em> e <strong>
Essas quatro tags são frequentemente confundidas porque duas delas produzem negrito e duas produzem itálico. Elas se dividem da mesma forma que <b> e <strong> — visual versus semântico:
| Tag | Estilo padrão | Transmite importância/ênfase? |
|---|---|---|
<b> | Negrito | Não — apenas visual |
<strong> | Negrito | Sim — importância forte |
<i> | Itálico | Não — apenas visual (voz alternativa, termos) |
<em> | Itálico | Sim — ênfase de entonação |
Portanto, <b> é o equivalente em negrito de <i>, e <strong> é o equivalente em negrito de <em>.
Acessibilidade
Os leitores de tela não atribuem nenhum papel semântico ao elemento <b> — o seu texto é anunciado exatamente como o texto ao redor, sem alteração de ênfase. Isso é intencional, pois <b> é apresentacional. A consequência prática: nunca use <b> quando a importância do texto precisar chegar aos utilizadores de tecnologias assistivas. Se uma frase é genuinamente mais importante, marque-a com <strong> (ou <em> para ênfase de entonação), de modo que o significado seja transmitido a todos, não apenas aos leitores com visão.
Atributos
A tag <b> suporta Atributos Globais e Atributos de Evento.
Como aplicar um atributo global à tag HTML <b>
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>