<sub>

  • Revision slug: Web/HTML/Element/sub
  • Revision title: <sub>
  • Revision id: 391413
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From HTML/Element/sub to Web/HTML/Element/sub

Revision Content

Summary

The HTML Subscript Element (<sub>) defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.

Usage note:

  • This element should be used for typographical reasons only, i.e. changing the position of the text changing its meaning like in mathematical (like t2, though the use of a MathML formula should be considered) or chemical formulas (like H2O).
  • This element must not be used for styling purpose like the styling of the product name Latex. In that case CSS style should be used: the {{ cssxref("vertical-align") }} property with the sub value will achieve the same effect.

Usage context

Content categories Flow content and phrasing content
Permitted content Phrasing content
Tag omission None as both the start and end tag are mandatory.
Permitted parent elements Any element that can contain phrasing content
Normative document HTML5, section 4.6.14 (HTML4.01, section 9.2.3)

Attributes

This element only includes 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.

Examples

<p>The chemical formula of water is H<sub>2</sub>O</p>

Result

The chemical formula of water is H2O

See also

  • The {{ HTMLElement("sup") }} HTML element that produce superscript. Note that you cannot use them both at the same time and you need to use MathML to produce both a superscript and a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.
  • The <msub>, <msup> and <msubsup> MathML elements.

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <em>HTML Subscript Element</em> (<code>&lt;sub&gt;</code>) defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.</p>
<div class="note">
  <p><strong>Usage note:</strong></p>
  <ul>
    <li>This element should be used for typographical reasons only, i.e. changing the position of the text changing its meaning like in mathematical (like <var>t<sub>2</sub></var>, though the use of a <a href="/en-US/docs/MathML" title="en-US/docs/MathML">MathML</a> formula should be considered) or chemical formulas (like <span style="font-family: Courier New;">H<sub>2</sub>O</span>).</li>
    <li>This element must not be used for styling purpose like the styling of the product name Latex. In that case <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a> style should be used: the {{ cssxref("vertical-align") }} property with the <code>sub</code> value will achieve the same effect.</li>
  </ul>
</div>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en-US/docs/HTML/Content_categories" title="en-US/docs/HTML/Content categories">Content categories</a></td>
      <td>Flow content and phrasing content</td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td>Phrasing content</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>None as both the <span title="syntax-start-tag">start and end tag</span> are mandatory.</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>Any element that can contain phrasing content</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements">HTML5, section 4.6.14</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.3" title="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.3">HTML4.01, section 9.2.3</a>)</td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/element" title="en-US/docs/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-US/docs/DOM/span" title="en-US/docs/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;p&gt;The chemical formula of water is H&lt;sub&gt;2&lt;/sub&gt;O&lt;/p&gt;
</pre>
<h4 id="Result">Result</h4>
<p>The chemical formula of water is H<sub>2</sub>O</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The {{ HTMLElement("sup") }} HTML element that produce superscript. Note that you cannot use them both at the same time and you need to use <a href="/en-US/docs/MathML" title="en-US/docs/MathML">MathML</a> to produce both a superscript and a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.</li>
  <li>The <a href="/en-US/docs/MathML/Element/msub" title="en-US/docs/MathML/Element/msub"><code>&lt;msub&gt;</code></a>, <a href="/en-US/docs/MathML/Element/msup" title="en-US/docs/MathML/Element/msup"><code>&lt;msup&gt;</code></a> and <a href="/en-US/docs/MathML/Element/msubsup" title="en-US/docs/MathML/Element/msubsup"><code>&lt;msubsup&gt;</code></a> MathML elements.</li>
</ul>
<!-- languages({"ja":"ja/docs/HTML/Element/sub"}) -->
Revert to this revision