HTML: Formatação de Texto HTML
Última atualização: 2026-09-08
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
▶ Experimente<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
▶ Experimente3. <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
▶ Experimente4. 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
▶ Experimente5. 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
▶ Experimente<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>?
