Negrito, Itálico, Sublinhado e Texto Marcado

Ênfase não é decoração barata

Na web, destacar texto não é apenas engrossar letra, inclinar palavra ou passar uma linha embaixo. Um Mestre usa marcação para comunicar peso, intenção, revisão e contexto.

Aparência visual vs significado semântico

strong vs b

O papel da tag strong

A tag <strong> indica forte importância, seriedade ou urgência. Ela informa que aquele trecho tem peso real no contexto.

Quando usar strong

<p><strong>CUIDADO:</strong> Não toque nos fios expostos sob risco de choque elétrico.</p>

O papel da tag b

A tag <b> aplica destaque visual em negrito sem indicar importância semântica forte.

b usado apenas para destaque visual

<p>Nossa loja vende <b>notebooks</b>, <b>tablets</b> e <b>smartphones</b>.</p>

em vs i

O papel da tag em

A tag <em> indica ênfase tônica. Ela muda a força da leitura e pode alterar o sentido da frase.

<p>Eu nunca disse que <em>ele</em> roubou o dinheiro.</p>

O papel da tag i

A tag <i> é usada para termos técnicos, estrangeirismos, pensamentos, nomes científicos ou categorias textuais diferentes sem ênfase de voz.

<p>O termo <i>markup</i> refere-se à marcação de documentos em HTML.</p>
<p>Ele sempre diz <i>au revoir</i> ao sair da sala.</p>

mark e u

O papel da tag mark

A tag <mark> destaca relevância contextual, como termo pesquisado, trecho importante em uma citação ou resultado de busca.

<p>Resultados para "HTML5": O <mark>HTML5</mark> trouxe tags semânticas poderosas.</p>

O papel da tag u

A tag <u> aplica sublinhado e deve ser usada com extremo cuidado, porque usuários associam sublinhado a links clicáveis.

<p>Ele escreveu a palavra <u>excessão</u> de forma errada; o correto é exceção.</p>

Erro: sublinhar texto que não é link

<p>Não esqueça de ler os <u>termos de serviço</u> antes de aceitar.</p>

del e ins

As tags <del> e <ins> registram alterações editoriais: texto removido e texto inserido.

<p>O preço do curso era <del>R$ 500,00</del> e agora é <ins>R$ 250,00</ins>.</p>

• del indica remoção.
• ins indica inserção/correção.
• Ambas ajudam a documentar atualização de conteúdo.
• São úteis em revisões, preços, políticas e documentos técnicos.

Como escolher a tag correta

Regras de ouro

• Use ênfase para guiar, não para distrair.
• Não marque frases inteiras sem necessidade.
• Não use sublinhado em texto comum.
• Não misture várias tags sem propósito.
• Visual vai para CSS; significado fica no HTML.

Veja diferença entre negrito visual e importância real

1. Crie dois parágrafos no VS Code.
2. No primeiro, use <b>IMPORTANTE</b>.
3. No segundo, use <strong>URGENTE</strong>.
4. Abra o navegador e use Inspecionar.
5. Observe que podem parecer iguais, mas a semântica é diferente.
6. Teste um parágrafo inteiro com <em> e veja como a leitura fica cansativa.

Exercício guiado

Crie um aviso de segurança usando strong para alerta crítico, em para mudança de sentido e mark para um código pesquisado.

Exercício independente

Pegue um trecho literário ou técnico, aplique strong onde houver importância real, em onde a voz muda o sentido, e justifique por que não usou b ou i.

Erros comuns e correções

Você domina ênfase semântica?

• Consigo diferenciar b de strong.
• Consigo diferenciar i de em.
• Sei quando usar mark sem exagero.
• Entendo o perigo do sublinhado em texto comum.
• Sei usar del e ins para revisão editorial.
• Consigo explicar por que semântica impacta acessibilidade e SEO.

15 perguntas para provar domínio

1. Diferença entre b e strong? b é visual; strong indica importância.
2. Como leitores de tela tratam strong? Com ênfase especial.
3. Por que u é desencorajado? Parece link clicável.
4. Função da tag em? Ênfase fonética/tônica.
5. Quando usar i? Estrangeirismos, termos técnicos e nomes científicos.
6. O que mark faz? Destaca relevância contextual.
7. Para que serve del? Texto removido.
8. Para que serve ins? Texto inserido/corrigido.
9. Posso usar strong só para deixar negrito? Não.
10. Objetivo do HTML5 no texto? Significado, não aparência.
11. Onde usar mark? Resultados de busca ou trecho relevante.
12. O que é ênfase semântica? Marcar função lógica do texto.
13. Tag para sarcasmo ou mudança de voz? em.
14. b e i foram removidas? Não, mas têm uso restrito.
15. u pode marcar o quê? Erros ortográficos ou contextos específicos.

Acessibilidade, SEO, mercado e manutenção

Aplicação em projeto real

Em contratos digitais, termos de serviço e artigos técnicos, usar strong, del e ins corretamente comunica urgência, revisão e transparência.

Acessibilidade

Usuários cegos dependem da semântica para perceber importância e entonação. strong e em comunicam o que b e i não comunicam.

SEO

Buscadores usam pistas semânticas para entender relevância dentro de um parágrafo. Termos realmente importantes podem receber marcação adequada.

Mercado

Código que usa HTML como ferramenta de design parece amador. O mercado valoriza quem separa intenção, significado e visual.

Registre seu artigo com ênfase semântica

git status
git add .
git commit -m "aula-09: cria artigo com enfase semantica"
git push

• git status: verifica se o arquivo foi criado.
• git add .: prepara o arquivo para registro.
• git commit: documenta seu domínio de ênfase semântica.
• git push: envia sua evolução para o GitHub.

Evidência para portfólio

• Arquivo artigo-enfase-semantica.html.
• Print do código usando strong, em, mark, del e ins.
• Print da página renderizada.
• Commit no GitHub.
• Explicação curta sobre visual vs semântico.