Mais tags de texto

Tempo de leitura: 4 minutos

Mais tags de texto: Na primeira parte, exploramos as tags de estrutura de bloco e ênfase principal. Nesta continuação, vamos mergulhar em tags de texto mais especializadas, que são cruciais para a comunicação técnica, matemática, e para a manutenção de registros (como edições de conteúdo).

Lembre-se sempre: em HTML5, a escolha da tag deve ser guiada pelo significado (semântica), e não apenas pela aparência visual.

🔍 Nível 3: Tags de Propósito Específico e Revisão

Essas tags têm usos muito definidos e não devem ser substituídas por CSS quando o significado semântico é importante.

1. Histórico de Revisão: `<ins>` (Inserido) e `<del>` (Deletado)

Essas tags são usadas para marcar o conteúdo que foi alterado em uma revisão do documento, sendo essenciais para a semântica de controle de versão ou para exibir descontos.

Tag	Função Semântica	Aparência Padrão
`<del>`	Indica texto que foi deletado (não existe mais).	Geralmente aparece riscado (linha sobre o texto).
`<ins>`	Indica texto que foi inserido (novo conteúdo).	Geralmente aparece sublinhado.

Exemplo Prático (Comércio Eletrônico):

HTML

<p>O preço do produto foi <del>R$100,00</del> por apenas <ins>R$80,00</ins> hoje!</p>

O preço do produto foi ~~R$100,00~~ por apenas R$80,00 hoje!

2. Notação Científica e Matemática: `` e ``

Tag	Função Semântica	Uso
`<sup>`	Sobrescrito: Exibe o texto acima da linha de base.	Expoentes matemáticos (X²), ordinais (1º), ou marcas de rodapé.
`<sub>`	Subscrito: Exibe o texto abaixo da linha de base.	Fórmulas químicas (H₂O) e notas de rodapé de texto.

Exemplo Prático (Química e Matemática):

HTML

<p>A fórmula da água é H<sub>2</sub>O e a famosa equação é E=MC<sup>2</sup>.</p>

A fórmula da água é H₂O e a famosa equação é E=MC².

3. Texto Menor e Copyright: ``

Função Semântica: Representa comentários laterais, letras miúdas, informações de direitos autorais ou termos de isenção de responsabilidade (texto que não é essencial para o entendimento principal).
Aparência Padrão: O texto é exibido em um tamanho de fonte menor.
Uso Comum:

HTML

<footer>
  <p>Texto "Normal"</p>
  <p><small>Todos os direitos reservados. Termos e Condições se aplicam.</small></p>
</footer>

Texto “Normal”

💡 Nível 4: A Nova Semântica de Formatação

As tags , ,  e  causam confusão. Veja como o HTML5 as define semanticamente:

Tag	Função Semântica em HTML5	Onde Usar
`<strong>`	Forte Importância: O conteúdo é crucial.	Avisos de segurança, palavras-chave para resumo.
`<em>`	Ênfase: Destaca uma parte da frase para alterar o sentido (ênfase vocal).	Como se estivesse falando a palavra mais alto.
`<b>`	Estilização sem Importância: Palavras-chave em resumos, nomes de produtos, sem transmitir importância extra.	Nomes em cabeçalhos, introduções, títulos que não são H1-H6.
`<i>`	Voz ou Humor Alternativo: Termos técnicos, pensamentos, títulos de obras. Não para ênfase!	Nomes científicos (Homo sapiens), frases em idiomas estrangeiros.

Princípio: Use  e  quando o significado é forte; use  e  quando você só precisa de uma diferença visual ou de uma voz alternativa, e o CSS não é apropriado.

🛠️ Nível 5: Ferramentas de Código e Fluxo

Para um curso de HTML, as tags relacionadas a código são essenciais.

Tag	Função Semântica	Uso Comum
`<br>`	Quebra de Linha: Insere uma quebra de linha simples no fluxo de texto atual.	Poesia, endereços (onde a quebra de linha é parte do conteúdo). Não use para espaçamento!
`<hr>`	Regra Horizontal: Insere uma quebra temática entre seções de conteúdo (uma linha divisória).	Para separar capítulos em um artigo ou seções que mudam drasticamente de tópico.
`<code>`	Trecho de Código: Marca uma parte do texto como código de programação.	`Use a tag <code> para marcar variáveis.`
`<var>`	Variável: Indica uma variável em um contexto de programação ou matemática.	`Onde <var>x</var> é o número de repetições.`

Exemplo de Código e Divisão:

HTML

<p>Para adicionar espaço, você deve usar a propriedade <var>margin</var> no CSS, e não a tag <br>.</p>
<hr>
<br>
<p>O código a seguir é um exemplo de função em JavaScript:</p>
<pre><code>
  function calcular(a, b) {
      return a * b;
  }
</code></pre>

Para adicionar espaço, você deve usar a propriedade margin no CSS, e não a tag
.

O código a seguir é um exemplo de função em JavaScript:


  function calcular(a, b) {
      return a * b;
  }

✅ Conclusão

As tags de manipulação de texto são as ferramentas que dão forma, ênfase e significado ao seu conteúdo. Ao dominar o uso de tags como <ins>, <del>, , , e as distinções sutis entre  /  e  / , você garante que suas páginas sejam semanticamente ricas, transparentes em suas edições e fáceis de entender por qualquer agente de usuário.

Lembrando que toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: