Tag HTML <small>
Il tag <small> riduce la dimensione del carattere di un livello rispetto al font base del documento (ad esempio da medium a small).
Il tag HTML <small> contrassegna note a margine e testo in piccolo — contenuti di importanza secondaria come note sul copyright, disclaimer legali, informazioni sulle licenze, attribuzioni e le scritte in piccolo accanto a un prezzo. I browser lo rendono circa una dimensione più piccola rispetto al testo circostante (circa l'80% della dimensione del font del genitore), ma il suo valore reale è semantico: comunica ai browser e alle tecnologie assistive che il testo è una nota a margine, non un'intestazione o il messaggio principale.
Quando usare <small> (e quando no)
Questa è la distinzione fondamentale che molti sviluppatori trascurano. In HTML5, <small> non è uno strumento generico per "ridurre il testo". Se si desidera modificare solo la dimensione visiva di un testo per ragioni estetiche, è preferibile usare la proprietà CSS font-size.
Usa <small> quando il contenuto è testo in piccolo o una nota a margine:
- Righe di copyright nel footer
- Disclaimer legali e condizioni ("Si applicano i termini")
- La nota con asterisco accanto a un prezzo o a un tasso d'interesse
- Note di attribuzione e licenza
Usa invece CSS font-size quando vuoi semplicemente un testo più piccolo senza alcun significato di "nota a margine" — ad esempio, una didascalia o un'etichetta stilisticamente ridotta.
Come i tag <i>, <b>, <sub> e <sup>, <small> è pienamente semantico in HTML5 e non viola il principio di separazione tra struttura e presentazione. È un elemento inline, quindi scorre all'interno di una riga di testo anziché aprire un nuovo blocco.
Sintassi
Il tag <small> si usa in coppia. Il contenuto viene scritto tra il tag di apertura (<small>) e quello di chiusura (</small>).
Esempio del tag HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Esempio del tag HTML <small> all'interno di un tag <div>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<h1>Small tag example</h1>
<p>This is some standard paragraph text.</p>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<small>This is a small text.</small>
</div>
</body>
</html>Esempi pratici
Riga di copyright nel footer
Un avviso di copyright è il classico testo in piccolo, quindi appartiene a un elemento <small>:
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Testo in piccolo accanto a un prezzo
Usa <small> per il disclaimer che qualifica un prezzo o un tasso:
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p><small> annidato per ridurre ulteriormente la dimensione
È possibile inserire un elemento <small> all'interno di un altro elemento <small>. Ogni livello riduce nuovamente la dimensione del font rispetto al suo genitore, quindi più profondo è l'annidamento, più piccolo risulta il testo:
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Attributi
Il tag <small> supporta gli attributi globali e gli attributi evento.
Come stilizzare un tag HTML <small>
La dimensione predefinita del browser per <small> deriva da CSS, quindi è possibile sovrascriverla con la proprietà font-size. L'esempio seguente mantiene il significato semantico del testo in piccolo controllando al contempo l'aspetto esatto:
<!DOCTYPE html>
<html>
<head>
<title>Styling the small tag</title>
<style>
small {
font-size: 0.75em;
color: #777;
}
</style>
</head>
<body>
<p>
Subscribe today!
<small>Cancel anytime.</small>
</p>
</body>
</html>Tieni presente la differenza: usa l'elemento <small> quando il testo significa testo in piccolo o una nota a margine, e usa la proprietà CSS font-size quando vuoi semplicemente modificare la dimensione visiva di un testo ordinario.