Tag HTML <sup>
Use a tag <sup> para definir texto sobrescrito, que aparece meio caractere acima da linha normal e é renderizado menor que o restante do texto.
A tag HTML <sup> define texto sobrescrito — conteúdo que é renderizado elevado meio caractere acima da linha de base normal e com uma fonte menor. É um elemento inline e semântico: informa ao navegador e às tecnologias assistivas que o texto elevado possui um significado tipográfico real, não apenas um ajuste de estilo.
Use <sup> somente quando o sobrescrito for tipográfica ou semanticamente necessário, como para expoentes, sufixos ordinais, marcadores de notas de rodapé e letras superiores em abreviações. Não se destina a estilização arbitrária de "texto elevado". Se você deseja apenas elevar o texto visualmente para fins de apresentação, use a propriedade CSS vertical-align com o valor super em vez de <sup>.
A tag <sub> é a contraparte de <sup>: ela define texto subscrito, renderizado abaixo da linha de base (usado para fórmulas químicas, índices e similares).
Quando usar <sup>
Use o elemento <sup> quando o sobrescrito carregar significado:
- Expoentes e potências matemáticas —
E = mc<sup>2</sup>. - Números ordinais — o
st,nd,rd,them1<sup>st</sup>,2<sup>nd</sup>,5<sup>th</sup>. - Marcadores de notas de rodapé e referências — um pequeno
[1]que leva a uma nota. - Letras superiores em abreviações — comuns em francês, por exemplo,
M<sup>lle</sup>(Mademoiselle) ou1<sup>er</sup>.
Como o significado está na marcação, leitores de tela e mecanismos de busca podem interpretar o texto elevado corretamente — algo que um <span> estilizado apenas com CSS não consegue transmitir.
Sintaxe
A tag <sup> vem em pares. O conteúdo é escrito entre as tags de abertura (<sup>) e fechamento (</sup>).
Exemplo: expoente em uma fórmula
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
</p>
</body>
</html>No resultado acima, o 2 é renderizado menor e elevado, de modo que a expressão é lida como "m c ao quadrado".
Exemplo: números ordinais
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She finished 1<sup>st</sup>, ahead of the 2<sup>nd</sup> and 3<sup>rd</sup> place runners.</p>
</body>
</html>Exemplo: marcador de nota de rodapé / referência
Um padrão comum é envolver um pequeno marcador com link em <sup> para que os leitores possam pular para uma nota no final da página:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The first web browser was created in 1990<sup><a href="#fn1">[1]</a></sup>.
</p>
<hr />
<p id="fn1">[1] Tim Berners-Lee, WorldWideWeb, CERN.</p>
</body>
</html>Exemplo: letras superiores em abreviações
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>M<sup>lle</sup> Dupont est arrivée 1<sup>re</sup>.</p>
</body>
</html>Estilizando a alternativa apresentacional com CSS
Os exemplos abaixo seguem a abordagem apresentacional. Se o seu texto elevado for puramente decorativo e não tiver significado semântico, prefira CSS em vez do elemento <sup> para não induzir tecnologias assistivas a erros. O CSS abaixo também mostra como ajustar o tamanho do conteúdo genuíno de <sup> (por padrão, os navegadores o reduzem; você pode sobrescrever isso).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.raised {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Decorative raised text via CSS</h1>
<p>
Here is some text <span class="raised">lifted with CSS</span>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>Exemplo: <sup> junto com <sub>
<sup> e <sub> são frequentemente usados lado a lado — por exemplo, em matemática, onde pode ser necessário tanto uma potência quanto um índice:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The term a<sub>n</sub> can be written as a<sub>1</sub><sup>2</sup>.</p>
<p>Water is H<sub>2</sub>O, and the area of a square is s<sup>2</sup>.</p>
</body>
</html>Use sobrescrito apenas para significado tipográfico genuíno. Não abuse de <sup> para ocultar ou diminuir conteúdo importante — algumas tecnologias assistivas ignoram, pronunciam incorretamente ou leem o texto sobrescrito fora de contexto, o que pode dificultar a compreensão para usuários de leitores de tela.
Atributos
A tag <sup> suporta atributos globais e os atributos de eventos.
Veja também
<sub>— a contraparte subscrita de<sup>.- CSS
vertical-align— a forma apresentacional de elevar ou rebaixar texto inline.