HTML Small Text: The `<small>` Tag Explained

HTML <small> Tag

The <small> tag in HTML is used to represent side comments, disclaimers, legal fine print, or other text that is secondary to the main content. It renders the enclosed text in a smaller font size. It's crucial to understand that it's a presentational element and should be used semantically, not solely for visual styling. Use CSS for styling.

Syntax

<small>Text to be displayed smaller</small>

Attributes

The <small> tag supports the Global Attributes in HTML. There are no specific attributes for the <small> tag itself.

Example

<p>This is a paragraph with some important information.</p>
<small>This is a side comment related to the above paragraph.</small>

More Examples

Basic Usage

This demonstrates basic use case for copyright information

<p>This is the main content of the webpage.</p>
<small>&copy; 2023 CodeLucky. All rights reserved.</small>

Legal Disclaimer

This demonstrates use case for legal disclaimers, in smaller font size.

<p>Our amazing product features here!</p>
<small>Disclaimer: Results may vary. Please consult with a professional before making any decisions.</small>

With other HTML elements

This demonstrates <small> tag usage with other HTML tags

<article>
  <h1>Product Title</h1>
  <p>Description of our awesome product.</p>
  <small>Price: <del>$299</del> $199</small>
  <small><em>Special limited time offer</em></small>
</article>

Nested <small> elements

Nested small elements progressively reduce font size. It is not advisable to nest too much.

<p>Some main content here.</p>
<small>This is a side note.
    <small>This is an additional side note about the side note.</small>
</small>

Browser Support

The <small> tag is widely supported across all major browsers.

Notes and Tips

• Semantic Use: Use <small> for minor, side comment text, and disclaimers. Avoid using it solely for visual styling.
• CSS Styling: Use CSS for font size adjustments if you need more specific control over visual presentation.
• Accessibility: While <small> reduces font size, make sure the reduced size still remains readable for users.
• Alternative Text: Consider using <figcaption> for captions associated with images or figures, instead of the <small> element.
• Nesting: Avoid excessively nesting <small> elements, as readability may become an issue.
• Readability: Use it judiciously to maintain readability, as overusing the tag may create visual clutter.
• Accessibility: Ensure color contrast is adequate with smaller text.
• Don't Use for Emphasis: If you need to emphasize something, consider using <strong> or <em> tags.
• Context is Key: Always consider context while using this tag; using it out of context might create confusion for other users.