Guida HTML interattiva: Apice e pedice

Q: Come scrivo in apice in HTML?

Racchiudi il testo da alzare in : x 2 mostra x al quadrato, 1 st un ordinale. Il browser lo disegna più piccolo e sollevato sopra la linea di base.

Q: Come scrivo in pedice in HTML?

Usa : H 2 O per l'acqua, x 1 per un indice. Viene disegnato più piccolo e abbassato sotto la linea di base.

Q: Come scrivo x al quadrato in HTML?

Con x 2 oppure con il carattere già pronto x², che puoi scrivere anche come entità ². Il carattere va bene per quadrati e cubi; funziona per qualsiasi esponente, come 2 n+1 .

Q: Posso usare il CSS invece di ?

vertical-align: super con un font-size più piccolo ha lo stesso aspetto, ma e hanno un significato: "m2" e "m 2 " sono valori diversi. Usa i tag quando la posizione alzata o abbassata fa parte del contenuto.

Apice e pedice in HTML: i tag sup e sub

Scrivi testo in apice con e in pedice con : esponenti, numeri ordinali, rimandi alle note e formule chimiche. Scopri gli usi comuni, come evitare che allarghino le righe e quando è meglio un carattere Unicode o MathML.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come scrivere in apice in HTML

Racchiudi il testo da alzare in . Il browser lo mostra più piccolo e sollevato sopra la riga. Il suo compagno  mostra il testo più piccolo e abbassato:

<!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  sono inline e possono contenere altri elementi inline, quindi funzionano anche 2n+1 o xi.

Usi comuni

Vuoi	Scrivi	Risultato
Un esponente	`10<sup>3</sup>`	10 alla terza
Un ordinale	`2<sup>nd</sup>`	2nd con le lettere sollevate
Un rimando a una nota	`text<sup><a href="#n1">1</a></sup>`	Un 1 sollevato e cliccabile
Una formula chimica	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glucosio
Un indice o una base	`x<sub>1</sub>`, `log<sub>2</sub>`	1 e 2 abbassati
Un marchio	`Brand<sup>TM</sup>` o `Brand™`	TM sollevato

Usa i tag quando la posizione fa parte del significato: m2 e m2 sono cose diverse. Per un testo piccolo solo per stile (un'etichetta, un badge), usa invece il CSS.

Note a piè di pagina con sup

Il rimando a una nota è un link in apice verso una nota in fondo. Dai a ogni nota un id e punta il link a quell'id:

<!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>

Clicca un numero per saltare alla sua nota, e "Back" per tornare. Togliere la sottolineatura dal piccolo link lascia il paragrafo pulito, mentre il colore del link lo segnala comunque come cliccabile.

Mantenere un'interlinea regolare

Per impostazione predefinita, un  o un  può rendere la sua riga più alta di quelle attorno, quindi un paragrafo con qualche esponente appare spaziato in modo irregolare. Impostare line-height: 0 su di loro risolve il problema:

<!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>

Il riquadro grigio è più alto perché le righe due e quattro sono state allontanate. Nel riquadro verde ogni riga ha la stessa altezza. Aggiungi quella regola una volta al tuo foglio di stile di base e non pensarci più.

Caratteri Unicode e MathML

Per alcuni casi comuni esistono caratteri già pronti: ² (²), ³ (³), ¹ (¹), ™ (™) e ½ (½). Non richiedono tag e non influiscono sull'interlinea, ma esistono solo per alcune cifre e lettere.

Per le formule vere (frazioni, radici, esponenti di esponenti), usa MathML, che i browser attuali mostrano in modo nativo:

<!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> prende una base e un esponente; <msub> fa lo stesso per i pedici. Per un singolo esponente in una frase,  è più semplice.

Errori comuni

Usare  per rimpicciolire il testo. Solleva anche il testo e dice ai lettori che è un apice. Usa font-size per il testo piccolo.
Interlinea irregolare. Aggiungi sup, sub { line-height: 0; }.
Scrivere x^2 o H2O nel testo finito. Usa x2 e H2O così il contenuto si legge correttamente.
Rimandi alle note troppo piccoli da toccare. Sui telefoni una singola cifra sollevata è un bersaglio minuscolo. Aggiungi un po' di padding a sup a, oppure metti le note vicino al testo.

Domande frequenti

Come scrivo in apice in HTML?

Racchiudi il testo da alzare in : x2 mostra x al quadrato, 1st un ordinale. Il browser lo disegna più piccolo e sollevato sopra la linea di base.

Come scrivo in pedice in HTML?

Usa : H2O per l'acqua, x1 per un indice. Viene disegnato più piccolo e abbassato sotto la linea di base.

Come scrivo x al quadrato in HTML?

Con x2 oppure con il carattere già pronto x², che puoi scrivere anche come entità ². Il carattere va bene per quadrati e cubi;  funziona per qualsiasi esponente, come 2n+1.

Perché rende irregolare l'interlinea?

Il testo sollevato può rendere la sua riga più alta delle altre del paragrafo. Si risolve con sup, sub { line-height: 0; }, che impedisce loro di aggiungere altezza alla riga.

Posso usare il CSS invece di ?

vertical-align: super con un font-size più piccolo ha lo stesso aspetto, ma  e  hanno un significato: "m2" e "m2" sono valori diversi. Usa i tag quando la posizione alzata o abbassata fa parte del contenuto.

Concetti correlati