Entidades HTML

Alguns caracteres são especiais em HTML. Se escrever um < cru no texto ordinário da página, o navegador pode pensar que uma etiqueta está a começar. Se escrever um & cru, pode pensar que uma entidade está a começar. Entidades de carácter são códigos seguros que mostram esses símbolos como texto visível em vez de confundir o analisador. Sem elas, uma lição que quer mostrar markup acaba por executar markup: o layout muda, elementos fantasma aparecem, e o aluno culpa o exemplo quando o problema era um carácter reservado sem escape. Esta sessão ensina o sistema de entidades em si — não só a colar < uma vez. Depois de a dominar, consegue escrever tutoriais, documentação e páginas de referência onde <, > e & aparecem como texto fiável em qualquer editor. Pense nas entidades como pontes entre o que quer ver e o que o HTML interpreta: o código escrito na fonte é diferente do glifo no ecrã, e essa diferença é intencional. Em páginas de ensino, essa ponte é o que separa um exemplo legível de um documento partido.

O que é uma entidade HTML?

Uma entidade HTML é uma forma codificada de escrever um carácter na marcação. A maioria das entidades nomeadas começa com & e termina com ;. O navegador substitui o código pelo carácter real quando renderiza a página. Precisa de entidades sobretudo para caracteres que o HTML já usa como sintaxe de marcação, e por vezes para símbolos que são incómodos de escrever. Há também formas numéricas (por exemplo < para <), mas nesta sessão o foco são as nomeadas mais comuns: lt, gt, amp, nbsp, e algumas úteis como quot e copy. O ponto e vírgula final não é decoração — fecha a entidade para o analisador saber onde o código acaba e o texto normal continua. Se o omitir, o browser pode engolir letras seguintes ou mostrar um resultado estranho. Aprender o par &…; como unidade completa evita a maior parte dos erros de principiantes. Quando vir uma entidade num exemplo, leia-a da esquerda para a direita: ampersand, nome, ponto e vírgula — três peças, uma só unidade.

Resposta direta

Use entidades quando um carácter seria inseguro ou pouco claro como texto cru. Memorize primeiro estes: < para <, > para >, & para &, e   para um espaço inseparável. Termine sempre uma entidade nomeada com ;. Use-as em parágrafos e dentro de exemplos que ensinam HTML, sempre que o carácter cru quebraria ou interpretaria mal o documento. Se só lembrar uma regra desta sessão, lembre esta: mostrar um símbolo reservado não é o mesmo que ativá-lo como sintaxe — e a entidade é a fronteira entre os dois. O resto (nbsp com critério, não codificar prosa normal, comparar fonte vs ecrã) segue a mesma lógica de honestidade no markup. Em páginas de ensino, o reflexo < / > / & torna-se músculo: primeiro escape, depois confirme no browser. Esse hábito poupa horas de depuração quando um tutorial “come” as próprias etiquetas de exemplo.

Entidades comuns num relance

Caracteres reservados em frases

Quando ensina ou menciona etiquetas num parágrafo normal, mostre-as com entidades para que permaneçam texto. Um tutorial que escreve “use a etiqueta <p>” sem escape pode criar um parágrafo real no meio da frase. O mesmo acontece com <div>, <span>, <a> e qualquer outra etiqueta que queira citar. Ampersands em nomes de marcas (AT&T), títulos de filmes (Tom & Jerry) ou texto corrido com o sinal “e” também precisam de & se quiser o glifo visível sem arriscar o início de uma entidade inválida. Treine o hábito: se o carácter faz parte da sintaxe HTML, e o quer ver como glifo, codifique-o. Em documentação técnica, este padrão aparece dezenas de vezes por página — por isso vale a pena automatizar o reflexo antes de escrever um guia longo.

Ler o exemplo

• <p> mostra os caracteres <p> sem criar um elemento de parágrafo ali
• Tom & Jerry mostra-se como Tom & Jerry
• Um & cru sem entidade válida pode causar problemas de análise
• Letras normais como p e Jerry não precisam de entidades
  Este padrão escala: pode ter várias entidades na mesma frase sem quebrar o fluxo. O erro comum é misturar < com > ao mostrar etiquetas de fecho, ou esquecer o ponto e vírgula e ver letras “comidas” pelo analisador. Compare sempre o código-fonte com o texto renderizado — a diferença entre <p> na fonte e <p> no ecrã é exatamente o que a entidade faz. Quando o aluno vê isso uma vez, a regra deixa de ser mágica e passa a ser mecânica. Guarde esse contraste mental: fonte = código; ecrã = glifo.

Espaços inseparáveis

  é um espaço que os navegadores não devem usar como ponto de quebra suave entre as partes que une. É útil para manter um rótulo curto com um número, ou palavras que quer manter juntas. Não o espalhe por todo o lado como ferramenta de layout — prefira espaços normais e CSS para desenho real. Em tipografia digital, o espaço inseparável resolve um problema estreito: “Capítulo 4”, “10 kg”, “pág. 12” ou um nome próprio curto que não deve partir no fim da linha. Se usar   para simular margens, colunas ou indentação, está a combater o CSS com caracteres invisíveis — frágil, difícil de manter e mau para acessibilidade. Reserve   para unir unidades tipográficas; use margin, padding, gap e white-space para o resto do espaçamento visual. Quando em dúvida, comece com um espaço normal; só troque para   se vir uma quebra feia entre peças que devem ficar juntas.

Entidades nomeadas vs escrever o símbolo

Para muitos símbolos pode colar o carácter real se o ficheiro estiver guardado como UTF-8 (veja a sessão Charset mais à frente). As entidades continuam especialmente importantes para <, > e & porque esses caracteres fazem parte da sintaxe HTML. Aprender as formas nomeadas comuns torna páginas de ensino e exemplos fiáveis em editores diferentes. Colar “©” ou “→” pode funcionar bem em UTF-8; colar um < cru no meio de um parágrafo de tutorial quase nunca é seguro. Por isso esta sessão insiste nas entidades para os três caracteres de sintaxe, mesmo quando o resto do documento usa Unicode livremente. Editores, cópias entre sistemas e ferramentas de build às vezes alteram encoding; < e & sobrevivem a essas viagens melhor do que um glifo ambíguo. Quando ensina HTML dentro de HTML, as entidades nomeadas são a linguagem comum entre autor, analisador e aluno. Domine-as primeiro; depois decida caso a caso se um símbolo decorativo precisa de entidade ou de Unicode direto.

Pratique no seu editor

1. Escreva um parágrafo que mostre o texto <div> usando < e >.
2. Adicione uma linha com AT&T escrito em segurança com &.
3. Use   entre um título curto e um número que não quer ver separados em linhas.
4. Abra a página e confirme que os símbolos parecem corretos.
5. Veja o código-fonte e encontre os códigos de entidade — compare fonte vs texto renderizado.
6. Esqueça de propósito o ponto e vírgula numa entidade, recarregue, note o resultado estranho, depois corrija.
   Estes passos fecham o ciclo: escrever, renderizar, inspecionar a fonte, e provocar um erro de propósito. O passo 6 é especialmente útil — ver o que acontece sem ; grava a regra melhor do que só a ler. Se trabalhar com um projeto de documentação, repita o mesmo padrão em três sítios: um parágrafo de prosa, um exemplo de etiqueta, e uma linha com marca comercial que contém &. Anote mentalmente cada contraste fonte/ecrã até o reflexo ficar automático.

Erros que partem entidades

• Esquecer ; no fim de uma entidade
• Escrever um & sozinho no texto que não é uma entidade completa (prefira & quando quer um ampersand)
• Codificar letras e palavras ordinárias que nunca precisaram de entidades
• Usar   como substituto de margem e layout em vez de aprender espaçamento CSS
• Confundir < e > ao mostrar exemplos de etiquetas
  Outros deslizes comuns: copiar markup de um blog que já “comeu” as entidades (vê < no editor e cola de novo cru); misturar entidades HTML com escapes de URL (%3C) no sítio errado; e assumir que atributos e texto de parágrafo seguem regras idênticas sem ler o contexto. Em atributos, aspas e ampersands também importam — mas o reflexo central desta sessão continua: carácter de sintaxe visível → entidade. Revise a página em modo de código-fonte sempre que um exemplo “desaparece” ou cria um buraco no layout. Corrigir cedo é mais barato do que depurar um tutorial inteiro depois.

Resumo

• Entidades mostram caracteres reservados ou especiais com segurança no texto HTML
• Comece com <, >, & e  
• Entidades nomeadas começam com & e terminam com ;
• Codifique parênteses angulares e ampersands quando devem aparecer como texto
• Não codifique com entidades letras de prosa normal sem razão
• Entidades são especialmente úteis quando uma página HTML ensina HTML
  Guarde estas seis linhas como cartão de referência mental. Na próxima sessão de símbolos e charset, o mesmo hábito de “código na fonte / glifo no ecrã” volta a aparecer — mas o núcleo das entidades de sintaxe (lt, gt, amp) já deve estar sólido. Se conseguir explicar a um colega porque Tom & Jerry cru é arriscado e Tom & Jerry é seguro, já dominou o essencial desta lição. Pratique até o escape dos três caracteres de sintaxe ser automático.