<small>

  • Revision slug: HTML/Element/small
  • Revision title: small
  • Revision id: 1862
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment 3 words added, 6 words removed

Revision Content

Summary

The HTML Small Element (<small>) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Usage context

Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None, must have both a start tag and an end tag.
Permitted parent elements Any element that accepts phrasing content, or any element that accepts flow content.
Normative document HTML5, section 4.6.4; HTML 4.01, section 15.2.1

Attributes

Like all other HTML elements, this element supports the global attributes.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Example 1

<p>This is the first sentence.  <small>This whole sentence is in small letters.</small></p>

Result

This is the first sentence. This whole sentence is in small letters.

Example 2 (CSS alternative)

<p>This is the first sentence. <span style="font-size:0.8em">This whole sentence is in small letters.</span></p>

Result

This is the first sentence. This whole sentence is in small letters.

Notes

Although the <small> element, like the <b> and <i> elements, may be perceived to violate the principle of separation between structure and presentation, all three are valid in HTML5. Authors are encouraged to use their best judgement when determining whether to use <small> or CSS.

See also

{{ HTML:Element_Navigation() }}
{{ languages({ "ja": "ja/HTML/Element/small", "pl": "pl/HTML/Element/small" }) }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML Small Element (<span style="font-family: Courier New;">&lt;small&gt;</span>) makes the text <em>font size</em> one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.</p>
<h3 class="editable" id="Usage_context">Usage context</h3>
<table class="standard-table"> <tbody> <tr> <td>Content categories</td> <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Tag omission</td> <td>None, must have both a start tag and an end tag.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>.</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element">HTML5, section 4.6.4</a>; <a class="external" href="http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL" title="http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL">HTML 4.01, section 15.2.1</a></td> </tr> </tbody>
</table>
<h3 class="editable" id="Attributes">Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<h3 class="editable" id="DOM.C2.A0Interface">DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note"> <p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div>
<h3 id="Example_1" name="Example_1">Example 1</h3>
<pre class="brush: html">&lt;p&gt;This is the first sentence.  &lt;small&gt;This whole sentence is in small letters.&lt;/small&gt;&lt;/p&gt;
</pre>
<h4 id="Result" name="Result">Result</h4>
<p>This is the first sentence. <small>This whole sentence is in small letters.</small></p>
<h3 id="Example_2_.28CSS_alternative.29" name="Example_2_.28CSS_alternative.29">Example 2 (CSS alternative)</h3>
<pre class="brush: html">&lt;p&gt;This is the first sentence. &lt;span style="font-size:0.8em"&gt;This whole sentence is in small letters.&lt;/span&gt;&lt;/p&gt;
</pre>
<h4 id="Result_2" name="Result_2">Result</h4>
<p>This is the first sentence. <span style="font-size:0.8em">This whole sentence is in small letters.</span></p>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Although the <span style="font-family: Courier New;">&lt;small&gt;</span> element, like the <span style="font-family: Courier New;">&lt;b&gt;</span> and <span style="font-family: Courier New;">&lt;i&gt;</span> elements, may be perceived to violate the principle of separation between structure and presentation, all three are valid in HTML5. Authors are encouraged to use their best judgement when determining whether to use <span style="font-family: Courier New;">&lt;small&gt; </span>or CSS.</p>
<h3 id="See_also" name="See_also">See also</h3>
<ul> <li><a href="/en/HTML/Element/big" title="en/HTML/Element/big">HTML Big Element</a></li> <li><a href="/en/HTML/Element/font" title="en/HTML/Element/font">HTML Font Element</a></li> <li><a href="/en/HTML/Element/style" title="en/HTML/Element/style">HTML Style Element</a></li> <li>HTML 4.01 Specification: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li>
</ul>
<div>{{ HTML:Element_Navigation() }}</div>
<div class="noinclude">{{ languages({ "ja": "ja/HTML/Element/small", "pl": "pl/HTML/Element/small" }) }}</div>
Revert to this revision