HTML <small> Tag
The <small> tag decreases the text font size by one size smaller than a document's base font size (from medium to small, or from x-large to large).
The HTML <small> tag marks up side comments and small print — content of secondary importance such as copyright notices, legal disclaimers, license information, attributions, and the fine print next to a price. Browsers render it about one size smaller than the surrounding text (roughly 80% of the parent font size), but its real value is semantic: it tells browsers and assistive technology that the text is a side note, not a heading or the main message.
When to use <small> (and when not to)
This is the key distinction many developers miss. In HTML5, <small> is not a generic "make this text smaller" tool. If you only want to change the visual size of some text for design reasons, use CSS font-size instead.
Use <small> when the content is fine print or a side comment:
- Copyright lines in a footer
- Legal disclaimers and terms ("Terms apply")
- The asterisked note next to a price or interest rate
- Attribution and licensing notes
Reach for CSS font-size instead when you simply want smaller text that carries no "side comment" meaning — for example, a stylistically small caption or label.
Like the <i>, <b>, <sub>, and <sup> tags, <small> is fully semantic in HTML5 and does not violate the rule of separation between structure and presentation. It is an inline element, so it flows within a line of text rather than starting a new block.
Syntax
The <small> tag comes in pairs. The content is written between the opening (<small>) and closing (</small>) tags.
Example of the HTML <small> tag:
<!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>Example of the HTML <small> tag inside a <div> tag:
<!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>Real-world examples
Footer copyright line
A copyright notice is classic fine print, so it belongs in a <small> element:
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Fine print next to a price
Use <small> for the disclaimer that qualifies a price or rate:
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p>Nested <small> for further size reduction
You can place a <small> element inside another <small> element. Each level reduces the font size again relative to its parent, so the deeper the nesting, the smaller the text:
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Attributes
The <small> tag supports the Global attributes and the Event Attributes.
How to style an HTML <small> tag
The browser's default size for <small> comes from CSS, so you can override it with the font-size property. The example below keeps the semantic meaning of fine print while controlling the exact appearance:
<!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>Keep in mind the difference: use the <small> element when the text means fine print or a side comment, and use the CSS font-size property when you only want to change the visual size of ordinary text.