HTML <sup> tag
Usa il tag <sup> per definire il testo in apice, che appare mezzo carattere sopra la riga normale e viene visualizzato più piccolo del resto del testo.
Il tag HTML <sup> definisce il testo in apice — contenuto che viene visualizzato sollevato di mezzo carattere sopra la linea di base normale e con un carattere più piccolo. È un elemento inline e semantico: informa il browser e le tecnologie assistive che il testo sollevato ha un reale significato tipografico, non solo uno stile visivo.
Usa <sup> solo quando l'apice è tipograficamente o semanticamente necessario, ad esempio per esponenti, suffissi ordinali, marcatori di note a piè di pagina e lettere superiori nelle abbreviazioni. Non è pensato per uno stile generico di "testo sollevato". Se vuoi elevare visivamente del testo solo a scopo presentazionale, usa invece la proprietà CSS vertical-align con il valore super al posto di <sup>.
Il tag <sub> è il complemento di <sup>: definisce il testo in pedice, visualizzato sotto la linea di base (usato per formule chimiche, indici e simili).
Quando usare <sup>
Usa l'elemento <sup> quando l'apice porta un significato:
- Esponenti e potenze matematiche —
E = mc<sup>2</sup>. - Numeri ordinali —
st,nd,rd,thin1<sup>st</sup>,2<sup>nd</sup>,5<sup>th</sup>. - Marcatori di note a piè di pagina e riferimenti — un piccolo
[1]che rimanda a una nota. - Lettere superiori nelle abbreviazioni — comune in francese, ad es.
M<sup>lle</sup>(Mademoiselle) o1<sup>er</sup>.
Poiché il significato risiede nel markup, gli screen reader e i motori di ricerca possono interpretare correttamente il testo sollevato — cosa che un <span> con stile puramente CSS non riesce a trasmettere.
Sintassi
Il tag <sup> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<sup>) e quello di chiusura (</sup>).
Esempio: esponente in una formula
<!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>Nell'output qui sopra, il 2 viene visualizzato più piccolo e sollevato, quindi l'espressione si legge come "m c al quadrato".
Esempio: numeri ordinali
<!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>Esempio: marcatore di nota a piè di pagina / riferimento
Un pattern comune è racchiudere un piccolo marcatore con link in <sup> in modo che i lettori possano saltare a una nota in fondo alla pagina:
<!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>Esempio: lettere superiori nelle abbreviazioni
<!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>Stile dell'alternativa presentazionale con CSS
Gli esempi seguenti mostrano l'approccio presentazionale. Se il testo sollevato è puramente decorativo e non ha alcun significato semantico, preferisci CSS all'elemento <sup> per non fuorviare le tecnologie assistive. Il CSS seguente mostra anche come regolare la dimensione del contenuto genuino di <sup> (per impostazione predefinita i browser lo rimpiccioliscono; puoi sovrascrivere tale comportamento).
<!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>Esempio: <sup> insieme a <sub>
<sup> e <sub> vengono spesso usati affiancati — ad esempio in matematica, dove si possono avere sia una potenza che un indice:
<!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>Usa l'apice solo per un reale significato tipografico. Non abusare di <sup> per nascondere o rimpicciolire contenuti importanti — alcune tecnologie assistive saltano, pronunciano in modo errato o leggono il testo in apice fuori contesto, rendendo il testo più difficile da comprendere per gli utenti di screen reader.
Attributi
Il tag <sup> supporta gli attributi globali e gli attributi evento.
Vedi anche
<sub>— il complemento in pedice di<sup>.- CSS
vertical-align— il modo presentazionale per alzare o abbassare il testo inline.