Reduces text size for fine print

Definition and Usage

The  element establishes smaller text and side comments.

The  element makes the text one font size smaller (from medium to small, for example). It represents side comments and fine print, including copyright and legal text.

Common uses of the  tag:

Copyright notices
Legal disclaimers
Terms and conditions
Attribution text
Side comments and annotations
Fine print in contracts or agreements

Tip: The  tag has semantic meaning - use it for fine print and legal text, not just to make text smaller for styling purposes.

Note: To simply make text smaller for design purposes, use CSS font-size instead.

Browser Support

The  tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The  tag supports the Global Attributes in HTML.

The  tag also supports the Event Attributes in HTML.

Examples

Copyright Notice

Add a copyright notice in the footer:

Example
<footer>
  <p><small>© 2024 Your Company. All rights reserved.</small></p>
</footer>

Legal Disclaimer

Display legal disclaimers and terms:

Example
<article>
  <h2>Special Offer</h2>
  <p>Get 50% off your first purchase!</p>
  <small>*Offer valid until December 31, 2024. Terms and conditions apply.</small>
</article>

Legal Text in Forms

Add fine print to form submissions:

Example
<form>
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Subscribe</button>

  <p><small>By subscribing, you agree to our Privacy Policy and Terms of Service.
  We will never share your email address with third parties.</small></p>
</form>

Aside Text and Annotations

Add side comments to content:

Example
<article>
  <h2>Product Review</h2>
  <p>This laptop has excellent performance and battery life.</p>
  <p><small>Review based on 6 months of daily use.</small></p>

  <p>Rating: 5/5 stars</p>
  <p><small>Last updated: January 15, 2025</small></p>
</article>

Combined with Other Elements

Use small text with other semantic elements:

Example
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
  <footer>
    <small>— Alan Kay, Computer Scientist</small>
  </footer>
</blockquote>

<figure>
  <img src="chart.png" alt="Sales Chart">
  <figcaption>
    2024 Sales Performance
    <small>(in thousands of dollars)</small>
  </figcaption>
</figure>

Styled Small Text

Apply custom CSS styling:

Example
<style>
  small {
    font-size: 0.875em;
    color: #666;
    line-height: 1.5;
  }

  small.disclaimer {
    display: block;
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border-left: 3px solid #745af2;
    font-style: italic;
  }

  small.copyright {
    display: block;
    text-align: center;
    margin-top: 20px;
    opacity: 0.8;
  }
</style>

<p>Price: $99.99 <small class="disclaimer">Shipping not included</small></p>

<footer>
  <small class="copyright">© 2024 Company Name</small>
</footer>

Pricing Tables with Fine Print

Add fine print to pricing information:

Example
<div class="pricing-card">
  <h3>Pro Plan</h3>
  <p class="price">$29.99/month</p>
  <ul>
    <li>Unlimited projects</li>
    <li>Priority support</li>
    <li>Advanced analytics</li>
  </ul>
  <button>Get Started</button>
  <p><small>Billed annually. Cancel anytime. 30-day money-back guarantee.</small></p>
</div>

Try it Yourself

Interactive Example

See how the  tag works in practice:

Product Offer

$49.99

Premium membership with exclusive benefits

*Regular price $99.99. Offer ends December 31, 2024. New members only. Terms and conditions apply. Not valid with other promotions.

🚀 Try in Code Playground

Semantic Meaning

The  tag has specific semantic meaning in HTML:

Side comments: Use for explanatory notes or supplementary information
Legal text: Perfect for disclaimers, terms, and conditions
Copyright: Ideal for copyright notices and attribution
Fine print: Traditional use for the "small print" in contracts
Attribution: Author attribution, sources, and citations

Important: The  tag is not intended to make large amounts of text smaller. Use CSS for styling purposes.

Not for Resizing Text

The  tag should not be used just to make text smaller for visual design:

❌ Incorrect Usage

<!-- Don't use small just for styling -->
<small>
  <small>
    <small>This is really tiny</small>
  </small>
</small>

✓ Correct Usage

<!-- Use CSS for visual styling -->
<p style="font-size: 0.8em;">
  Smaller text for design purposes
</p>

Accessibility Considerations

Ensure small text is still readable (minimum 12px recommended)
Maintain sufficient color contrast for accessibility (WCAG AA: 4.5:1)
Screen readers treat  the same as regular text
Don't rely solely on size to convey importance; use semantic HTML
Test with users who have visual impairments
Avoid nesting multiple  tags

Accessibility Tip: Even though the text is smaller, it should remain legible. Consider using font-size: 0.875em (14px) as a minimum for body text.

Best Practices

Use  for semantically small text (fine print, legal notices)
Don't use it just to make text smaller; use CSS instead
Avoid nesting multiple  tags
Ensure text remains readable and accessible
Maintain proper color contrast ratios
Use for copyright notices in footers
Perfect for disclaimers and terms in forms
Combine with other semantic elements appropriately
Don't use  for entire paragraphs

Small vs Other Elements

: Fine print, legal text, side comments
: Emphasis, stress, importance
: Strong importance, serious attention
: Generic inline container for styling
: Subscript text (H₂O)
: Superscript text (x²)

Default CSS Settings

Most browsers will display the  element with the following default values:

Default CSS
small {
  font-size: smaller;
}

The smaller keyword typically makes the text about 83% of the parent element's font size.

Related Tags

Defines emphasized text
Defines important text
Defines a generic inline container
Defines subscripted text
Defines superscripted text
Defines marked/highlighted text