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.

See the Penn State Accessibility MathML page for more information.

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.

## 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.
{"extraction_info": {"found_math": true, "script_math_tex": 0, "script_math_asciimath": 0, "math_annotations": 0, "math_alttext": 0, "mathml": 0, "mathjax_tag": 0, "mathjax_inline_tex": 0, "mathjax_display_tex": 0, "mathjax_asciimath": 1, "img_math": 0, "codecogs_latex": 0, "wp_latex": 0, "mimetex.cgi": 0, "/images/math/codecogs": 0, "mathtex.cgi": 0, "katex": 0, "math-container": 0, "wp-katex-eq": 0, "align": 0, "equation": 0, "x-ck12": 0, "texerror": 0, "math_score": 0.36672449111938477, "perplexity": 4269.402689829059}, "config": {"markdown_headings": true, "markdown_code": true, "boilerplate_config": {"ratio_threshold": 0.3, "absolute_threshold": 10, "end_threshold": 15, "enable": true}, "remove_buttons": true, "remove_image_figures": true, "remove_link_clusters": true, "table_config": {"min_rows": 2, "min_cols": 3, "format": "plain"}, "remove_chinese": true, "remove_edit_buttons": true, "extract_latex": true}, "warc_path": "s3://commoncrawl/crawl-data/CC-MAIN-2017-17/segments/1492917122726.55/warc/CC-MAIN-20170423031202-00069-ip-10-145-167-34.ec2.internal.warc.gz"}