ContextQMD
Back to Content

: The Side Comment element

files/en-us/web/html/reference/elements/small/index.md

latest3.3 KB
Original Source

The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.

{{InteractiveExample("HTML Demo: <small>", "tabbed-shorter")}}

html
<p>
  MDN Web Docs is a learning platform for Web technologies and the software that
  powers the Web.
</p>

<hr />

<p>
  <small
    >The content is licensed under a Creative Commons Attribution-ShareAlike 2.5
    Generic License.</small
  >
</p>
css
small {
  font-size: 0.7em;
}

Attributes

This element only includes the global attributes.

Examples

Basic usage

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

Result

{{EmbedLiveSample("Basic_usage")}}

CSS alternative

html
<p>
  This is the first sentence.
  <span class="small">This whole sentence is in small letters.</span>
</p>
css
.small {
  font-size: 0.8em;
}

Result

{{EmbedLiveSample("CSS_alternative")}}

Notes

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

Technical summary

<table class="properties"> <tbody> <tr> <th scope="row"> <a href="/en-US/docs/Web/HTML/Guides/Content_categories" >Content categories</a > </th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content" >Flow content</a >, <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >Phrasing content</a > </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None; must have both a start tag and an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >, or any element that accepts <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content" >flow content</a >. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code ><a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/generic_role" >generic</a ></code > </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td>{{domxref("HTMLElement")}}</td> </tr> </tbody> </table>

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{HTMLElement("b")}}
  • {{HTMLElement("sub")}} and {{HTMLElement("sup")}}
  • {{HTMLElement("font")}}
  • {{HTMLElement("style")}}