There are several approaches to displaying superscript and subscript text on the Web, and each have their uses depending on your needs.
MathML and Accessibility
If the superscript or subscript character is part of a mathematical equation, MathML markup is the most accessible, especially for blind users on a screen reader.
If MathML is not the right solution, there are some additional options to consider below.
HTML and CSS
For most purposes, you can use the <sup></sup> tag to create super script text and <sub></sub> to create sub-script text. See examples below:
Code: x<sup>x+1</sup>
Result: xx+1
Code: x<sub>i+1</sub>
Result: xi+1
Note: Although some Web standards professionals recommend avoiding these tags, they are part of the HTML 5 and XHTML standards.
CSS Styles and the SUP/SUB Tags
You change the CSS attributes of the <sup> and <sub> tags to improve line spacing, formatting and placement of characters. See references below:
Note: If you wish to avoid <sup> and <sub> because they are presentational, you can use sizing and vertical alignment CSS with <span> or another appropriate tag.
- CSS Superscript Spacing
- CSS Vertical Align Properties
- CSS Lineheight and Vertical Alignment
- CSS Superscript Using Relative Position
Using Unicode Values
Many common superscript and subscript characters have their own Unicode entries and entity codes. If your Web page is generated from a database or meant to be a searchable archive, the use of Unicode values may be preferable.