Lição 23 de 50

Entidades HTML: Caracteres Especiais e Tabela | Web Academy

Na sintaxe do HTML, determinados caracteres possuem significado estrutural exclusivo para o navegador — como os sinais de menor que (<) e maior que (>), que delimitam tags, e o e-comercial (&), que inicia sequências de escape. Para exibir esses caracteres literalmente no texto visível de uma página sem corromper a árvore do DOM, utilizamos as Entidades de Caracteres HTML (HTML Entities). Elas também são essenciais para renderizar símbolos monetários mundiais, fórmulas matemáticas e caracteres tipográficos avançados com total consistência.

📑 Índice do Conteúdo

1. Anatomia de uma Entidade HTML: Nome vs Número

Uma entidade de caractere é uma sequência de texto padronizada que o navegador converte em um glifo visual. Toda entidade HTML obedece a uma estrutura rigorosa de 3 partes:

Um caractere inicial e-comercial (&).
O identificador da entidade (que pode ser um nome mnemônico ou um código numérico decimal/hexadecimal).
Um caractere final obrigatório de ponto e vírgula (;).

Formato	Exemplo	Visual	Vantagens e Contexto de Uso
Por Nome (Entity Name)	`©`	©	Muito fácil de memorizar e digitar durante a escrita manual do código.
Por Número Decimal	`©`	©	Suporte universal a 100% da tabela Unicode, mesmo em parsers antigos.
Por Número Hexadecimal	`©`	©	Utilizado quando se trabalha com referências de pontos de código Unicode (U+00A9).

2. Os 5 Caracteres Reservados Obrigatórios

Se você digitar estes caracteres soltos no meio do seu texto, o navegador poderá confundi-los com abertura de elementos ou encerramento de atributos, gerando falhas visuais graves:

Caractere	Nome em Inglês	Entidade por Nome	Entidade Decimal	Por Que é Reservado?
`<`	Less Than (Menor que)	`<`	`<`	Inicia tags HTML (ex: `<div>`).
`>`	Greater Than (Maior que)	`>`	`>`	Fecha tags HTML (ex: `>`).
`&`	Ampersand (E-comercial)	`&`	`&`	Inicia entidades de caracteres.
`"`	Double Quote (Aspas duplas)	`"`	`"`	Delimita valores de atributos (ex: `class="..."`).
`'`	Single Quote (Apóstrofo / Aspas simples)	`'`	`'`	Delimita atributos no HTML e strings no JavaScript.

3. O Espaço Inquebrável ( ) e Suas Boas Práticas

Normalmente, quando o HTML encontra múltiplos espaços seguidos ou uma quebra de linha natural no final de um parágrafo, ele colapsa todos em um único espaço em branco. A entidade   (Non-Breaking Space) possui duas propriedades essenciais:

Impede a Quebra de Linha: Garante que duas palavras permaneçam sempre na mesma linha (ex: R$ 1.200,00 ou 100 km/h). Isso evita que o símbolo monetário “R$” fique sozinho no fim de uma linha e o valor pule para a próxima.
Força Espaços Repetidos: O navegador não colapsa múltiplos   adjacentes.

⚠️

Atenção para Não Cometer Anti-Pattern: Nunca use dezenas de     repetidos para empurrar elementos ou criar margens visuais na tela. Espaçamentos, recuos e alinhamentos devem ser sempre controlados no CSS utilizando propriedades como margin, padding, gap ou text-indent.

4. Tabela de Símbolos Populares para UI e E-Commerce

Confira as entidades mais utilizadas no desenvolvimento de lojas virtuais, dashboards e portais informativos:

Símbolo	Entidade por Nome	Entidade Decimal	Significado & Uso Típico
©	`©`	`©`	Copyright (Direitos Autorais em rodapés).
®	`®`	`®`	Marca Registrada oficial.
™	`™`	`™`	Trademark (Marca Comercial não registrada formalmente).
€	`€`	`€`	Símbolo da moeda Euro.
£	`£`	`£`	Símbolo da Libra Esterlina.
¥	`¥`	`¥`	Símbolo do Iene Japonês / Yuan Chinês.
•	`•`	`•`	Marcador de lista (Bullet point) tipográfico.
…	`…`	`…`	Reticências tipográficas em um único glifo.
→	`→`	`→`	Seta para a direita (muito usada em links “Saiba mais →”).
×	`×`	`×`	Sinal de multiplicação (ótimo para botões de fechar modal “X”).

5. Entidades e Segurança: A Primeira Linha Contra o Cross-Site Scripting (XSS)

As entidades desempenham um papel de segurança vital no ecossistema da web. Se o seu site permite que os usuários enviem comentários, avaliações ou preencham formulários, um usuário mal-intencionado pode tentar enviar código malicioso:

Ataque de Injeção XSS Não Sanitizado
xss-payload.txt

HTML 1 linha

<script>roubarCookiesESenhas();</script>

<script>roubarCookiesESenhas();</script>

Se o servidor salvar esse texto e imprimi-lo diretamente na tela, o navegador da vítima executará o script criminoso. No entanto, se o sistema converter os caracteres reservados nas suas respectivas entidades antes da exibição:

Código Higienizado com Entidades HTML
escaped-output.html

HTML 1 linha

<script>roubarCookiesESenhas();</script>

<script>roubarCookiesESenhas();</script>

O navegador entenderá que se trata apenas de texto inofensivo para ser lido na tela e não executará nenhuma instrução.

6. Exemplo Prático: Rodapé Institucional com Entidades no Playground IDE

O exemplo abaixo demonstra a montagem de um rodapé profissional completo e uma caixa de demonstração de código utilizando entidades de forma semântica e acessível:

HTML5 + CSS3 — Rodapé Completo com Entidades Especiais
rodape-entidades.html

HTML 99 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Demonstração de Entidades HTML</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #0f172a;
            color: #f8fafc;
            padding: 30px;
        }
 
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
 
        /* Caixa de Demonstração de Código */
        .bloco-tutorial {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 30px;
        }
 
        .bloco-tutorial code {
            color: #38bdf8;
            font-family: Consolas, monospace;
            background: #0b1120;
            padding: 2px 6px;
            border-radius: 4px;
        }
 
        /* Rodapé Institucional */
        .rodape-institucional {
            border-top: 1px solid #334155;
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            font-size: 13px;
            color: #94a3b8;
        }
 
        .rodape-institucional a {
            color: #38bdf8;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.15s ease;
        }
 
        .rodape-institucional a:hover {
            color: #7dd3fc;
            text-decoration: underline;
        }
 
        .moedas-badge {
            background: #334155;
            color: #e2e8f0;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
        }
    </style>
</head>
<body>
 
    <div class="container">
        <div class="bloco-tutorial">
            <h3 style="margin-top:0; color:#f1f5f9;">Como ensinar tags HTML sem quebrar a página:</h3>
            <p>Para criar um parágrafo em HTML, utilizamos a tag <code>&lt;p&gt;</code> e encerramos com <code>&lt;/p&gt;</code>.</p>
            <p>Se digitássemos os sinais de menor e maior diretamente no código, o navegador tentaria interpretar como uma tag real.</p>
        </div>
 
        <footer class="rodape-institucional">
            <div>
                <span>&copy;&nbsp;2026 Web-ZoneWare&reg;. Todos os direitos reservados.</span>
                <span style="margin: 0 8px;">&bull;</span>
                <span>Plataforma Homologada&trade;</span>
            </div>
 
            <div class="moedas-badge">
                Aceitamos: R$&nbsp;&bull;&nbsp;&euro;&nbsp;&bull;&nbsp;&pound;&nbsp;&bull;&nbsp;&yen;
            </div>
 
            <div>
                <a href="#">Conheça nossos planos &rarr;</a>
            </div>
        </footer>
    </div>
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Demonstração de Entidades HTML</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #0f172a;
color: #f8fafc;
padding: 30px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
/* Caixa de Demonstração de Código */
.bloco-tutorial {
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 24px;
margin-bottom: 30px;
}
.bloco-tutorial code {
color: #38bdf8;
font-family: Consolas, monospace;
background: #0b1120;
padding: 2px 6px;
border-radius: 4px;
}
/* Rodapé Institucional */
.rodape-institucional {
border-top: 1px solid #334155;
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: #94a3b8;
}
.rodape-institucional a {
color: #38bdf8;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease;
}
.rodape-institucional a:hover {
color: #7dd3fc;
text-decoration: underline;
}
.moedas-badge {
background: #334155;
color: #e2e8f0;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="bloco-tutorial">
<h3 style="margin-top:0; color:#f1f5f9;">Como ensinar tags HTML sem quebrar a página:</h3>
<p>Para criar um parágrafo em HTML, utilizamos a tag <code>&lt;p&gt;</code> e encerramos com <code>&lt;/p&gt;</code>.</p>
<p>Se digitássemos os sinais de menor e maior diretamente no código, o navegador tentaria interpretar como uma tag real.</p>
</div>
<footer class="rodape-institucional">
<div>
<span>&copy;&nbsp;2026 Web-ZoneWare&reg;. Todos os direitos reservados.</span>
<span style="margin: 0 8px;">&bull;</span>
<span>Plataforma Homologada&trade;</span>
</div>
<div class="moedas-badge">
Aceitamos: R$&nbsp;&bull;&nbsp;&euro;&nbsp;&bull;&nbsp;&pound;&nbsp;&bull;&nbsp;&yen;
</div>
<div>
<a href="#">Conheça nossos planos &rarr;</a>
</div>
</footer>
</div>
</body>
</html>

Teste e modifique as entidades no nosso ambiente interativo em tempo real:
⚡ Testar no Playground IDE

7. Quando Usar Entidades vs Unicode Direto (UTF-8)

Com a padronização global do <meta charset="UTF-8"> em todas as páginas da Web Academy, você não precisa mais escrever entidades arcaicas para caracteres acentuados da língua portuguesa (como á para “á” ou ç para “ç”).

Use Caracteres Normais do Teclado: Palavras como “Atenção”, “Código” e “Fácil” devem ser digitadas diretamente com suas letras acentuadas. Isso melhora drasticamente a legibilidade do código-fonte e o SEO orgânico.
Reserve as Entidades Para:

1. Caracteres estruturais reservados (<, >, &).

2. Símbolos que não existem no teclado físico (©, ™, €, ∞).

3. Espaços inquebráveis essenciais ( ).

🚀

Próximo Passo Didático: Na Lição 24: URLs & Codificação na Web, exploraremos a anatomia de um endereço web completo (protocolo, domínio, porta, path, query string e hash), o funcionamento do Percent-Encoding (URL Encoding) e como garantir que parâmetros com espaços e acentos não quebrem as requisições HTTP da sua aplicação.