HTML Superscript and Subscript

October 5, 2023
Justin Lumiere

html superscript

If you want to display two as an exponent, HTML provides a special formatting property called the sup> tag that allows this.

This HTML element can also be customized using CSS and is fully compatible with all major desktop and mobile browsers.


The sup> HTML tag is used to define superscript text within an HTML document. Text within a sup> tag appears half a character above normal line text and rendered with smaller font. Additionally, it's used to conform with typographical standards or conventions and should not be considered decorative text for aesthetic reasons alone.

HTML provides the tools to emulate superscript and subscript style text, using tags like sup> and sub> with CSS styling applied for final touchup. If superscript and subscript text serve only aesthetic purposes without communicating any meaning to readers, they should instead be rendered using CSS styles rather than tags.

Ordinal indicators, such as 1st, 2nd, 3rd etc. can be rendered using CSS so they resemble SupermanTM instead of simply being rendered as plain numbers. Also numerical expressions can be expressed using superscripts by adding an asterisk ('*') after each number to indicate it as an exponent.

HTML code is a series of bits of information used to structure web pages. Text not contained between pointy brackets is considered comment text and won't appear on your webpage; while elements inside these brackets can add formatting or structure to content on web pages.


HTML provides some global attributes that all elements can support to control their overall behavior without altering its display or appearance. These attributes include:

The sup> HTML Tag is used to specify superscript text. This appears half a character above the normal line and usually rendered using smaller font than its surrounding content, often used for footnotes or mathematical formulas. Furthermore, trademark symbols such as (TM) and (R) can also be defined with this Tag.

The sup> tag supports several global attributes that can be customized using CSS. You can change their values using vertical-align attributes; for example, use vertical-align to change where text should be displayed.

Text Direction can either be left-to-right, right-to-left, or horizontal; other attributes include text-direction.

Event Handler: Defines a script which will be invoked whenever an event of a specified type occurs, with execution taking place within the element whose attributes and Text node children are affected by this event.

Href: Indicates the URL for an HTML document or resource, as specified by its html> Tag. When specifying its value it should be encoded using this method.

The sup> tag is an inline element used to format text that automatically has its baseline raised and font size reduced compared to surrounding text. It can be used for exponents, superior lettering and ordinal numbers.


Superscripted text on web pages is created with sup> tags, which appears half a character above regular lines and has a smaller font size than other text on a page. It can be used to express exponential expressions or as footnotes on websites.

Superscripts can be easily modified with Cascading Style Sheets (CSS). Unlike subscripts, which use two tags with starting and closing tags paired together, superscripts only need starting and closing tags; any text placed within these two tags will appear as superscript text.

The sup> tag can also be used to display ordinal numbers, language-specific text and numerals using font-variant-position CSS property. This property determines which glyphs will be utilized in superscript and subscript positions if one character in either position doesn't have one; otherwise all characters in that run will be rendered using synthesized glyphs instead.

HTML tags often follow the container model, in which their contents are contained within their start and end tags. For instance, the sup> tag holds "SUP>Two/SUP>" within its beginning and ending tags to render as superscript text.


HTML superscript and subscript tags can be useful tools for displaying mathematical formulae or scientific notation online. When used together, the sup> tag moves text slightly upward while sub> moves it downward - it is essential to understand their functions before using them on your website.

sup> -- This tag defines inline text to be rendered as superscript for typographical reasons only, usually rendered with raised baseline and smaller text size. Only global attributes may be applied to this element.

As a rule, HTML superscript and subscript should only be employed sparingly; too much can divert attention away from the main content of a page. If necessary, consider placing these features either in your footer section of page, or as footnotes to prevent readers becoming confused by different formatting.

To create the desired effect in a line of text, type an opening sup or sub tag before it, followed by typing characters or symbols you want offset in smaller font than the remainder of text and ending your sup or sub tag with an ending tag like sup>/sub>; this will create the effect you seek. Alternatively, add background colors that correspond with one of Windows VGA displays as per Hexadecimal Notation or one of 16 predetermined colors supported.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram