Docs executáveis de HTML: Sobrescrito

Q: Como escrever sobrescrito no HTML?

Envolva o texto elevado em : x 2 mostra x ao quadrado, 1 st um ordinal. O navegador o desenha menor e acima da linha de base.

Q: Como escrever subscrito no HTML?

Use : H 2 O para água, x 1 para um índice. Ele é desenhado menor e abaixo da linha de base.

Q: Como escrever x ao quadrado no HTML?

Com x 2 ou com o caractere pronto x², que você também pode digitar como a entidade ². O caractere serve para quadrados e cubos; funciona para qualquer expoente, como 2 n+1 .

Q: Posso usar CSS em vez de ?

vertical-align: super com um font-size menor fica igual, mas e carregam significado: "m2" e "m 2 " são valores diferentes. Use as tags quando a posição elevada ou rebaixada faz parte do conteúdo.

Sobrescrito e subscrito em HTML: tags sup e sub

Escreva texto sobrescrito com e subscrito com : expoentes, números ordinais, marcadores de nota de rodapé e fórmulas químicas. Veja os usos comuns, como evitar que afastem as linhas e quando um caractere Unicode ou MathML serve melhor.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como escrever sobrescrito no HTML

Envolva o texto elevado em . O navegador o mostra menor e acima da linha. O seu par, , mostra o texto menor e rebaixado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 e  são inline e podem conter outros elementos inline, então 2n+1 ou xi também funcionam.

Usos comuns

Você quer	Escreva	Resultado
Um expoente	`10<sup>3</sup>`	10 elevado a 3
Um ordinal	`2<sup>nd</sup>`	2nd com as letras elevadas
Um marcador de nota de rodapé	`text<sup><a href="#n1">1</a></sup>`	Um 1 elevado e clicável
Uma fórmula química	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glicose
Um índice ou base	`x<sub>1</sub>`, `log<sub>2</sub>`	1 e 2 rebaixados
Uma marca registrada	`Brand<sup>TM</sup>` ou `Brand™`	TM elevado

Use as tags quando a posição faz parte do significado: m2 e m2 são coisas diferentes. Para um texto que só é estilizado pequeno (um rótulo, um selo), use CSS.

Notas de rodapé com sup

Um marcador de nota de rodapé é um link sobrescrito para uma nota no fim. Dê um id a cada nota e aponte o link para ela:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Clique num número para pular até a nota, e em "Back" para voltar. Tirar o sublinhado do link pequeno deixa o parágrafo limpo, enquanto a cor do link ainda indica que ele é clicável.

Mantendo o espaçamento entre linhas uniforme

Por padrão, um  ou  pode deixar a sua linha mais alta que as linhas ao redor, então um parágrafo com alguns expoentes fica com espaçamento irregular. Definir line-height: 0 neles resolve:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

A caixa cinza é mais alta porque as linhas dois e quatro foram empurradas. Na caixa verde todas as linhas têm a mesma altura. Adicione essa regra uma vez à sua folha de estilo base e esqueça.

Caracteres Unicode e MathML

Para alguns casos comuns existem caracteres prontos: ² (²), ³ (³), ¹ (¹), ™ (™) e ½ (½). Eles não precisam de tag e não afetam a altura da linha, mas só existem para alguns dígitos e letras.

Para fórmulas de verdade (frações, raízes, expoentes de expoentes), use MathML, que os navegadores atuais renderizam de forma nativa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> recebe uma base e um expoente; <msub> faz o mesmo para subscritos. Para um único expoente numa frase,  é mais simples.

Erros comuns

Usar  para deixar o texto pequeno. Ele também eleva o texto e diz ao leitor que é um sobrescrito. Use font-size para texto pequeno.
Espaçamento entre linhas irregular. Adicione sup, sub { line-height: 0; }.
Escrever x^2 ou H2O no texto final. Use x2 e H2O para que o conteúdo seja lido corretamente.
Marcadores de nota pequenos demais para tocar. No celular, um único dígito elevado é um alvo minúsculo. Adicione um pouco de padding em sup a, ou coloque as notas perto do texto.

Perguntas frequentes

Como escrever sobrescrito no HTML?

Envolva o texto elevado em : x2 mostra x ao quadrado, 1st um ordinal. O navegador o desenha menor e acima da linha de base.

Como escrever subscrito no HTML?

Use : H2O para água, x1 para um índice. Ele é desenhado menor e abaixo da linha de base.

Como escrever x ao quadrado no HTML?

Com x2 ou com o caractere pronto x², que você também pode digitar como a entidade ². O caractere serve para quadrados e cubos;  funciona para qualquer expoente, como 2n+1.

Por que o deixa o espaçamento entre linhas irregular?

O texto elevado pode deixar a sua linha mais alta que as outras do parágrafo. Resolva com sup, sub { line-height: 0; }, que impede que eles aumentem a altura da linha.

Posso usar CSS em vez de ?

vertical-align: super com um font-size menor fica igual, mas  e  carregam significado: "m2" e "m2" são valores diferentes. Use as tags quando a posição elevada ou rebaixada faz parte do conteúdo.

Conceitos relacionados