HTML <sub> Tag
A tag <sub> define texto subscrito que aparece meio caractere abaixo da linha, renderizado em fonte menor. Veja exemplos e sintaxe.
A tag HTML <sub> marca texto em subscrito — caracteres que ficam meio espaço abaixo da linha de base e são renderizados ligeiramente menores. É um elemento inline e semântico: informa ao navegador (e às tecnologias assistivas) que o texto contido é um subscrito, não apenas que deve parecer rebaixado.
Use <sub> somente quando a posição rebaixada tiver significado tipográfico. Ela não é uma ferramenta genérica para "deixar menor e mais abaixo" — se você quiser apenas o efeito visual sem o significado, use CSS (abordado abaixo).
Quando usar <sub>
Um subscrito é significativo em vários contextos:
- Fórmulas químicas — a contagem de átomos: H2O, CO2, C2H5OH.
- Índices e subscritos matemáticos — termos de sequências e índices de variáveis: x1, x2, …, an.
- Bases de logaritmo — log2(n), log10(x).
- Marcadores de nota de rodapé / referência que, por convenção, são tipografados abaixo em vez de acima.
Em todos os casos, o subscrito altera o significado do texto ao redor: CO2 e CO<sub>2</sub> são lidos de forma diferente. Essa diferença semântica é exatamente o que <sub> existe para expressar — e por que o estilo CSS sozinho não é um substituto.
Para definir texto em sobrescrito (elevado acima da linha de base, por exemplo, expoentes como x2 ou ordinais como 1st), use a tag <sup>.
<sub> vs <sup>
Ambos são elementos tipográficos semânticos; diferem apenas na direção e nas convenções que determinam quando cada um é correto.
<sub> (subscrito) | <sup> (sobrescrito) | |
|---|---|---|
| Posição | Abaixo da linha de base | Acima da linha de base |
| Usos típicos | Contagem de átomos (H2O), índices matemáticos (xn), bases de logaritmo | Expoentes (x2), ordinais (2nd), marcadores de nota de rodapé |
| Leitura | "x sub n" | "x à potência n", "2º" |
Escolha o elemento que corresponde à convenção estabelecida para a notação, não o que "parece certo" — uma contagem química é sempre um subscrito, um expoente é sempre um sobrescrito.
Sintaxe
A tag <sub> vem em pares. O conteúdo subscrito é escrito entre as tags de abertura <sub> e de fechamento </sub>.
<p>Formula of water — H<sub>2</sub>O</p>Exemplos
Fórmulas químicas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>OH</p>
</body>
</html><sub> junto com <sup>
Subscrito e sobrescrito frequentemente aparecem no mesmo documento — um para contagens químicas, o outro para expoentes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Se você quiser apenas o efeito visual, use CSS
Se um texto precisar parecer um subscrito, mas não for semanticamente um subscrito, não abuse de <sub>. Em vez disso, aplique CSS vertical-align com o valor sub (mais um font-size menor) ao elemento adequado. O exemplo abaixo reestiliza texto comum puramente para apresentação — observe que nenhum elemento <sub> é usado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.lowered {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Lowered text without the sub tag</h1>
<p>
Here is some <span class="lowered">visually lowered</span> text.
</p>
</body>
</html>Acessibilidade
Os leitores de tela não anunciam o subscrito de forma consistente — alguns leem H<sub>2</sub>O como "H dois O" sem indicar que o 2 está rebaixado, outros fazem uma pausa ou mudam o tom, e muitos ignoram completamente a distinção. Como a posição pode carregar significado que se perde na fala, prefira uma fonte clara e sem ambiguidade para notações importantes:
- Para fórmulas e equações complexas, considere fornecer uma alternativa em texto simples ou amigável para a fala (por exemplo, escreva "log base 2 de n" no texto próximo, ou use MathML para marcação matemática real).
- Não dependa apenas de
<sub>para transmitir algo que o leitor precisa entender — certifique-se de que a frase ao redor ainda seja lida corretamente quando o subscrito for anunciado de forma plana.
Atributos
A tag <sub> suporta os atributos globais e os atributos de evento. Ela não possui atributos próprios.
Estilizando <sub>
Os navegadores aplicam a <sub> uma fonte padrão menor e uma posição rebaixada. Você pode ajustar sua aparência com CSS sem alterar o significado do elemento:
sub {
color: #555;
font-size: 0.8em;
}Nota: isso sobrescreve o estilo padrão de <sub> do navegador apenas para demonstração — o significado de subscrito permanece inalterado.