HTML Small Tag: How to Make Text Small

The HTML small tag displays text in a smaller font size than nearby text. It shows less important or side content and does not add special meaning to the content.

It helps show a clear visual level in text blocks. Browsers may show small text in slightly different ways.

How to Use the Small Tag in HTML

The HTML <small> tag represents side comments or fine print. It’s not just for shrinking font size—it semantically marks the content as less prominent or secondary.

Wrap the target text between <small> and </small>. Place it inside any container like a paragraph or heading.

Here is the syntax:

<small>Wrod</small>

Do not nest multiple <small> tags. Check how the small text looks on many screen sizes.

Here is a quick example:

<p>This is normal text. <small>This is smaller text.</small></p>

So, When to use the HTML small tag?

You use it to show legal notes or fine print and if you need to do notes or citations that do not distract readers. Add context to explain the reason for the smaller size.

But, do not use it for text that must be read and do not hide key content by shrinking it.

Here are examples of elements for phrasing content (inline texts) that you can use inside <small>:

• Text content (plain text)
• <a> – hyperlinks
• <abbr> – abbreviations
• <b> – bold
• <bdi> / <bdo> – bidirectional text control
• <br> – line break
• <cite> – citation
• <code> – code snippet
• <data> / <time> – machine-readable data
• <dfn> – defining instance
• <em> – emphasis
• <i> – italic
• <img> – image
• <input> – inline form input
• <kbd> – keyboard input
• <label> – form label
• <mark> – highlight
• <q> – inline quote
• <ruby>, <rt>, <rp> – ruby annotations
• <s> – strikethrough
• <samp> – sample output
• <select> – dropdown
• <small> – nested small (not useful, but allowed)
• <span> – generic inline container
• <strong> – strong importance
• <sub> / <sup> – subscript / superscript
• <u> – underline
• <var> – variable

These are block-level elements or others not classified as phrasing content that you can not use inside <small> tag:

• <div>
• <p>
• <h1>–<h6>
• <ul>, <ol>, <li>
• <table>, <tr>, <td>
• <section>, <article>, <nav>, etc.
• <form> (but individual inline form elements like <input> are allowed)

Style the <small> element with CSS

You can control the font or color with CSS.

Here is an example:

small {
  color: gray;
  font-style: italic;
  font-size: 0.85em;
}

Use relative units like em to fit different screens. Do not pick colors that blend with the background.

The Difference Between <small> vs <span> (used for size)

The <small> when the text has contextual or legal significance. But, <span> when the goal is visual control only.

Here is a table that shows you key differences:

Examples of <small> Tag in HTML

Legal Disclaimer in a Product Description:

<p>
  Buy now and get free shipping worldwide!
  <small>Offer valid until July 31, 2025. Conditions apply.</small>
</p>

Here, It shows extra info but keeps the focus on the main text.

Footer with Copyright and Policy Links:

<footer>
  <small>
    © 2025 MyCompany Inc. All rights reserved.  
    <a href="/terms.html">Terms</a> | <a href="/privacy.html">Privacy</a>
  </small>
</footer>

Here, it used in footers for legal info (like rules or copyright).

Within a Form for Help Text:

<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<small>Your email will remain confidential.</small>

Here, It makes text smaller for less important notes, like legal details or small tips.

Wrapping up

In this article, you learned what the <small> tag does and how to use it in your HTML pages. Here is a quick recap:

• <small> shrinks the font to show less important text.
• Use it for notes, citations, or disclaimers.
• Do not use it for key content.
• Style it with CSS to match your design.

<p>This is normal text. <small>This is small text.</small></p>

small {
  color: gray;
  font-style: italic;
}

Similar Reads