Formatar texto na web vai muito além de escolher entre negrito ou itálico. No HTML5 moderno, cada tag de formatação carrega um peso semântico específico que altera o tom de voz da frase para leitores de tela e orienta os algoritmos de busca sobre a real importância de cada palavra. Compreender a diferença entre formatação puramente visual e semântica real é um dos pilares da acessibilidade e do SEO profissional.

1. Negrito com Significado: <strong> vs <b>

Ambas as tags deixam as letras mais grossas (em negrito) na tela, mas seus propósitos são totalmente diferentes:

• <strong>: Indica forte importância, seriedade ou urgência. O texto encapsulado tem relevância crítica para o leitor. Softwares leitores de tela leem o trecho com uma entonação vocal enfática e os motores de busca conferem maior relevância às palavras-chave.
• <b> (de Bold): Aplica negrito puramente estético, sem adicionar nenhuma importância semântica adicional. Serve para destacar visualmente termos-chave em um resumo ou palavras de produtos sem sugerir urgência.

<!-- Semântica de Alerta (Recomendado): -->
<p><strong>Atenção:</strong> Nunca compartilhe suas senhas bancárias com terceiros.</p>
 
<!-- Apenas Destaque Tipográfico Visual: -->
<p>O novo modelo está disponível nas cores <b>azul</b> e <b>preto</b>.</p>

2. Ênfase no Discurso: <em> vs <i>

Da mesma forma que no negrito, o texto inclinado possui duas naturezas distintas:

• <em> (de Emphasis): Confere ênfase falada. Modifica o significado da sentença como um todo, indicando onde o leitor colocaria um estresse vocal. Softwares de acessibilidade alteram o tom da fala sintética.
• <i> (de Italic): Indica uma voz alternativa ou tom diferente, tradicionalmente reservado para termos estrangeiros (como feedback ou software), nomes científicos (como Homo sapiens), pensamentos de personagens ou termos técnicos.

<!-- Ênfase que muda o sentido da fala: -->
<p>Eu <em>realmente</em> adorei este curso prático.</p>
 
<!-- Termo estrangeiro em itálico: -->
<p>O termo <i>design thinking</i> tornou-se popular no mundo dos negócios.</p>

3. Marcação com Efeito “Marca-Texto” (<mark>)

O elemento <mark> representa um texto destacado ou grifado para fins de referência rápida, como se você tivesse passado uma caneta marca-texto amarela por cima da palavra:

<p>Os resultados da pesquisa para <mark>HTML5</mark> foram encontrados com sucesso.</p>

4. Edições, Preços e Revisões: <del> e <ins>

Muito utilizados em plataformas de comércio eletrônico para destacar promoções e em sistemas de controle de versões de documentos:

• <del>: Representa texto que foi deletado ou descontinuado (exibido nativamente com uma linha riscada no meio).
• <ins>: Representa texto que foi inserido ou adicionado (exibido nativamente com um sublinhado).

<p>
  Super Oferta: De <del>R$ 199,00</del> por apenas <ins>R$ 97,00</ins>!
</p>

5. Fórmulas Químicas e Potências: <sub> e <sup>

Para representar fórmulas científicas, frações matemáticas ou notas de rodapé:

• <sub> (Subscrito): Posiciona o texto ligeiramente abaixo da linha normal em tamanho reduzido. Perfeito para fórmulas químicas como água (H₂O).
• <sup> (Sobrescrito): Posiciona o texto ligeiramente acima da linha normal. Essencial para potências matemáticas (X²) ou notas de rodapé (Artigo¹).

<p>A fórmula química da água pura é H<sub>2</sub>O.</p>
<p>O teorema afirma que A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup>.</p>

6. Textos Menores e Direitos Autorais: <small>

A tag <small> representa as chamadas “letras miúdas” de um documento — como notas de rodapé legais, avisos de direitos autorais (copyright) ou isenções de responsabilidade:

<footer>
  <p><small>&copy; 2026 Web-ZoneWare. Todos os direitos reservados.</small></p>
</footer>

7. Exemplo Prático Integrado

Veja a combinação de todas as tags de formatação em um parágrafo editorial completo:

<article>
  <h2>Boletim de Tecnologia Web Academy</h2>
  <p>
    O novo ecossistema <strong>Web-ZoneWare</strong> foi lançado com velocidade <em>surpreendente</em>.<br>
    Nossos alunos alcançaram uma taxa de aprovação de <mark>98%</mark> na primeira semana.
  </p>
  <p>
    Preço da assinatura anual: de <del>R$ 499</del> por apenas <ins>R$ 299</ins>.<br>
    <small>* Promoção válida até o final do mês corrente.</small>
  </p>
</article>

8. Tabela de Referência das Tags de Formatação

9. Ferramentas Web-ZoneWare para Validar suas Formatações

Assegure a integridade do seu HTML com os recursos da suíte:

• Limpador e Formatador HTML: Confere se tags de formatação aninhadas (como <strong><em>) estão sendo fechadas na ordem correta.
• Minificador de HTML Online: Otimiza seu código removendo espaços e reduzindo o peso do arquivo.
• Playground Web IDE: Pratique a aplicação de cada tag de formatação sem sair do navegador.

10. Links Oficiais de Autoridade

• WHATWG HTML Living Standard — Semântica de Nível de Texto: A especificação técnica formal sobre tags de texto.
• MDN Web Docs — O Elemento de Ênfase (<em>): Guia detalhado da Mozilla sobre entonação e acessibilidade.
• W3C WAI — Estrutura de Conteúdo e Acessibilidade Semântica: Diretrizes de formatação para tecnologias assistivas.

11. Exercício Prático da Lição 08

1. Abra o Playground Web IDE.
2. Escreva uma frase de aviso utilizando <strong> para destacar uma palavra urgente.
3. Escreva a fórmula química do gás carbônico (CO₂) utilizando a tag <sub>.
4. Escreva a equação de potência matemática 10³ = 1000 utilizando a tag <sup>.
5. Crie uma simulação de preço de produto com um valor riscado (<del>) e um novo preço promocional inserido (<ins>).