10+ HTML <sup> and <sub> Examples
Don’t use CSS to imitate superscripts/subscripts - use the semantic <sup> and <sub> tags for correct content structure. This collection shows how to ensure perfect vertical alignment and font sizing for these elements, which are often poorly rendered by default browsers. Learn how fine-tuning the vertical-align and font-size properties provides a professional and accessible (A11y) look for formulas and footnotes.
Examples
Animated <sup> & <sub>
A creative demonstration of a micro-interaction where semantic tags are used to create a fun, animated action indicator within the text. Technically, this is a clean CSS solution for generating a complex, repeating animation on individual characters without using JavaScript.
See the Pen Animated <sup> & <sub>.
HTML Sub and Sup
A functional inline editor is demonstrated where <sup> and <sub> tags are applied to text via a simple JavaScript toggle, ensuring that content semantics are maintained. The demo emphasizes the utility of this method for quickly integrating basic text formatting features.
See the Pen HTML Sub and Sup.
<sup> & <sub>: Math Sums & Products
Styling based on the elegant Roboto Slab font ensures a clean look for formulas, while CSS transition combined with :hover adds a nice micro-interaction (color change on hover) to the sum symbols. This is a useful template for web applications requiring precise mathematical rendering with minimal library dependence.
See the Pen <sup> & <sub>: Math Sums & Products.
