devdocs/html/element%2Fsmall.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<header><h1>&lt;small&gt;: the side comment element</h1></header><div class="section-content"><p>The <code>&lt;small&gt;</code> <a href="../index">HTML</a> 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 <code>small</code> to <code>x-small</code>.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/small.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="attributes">Attributes</h2>
<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div>
<h2 id="examples">Examples</h2>

<h3 id="basic_usage">Basic usage</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="iXr7PDWDfNhmV0Hp6My9qslH8oO7OVoxwrGtmNEpwzo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  This is the first sentence.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>small</span><span class="token punctuation">&gt;</span></span>This whole sentence is in small letters.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>small</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect1">

<iframe class="sample-code-frame" title="Basic usage sample" id="frame_basic_usage" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/small/runner.html?id=basic_usage" loading="lazy"></iframe>
</div>
</div>
<h3 id="css_alternative">CSS alternative</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="zE0JR03IWtHqK6K5ed8w9QjPWNxJMVHla1OYmIKZxAM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  This is the first sentence.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>0.8em</span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>This whole sentence is in small letters.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect2">

<iframe class="sample-code-frame" title="CSS alternative sample" id="frame_css_alternative" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/small/runner.html?id=css_alternative" loading="lazy"></iframe>
</div>
</div>
<h2 id="notes">Notes</h2>
<div class="section-content"><p>Although the <code>&lt;small&gt;</code> element, like the <a href="b"><code>&lt;b&gt;</code></a> and <a href="i"><code>&lt;i&gt;</code></a> 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 <code>&lt;small&gt;</code> or CSS.</p></div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row">Content categories</th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../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="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element">HTML Standard <br><small># the-small-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>small</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="b"><code>&lt;b&gt;</code></a></li> <li>
<a href="sub"><code>&lt;sub&gt;</code></a> and <a href="sup"><code>&lt;sup&gt;</code></a>
</li> <li><a href="font"><code>&lt;font&gt;</code></a></li> <li><a href="style"><code>&lt;style&gt;</code></a></li> <li>HTML 4.01 Specification: <a href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2" target="_blank">Font Styles</a>
</li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small</a>
  </p>
</div>