La balise HTML <small>
La balise <small> réduit la taille de la police d'un cran par rapport à la taille de base du document (par exemple, de medium à small).
La balise HTML <small> marque les commentaires secondaires et les petits caractères — du contenu d'importance secondaire tel que les mentions de droits d'auteur, les avertissements légaux, les informations de licence, les attributions et les notes en bas de page accompagnant un prix. Les navigateurs l'affichent environ un cran plus petit que le texte environnant (environ 80 % de la taille de police parente), mais sa vraie valeur est sémantique : elle indique aux navigateurs et aux technologies d'assistance que le texte est une note secondaire, et non un titre ou le message principal.
Quand utiliser <small> (et quand ne pas le faire)
C'est la distinction essentielle que beaucoup de développeurs manquent. En HTML5, <small> n'est pas un outil générique pour « réduire la taille de ce texte ». Si vous souhaitez uniquement modifier la taille visuelle d'un texte pour des raisons de design, utilisez plutôt la propriété CSS font-size.
Utilisez <small> lorsque le contenu est un texte en petits caractères ou un commentaire secondaire :
- Mentions de droits d'auteur dans un pied de page
- Avertissements légaux et conditions générales (« Conditions applicables »)
- La note avec astérisque à côté d'un prix ou d'un taux d'intérêt
- Notes d'attribution et de licence
Recourez plutôt à la propriété CSS font-size lorsque vous voulez simplement un texte plus petit sans signification de « commentaire secondaire » — par exemple, une légende ou une étiquette stylisée en petite taille.
Comme les balises <i>, <b>, <sub> et <sup>, <small> est pleinement sémantique en HTML5 et ne viole pas le principe de séparation entre structure et présentation. C'est un élément en ligne, donc il s'intègre dans une ligne de texte plutôt que de commencer un nouveau bloc.
Syntaxe
La balise <small> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<small>) et fermante (</small>).
Exemple de la balise 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>Exemple de la balise HTML <small> à l'intérieur d'une balise <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>Exemples concrets
Mention de droits d'auteur dans un pied de page
Une mention de droits d'auteur est un exemple classique de petits caractères, elle appartient donc à un élément <small> :
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Petits caractères à côté d'un prix
Utilisez <small> pour la clause de réserve qui précise un prix ou un taux :
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p><small> imbriqué pour une réduction de taille supplémentaire
Vous pouvez placer un élément <small> à l'intérieur d'un autre élément <small>. Chaque niveau réduit à nouveau la taille de police par rapport à son parent ; plus l'imbrication est profonde, plus le texte est petit :
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Attributs
La balise <small> prend en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML <small>
La taille par défaut du navigateur pour <small> provient du CSS, vous pouvez donc la remplacer avec la propriété font-size. L'exemple ci-dessous conserve la signification sémantique des petits caractères tout en contrôlant l'apparence exacte :
<!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>Gardez à l'esprit la différence : utilisez l'élément <small> lorsque le texte signifie des petits caractères ou un commentaire secondaire, et utilisez la propriété CSS font-size lorsque vous souhaitez uniquement modifier la taille visuelle d'un texte ordinaire.