HTML <sub> Tag
Il tag <sub> definisce il testo in pedice che appare mezzo carattere sotto la riga, in un font più piccolo. Esempi e sintassi.
Il tag HTML <sub> contrassegna il testo in pedice — caratteri che si trovano mezzo rigo sotto la linea di base e vengono visualizzati leggermente più piccoli. È un elemento inline e semantico: comunica al browser (e alle tecnologie assistive) che il testo incluso è un pedice, non semplicemente che dovrebbe apparire abbassato.
Usa <sub> solo quando la posizione abbassata porta un significato tipografico. Non è uno strumento generico per "rendere questo testo più piccolo e più basso" — se vuoi solo l'effetto visivo senza il significato, usa CSS (descritto di seguito).
Quando usare <sub>
Un pedice è significativo in diversi contesti:
- Formule chimiche — il numero di atomi: H2O, CO2, C2H5OH.
- Indici e pedici matematici — termini di sequenze e indici di variabili: x1, x2, …, an.
- Basi dei logaritmi — log2(n), log10(x).
- Marcatori di note a piè di pagina / riferimenti che, per convenzione, vengono composti in basso anziché in alto.
In ogni caso il pedice cambia il significato del testo circostante: CO2 e CO<sub>2</sub> vengono letti in modo diverso. Questa differenza semantica è esattamente ciò che <sub> esiste per esprimere — ed è per questo che la sola formattazione CSS non è un sostituto.
Per definire il testo in apice (alzato sopra la linea di base, ad es. esponenti come x2 o ordinali come 1st), usa il tag <sup>.
<sub> vs <sup>
Entrambi sono elementi tipografici semantici; differiscono solo nella direzione e nelle convenzioni che stabiliscono quando ciascuno è corretto.
<sub> (pedice) | <sup> (apice) | |
|---|---|---|
| Posizione | Sotto la linea di base | Sopra la linea di base |
| Usi tipici | Conteggio atomi (H2O), indici matematici (xn), basi dei logaritmi | Esponenti (x2), ordinali (2nd), marcatori di note |
| Lettura | "x pedice n" | "x alla potenza n", "2°" |
Scegli l'elemento che corrisponde alla convenzione stabilita per la notazione, non quello che "sembra giusto" — un conteggio chimico è sempre un pedice, un esponente è sempre un apice.
Sintassi
Il tag <sub> viene usato in coppia. Il contenuto in pedice è scritto tra il tag di apertura <sub> e quello di chiusura </sub>.
<p>Formula of water — H<sub>2</sub>O</p>Esempi
Formule chimiche
<!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> insieme a <sup>
Pedice e apice appaiono spesso nello stesso documento — uno per i conteggi chimici, l'altro per gli esponenti:
<!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 vuoi solo l'effetto visivo, usa CSS
Se un testo deve sembrare un pedice ma non lo è semanticamente, non abusare di <sub>. Applica invece la proprietà CSS vertical-align con il valore sub (più un font-size più piccolo) all'elemento appropriato. L'esempio seguente modifica lo stile del testo ordinario solo per la presentazione — nota che non viene usato alcun elemento <sub>:
<!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>Accessibilità
I lettori di schermo non annunciano il pedice in modo uniforme — alcuni leggono H<sub>2</sub>O come "H due O" senza indicare che il 2 è abbassato, altri fanno una pausa o cambiano intonazione, e molti ignorano del tutto la distinzione. Poiché la posizione può trasmettere un significato che va perso nella lettura vocale, è preferibile offrire una fonte chiara e non ambigua per le notazioni importanti:
- Per formule ed equazioni complesse, considera di fornire un'alternativa in testo semplice o adatta alla lettura vocale (ad esempio, scrivi "log in base 2 di n" nel testo vicino, oppure usa MathML per una vera marcatura matematica).
- Non affidarti solo a
<sub>per trasmettere qualcosa che il lettore deve comprendere — assicurati che la frase circostante sia ancora comprensibile quando il pedice viene annunciato in modo piatto.
Attributi
Il tag <sub> supporta gli attributi globali e gli attributi evento. Non ha attributi propri.
Stile di <sub>
I browser assegnano a <sub> un font più piccolo e una posizione abbassata per impostazione predefinita. Puoi modificarne l'aspetto con CSS mantenendo intatto il significato dell'elemento:
sub {
color: #555;
font-size: 0.8em;
}Nota: questo sovrascrive lo stile predefinito del browser per <sub> solo a scopo dimostrativo — il significato di pedice rimane invariato.