<small>

Definition and Usage

The <small> element establishes smaller text and side comments.

The <small> 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 <small> tag:

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

Attributes

The <small> tag supports the Global Attributes in HTML.

The <small> tag also supports the Event Attributes in HTML.

Examples

Copyright Notice

Add a copyright notice in the footer:

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

Legal Disclaimer

Display legal disclaimers and terms:

<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:

<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:

<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:

<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:

<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:

<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

Semantic Meaning

The <small> 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

Not for Resizing Text

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

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

<!-- 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 <small> 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 <small> tags

Best Practices

• Use <small> for semantically small text (fine print, legal notices)
• Don't use it just to make text smaller; use CSS instead
• Avoid nesting multiple <small> 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 <small> for entire paragraphs

Small vs Other Elements

• <small>: Fine print, legal text, side comments
• <em>: Emphasis, stress, importance
• <strong>: Strong importance, serious attention
• <span>: Generic inline container for styling
• <sub>: Subscript text (H₂O)
• <sup>: Superscript text (x²)

Default CSS Settings

Most browsers will display the <small> element with the following default values:

small {
  font-size: smaller;
}

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

Related Tags

• <em>

  Defines emphasized text

• <strong>

  Defines important text

• <span>

  Defines a generic inline container

• <sub>

  Defines subscripted text

• <sup>

  Defines superscripted text

• <mark>

  Defines marked/highlighted text