HTML: Formatação de Texto HTML
As tags de formatação transformam texto simples em algo mais — negrito, itálico, tachado, sobrescrito, citações. Cada formato tem uma tag semântica correspondente que altera tanto a aparência quanto transmite significado.
1. Negrito e Itálico
<b> deixa o texto em negrito, e <i> deixa em itálico. No entanto, o HTML5 recomenda usar as tags semânticas <strong> (para indicar conteúdo importante) e <em> (para indicar ênfase), porque os navegadores e mecanismos de busca conseguem entender o significado delas, e não apenas o estilo visual.
▶ Exemplo
<p><b>Este texto está em negrito</b>, <i>este está em itálico</i></p>
<p><strong>Este é um conteúdo importante</strong> (importante semanticamente, não apenas visual)</p>
<p><em>Este texto precisa de ênfase</em> (lido com ênfase pelos leitores de tela)</p>
<strong> e <em>. Os leitores de tela as tratam de forma especial, tornando-as mais acessíveis.
2. Tachado, Inserção e Destaque
<del> exibe o texto tachado, indicando que o conteúdo foi removido; <ins> exibe o texto sublinhado, indicando conteúdo recém-inserido. Note que <u> também produz um efeito de sublinhado, mas <ins> carrega o significado semântico de "adição nova", enquanto <u> apenas altera a aparência. Além disso, <mark> destaca o texto como se fosse um marca-texto; <small> representa notas adicionais em letras pequenas, comumente usado para avisos legais ou informações de direitos autorais.
▶ Exemplo
<p>Preço original: <del>R$ 199,00</del> <ins>R$ 129,00</ins></p>
<p>Não esqueça da reunião <mark>amanhã às 15h</mark>.</p>
<p><small>* A organização reserva o direito de interpretação final deste evento.</small></p>
3. <pre> Texto Pré-formatado
A tag <pre> (texto pré-formatado) preserva os espaços e as quebras de linha do código-fonte, sendo perfeita para exibir trechos de código ou arte ASCII simples:
▶ Exemplo
<pre>
+-------------------------+
| Web-Tutorial.com |
| HTML·CSS·JavaScript |
+-------------------------+
</pre>
4. Subscrito e Sobrescrito
<sub> exibe o texto como subscrito (abaixado), e <sup> exibe o texto como sobrescrito (elevado). São muito usados em fórmulas químicas, equações matemáticas e notas de rodapé.
▶ Exemplo
<p>A fórmula química da água é H<sub>2</sub>O</p>
<p>A equação massa-energia de Einstein: E=mc<sup>2</sup></p>
<p>A nota de rodapé<sup>[1]</sup> deste artigo está no final da página.</p>
5. Citações e Textos Especiais
Essas tags são usadas especificamente para representar citações, abreviações, informações de contato e outros conteúdos especiais:
▶ Exemplo
<!-- Citação em bloco -->
<blockquote>
A vida é como uma caixa de chocolates, você nunca sabe o que vai encontrar.
<cite>— Forrest Gump</cite>
</blockquote>
<!-- Citação em linha -->
<p>Confúcio disse: <q>Aprender sem pensar leva à confusão; pensar sem aprender leva ao perigo.</q></p>
<!-- Abreviação -->
<p><abbr title="World Wide Web">WWW</abbr> mudou o mundo.</p>
<!-- Informações de contato -->
<address>
Autor: João Silva<br>
E-mail: joao.silva@exemplo.com
</address>
<!-- Direção do texto -->
<p><bdo dir="rtl">Este texto é exibido da direita para a esquerda</bdo></p>
<blockquote> é um elemento block-level e o navegador adiciona um recuo nele; <q> é um elemento inline e o navegador adiciona aspas automaticamente. Quando usada com o atributo title, a tag <abbr> exibe o texto completo ao passar o mouse. <bdo dir="rtl"> faz o texto fluir da direita para a esquerda, ideal para scripts como o árabe.
❓ Perguntas Frequentes
<strong> e <b> são ambos negrito, <em> e <i> são ambos itálico — qual é a diferença?<strong> significa "este texto é importante" e <em> significa "este texto precisa de ênfase" — eles transmitem significado além da aparência. <b> apenas "deixa o texto em negrito" e <i> apenas "deixa o texto em itálico" — eles só afetam a visualização. Motores de busca e leitores de tela reconhecem <strong> e <em>, mas ignoram <b> e <i>. Regra geral：use <strong>/<em> para ênfase de significado; use <b>/<i> ou CSS para estilização puramente visual.<del>, <ins> e <u>?<del> exibe texto tachado, indicando conteúdo removido ou desatualizado — tem significado semântico claro. <ins> exibe texto sublinhado, indicando conteúdo inserido — também tem semântica de "adição". <u> apenas adiciona sublinhado, puramente visual. No HTML5, o uso de <u> é restrito porque pode ser confundido com links (que são sublinhados por padrão). Para mostrar exclusão, use <del>; para mostrar inserção, use <ins>; evite <u>.<blockquote> vs <q>?<blockquote> é um elemento block-level para citações longas (geralmente um parágrafo independente ou múltiplos parágrafos) — o navegador adiciona recuo automaticamente. <q> é um elemento inline para citações curtas (uma frase ou poucas palavras) — o navegador adiciona aspas automaticamente. Regra simples：citações longas usam <blockquote>, citações curtas usam <q>. Se a citação tem fonte, adicione <cite> dentro do <blockquote>.📖 Resumo
<strong>indica importância,<em>indica ênfase — mais semânticas que<b>e<i><del>tachado,<ins>sublinhado semântico,<u>sublinhado visual,<mark>destaque,<small>texto pequeno<sub>subscrito,<sup>sobrescrito,<pre>preserva espaços e quebras de linha<blockquote>citação em bloco,<q>citação em linha,<abbr>abreviação,<address>contato,<cite>título de obra,<bdo>direção do texto
📝 Exercícios
- Formate um texto: Escreva uma mensagem promocional de produto incluindo o preço original (tachado), preço promocional (inserção sublinhada), observação de desconto (texto pequeno) e um destaque em "Oferta por Tempo Limitado".
- Fórmulas químicas e sobrescritos: Use
<sub>e<sup>para escreverCO₂ex² + y² = z². - Autoavaliação: Abra um site de notícias no navegador, clique com o botão direito e selecione "Inspecionar", e observe quais tags HTML são usadas para citações, textos em ênfase e notas de rodapé no artigo. Consegue identificar quais usam
<strong>e quais usam<b>?
