13.01.2025

Como fazer texto em negrito em HTML: Uso adequado das tags

Resposta Rápida

Para enfatizar o texto em negrito em termos de significado ou importância, use a tag <strong>. Se você deseja deixar o texto em negrito apenas por efeito visual, a tag <b> é apropriada:

<strong>Informação importante.</strong>
<b>Texto destacado em negrito para ênfase visual.</b>

A tag <strong> enfatiza a importância do conteúdo, enquanto <b> serve como uma indicação visual. Ambas as tags tornam o texto em negrito.

Diferença entre <strong> e <b>

Apesar de sua semelhança visual, <strong> e <b> têm significados semânticos diferentes. A tag <strong> destaca a alta significância do conteúdo, o que é levado em consideração por motores de busca e leitores de tela.

Visualização

Vamos imaginar que precisamos destacar um texto para que ele se sinta especial:

                Antes:            Depois:

               "Saudações!"      "**Saudações!**"

Em HTML, usamos as tags <strong> ou <b> para destacar o texto:

<strong>Saudações!</strong> ou <b>Saudações!</b>

Usando essas tags, fazemos o texto se destacar, assim como uma pessoa em um traje elegante em uma multidão.

Usando CSS para criar estilo de texto em negrito

Se você precisa de controle preciso sobre a negritude ou deseja destacar um grande bloco de texto, é preferível usar CSS:

/* Uma piada sobre fontes é totalmente apropriada! */
.bold-text {
    font-weight: bold;
}

<!-- Esta palavra dança não apenas o tango, mas também flamenco! -->
<p>Esta é uma palavra <span class="bold-text">destacada</span>.</p>

A propriedade font-weight: bold; permite que você controle a negritude não apenas para um único elemento, mas para blocos inteiros de elementos, tornando o código mais organizado e fácil de manter.

Texto em Negrito e Acessibilidade

Ao trabalhar com texto em negrito, não se esqueça da acessibilidade. Para pessoas com deficiências visuais, o peso da fonte pode desempenhar um papel crucial na navegação do texto. É importante que o valor da informação seja transmitido não apenas através do estilo visual, mas também pelo conteúdo textual e pela estrutura do documento.

Criando Marcação Estruturada

O conteúdo estruturado não é apenas benéfico para a legibilidade, mas também contribui para SEO e acessibilidade. O uso adequado da hierarquia de cabeçalhos (<h1>, <h2>, e assim por diante) e de elementos semânticos (<label>, <th>, <cite>) melhora a compreensão da estrutura e do significado do conteúdo.

Veja abaixo um exemplo de marcação adequada:

<!-- Você é tão importante que merece o uso de "H1". -->
<h1>Cabeçalho da Página Principal</h1>
<!-- Princípio da educação: ensine oferecendo escolhas. -->
<h2>Subtítulo da Seção</h2>
<label for="search">Buscar:</label>
<th>Cabeçalho da Coluna da Tabela</th>
<cite>Trabalho Citado</cite>

HTML Estruturado e contexto semântico são aspectos-chave do desenvolvimento web, portanto, sempre utilize HTML para transmitir significado e CSS para estilização.

Recursos Úteis

1. Tag HTML b - Um guia sobre a tag <b> para texto em negrito em HTML.
2. <strong>: O elemento de forte importância - HTML: Linguagem de Marcação de Hipertexto | MDN - Informações detalhadas sobre o significado semântico do elemento <strong>.
3. Propriedade CSS font-weight - Tudo sobre a propriedade CSS font-weight para estilização de texto.
4. Estilos HTML CSS - Um guia sobre estilização CSS em linha, incluindo a criação de texto em negrito.
5. html - Qual é a diferença entre <b> e <strong>, <i> e <em>? - Stack Overflow - Discussão da comunidade sobre o uso de <b> e <strong>.
6. Os elementos i, b, em e strong | HTML5 Doctor - Um artigo sobre a aplicação de <b> no contexto do padrão HTML5.
7. WebAIM: Tipos e Fontes - Discussão sobre questões de acessibilidade relacionadas ao uso de texto em negrito em HTML.

Video

Navigation