Maneira correta de deixar os textos em negrito com HTML/CSS

Neste artigo veremos a maneira correta de deixar os textos em negrito que existem no HTML e CSS, tanto para semântica como também no quesito boas práticas.

Caso você já conheça um pouco HTML e CSS já deve ter se deparado com a tag <b>, que de fato deixa o texto em negrito

Porém há outras duas maneiras  de adicionar negrito a um texto com HTML e CSS, e é bom conhecer qual delas devemos utilizar dependendo da situação

Isso pode interferir por exemplo em SEO, mas veremos mais para frente

Além disso as duas outras maneiras são:

• A tag <strong>;
• A propriedade font-weight do CSS;

Vamos então entender cada uma delas!

Quando utilizar a tag <b>

A tag <b> é utilizar para representar um texto de importância

Devemos aplicar este elemento quando há uma intenção de adicionar valor semântico ao texto, não apenas quando é para a palavra ficar em negrito

Antigamente esta tag era utilizada para este propósito, mas com a vinda do font-weight ela perdeu esta função

Até por uma questão de não misturar o CSS com o HTML, deixar cada um com sua responsabilidade

A tag <b> perdeu a função de estilo na versão 4 do HTML

<p>Nosso foco principal é <b>postar no blog semanalmente</b>, conteúdos interessantes e que somam para programadores</p>

Quando utilizar a tag <strong>

Já a tag <strong> determina um texto altamente importante no HTML, além disso deixa ele em negrito

Novamente não pode ser utilizada com propósito de apenas estilização, é uma má prática

Você deve ter notado que <strong> e <b> são muito parecidas no seu conceito, pois o strong adicionar também semântica ao código

Porém o fato é que <b> vem de bold, e isso trás uma correlação muito forte com um texto preto em negrito

Já strong você pode renderizar o texto no formato que quiser, ele estará presente mais pela ideia semântica que a tag trás, de dar uma importância maior no texto que envolve ela

<p>Nós temos uma <strong>frequência de vídeos semanal</strong> no nosso canal no YouTube, fazemos muitos cursos gratuitos e também tutoriais!</p>

Quando utilizar a propierdade font-weight

A proprierdade font-weight é com certeza mais simples de ser entendida

Neste caso apenas queremos alterar a parte visual do texto, ou seja, não nos preocupamos com semântica e sim layout

Então no caso de seguirmos um arquivo de PhotoShop que um designer fez apenas para fins estéticos algum negrito, nós fazemos o uso de font-weight

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Não induzindo errado mecanismos de busca, que aquela parte do texto é essencialmente importante para a página

<!-- HTML -->
<p>Este parágrafo está em negrito</p>

/* CSS */
p {
 font-weight: bold;
}

E o valor da propriedade font-weight deve ser bold, o que deixa os textos em negrito

Conclusão

Vimos neste artigo a maneira correta de deixar os textos em negrito, para cada caso, então quando a ideia é colocar semântica em algum texto utilizamos <b> ou <strong>

E que quando é visual utilizamos a propriedade font-weight

Além disso não devemos utilizar <b> nem <strong> apenas para fins visuais/de layout

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo