Table of Contents

Introduction to Subscript and Superscript Text in HTML

Subscript and superscript text in HTML are used to display characters slightly below or above the normal line of text. This is commonly used in mathematical formulas, chemical equations, and footnotes. HTML provides specific tags and CSS methods to achieve these effects.

Using the <sub> Tag

The <sub> tag is used to create subscript text. It displays the enclosed text slightly below the normal line and usually in a smaller font size.

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

Try it:

Using the <sup> Tag

The <sup> tag is used to create superscript text. It displays the enclosed text slightly above the normal line and usually in a smaller font size.

<p>The area of a circle is πr<sup>2</sup>.</p>

Try it:

Creating Subscript and Superscript with CSS

You can also use CSS to create subscript and superscript effects using the vertical-align property.

<p>E = mc<span style="vertical-align: super; font-size: smaller;">2</span></p>

Try it:

Using Inline Styles

While generally not recommended for larger projects, you can use inline styles to create subscript and superscript effects.

<p>The first element of the periodic table is H<span style="vertical-align: sub; font-size: smaller;">1</span>.</p>

Try it:

Semantic Usage

When using subscript and superscript, consider the semantic meaning. Use <sub> and <sup> tags for proper semantic markup.

<p>The isotope of carbon used in radiocarbon dating is <sup>14</sup>C.</p>
<p>The chemical formula for sulfuric acid is H<sub>2</sub>SO<sub>4</sub>.</p>

Accessibility Considerations for Subscript and Superscript

When using subscript and superscript, ensure that the meaning is clear from context. Screen readers may not always convey the visual positioning of the text.

Best Practices

  • Use <sub> and <sup> tags for semantic markup
  • Use CSS for purely stylistic subscript and superscript effects
  • Ensure the text is still readable when using subscript and superscript
  • Consider providing additional context for screen readers if necessary
  • Use subscript and superscript sparingly to maintain readability