🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML Subscript: Using sub Tags

Reading time 1 min
Published Jun 29, 2017
Updated Sep 11, 2019

HTML Subscript: Main Tips

  • To make plain text into a subscript HTML element, you should use <sub> tags. Both starting and ending tags must be used.
  • HTML subscript has a lower baseline and occupies less height than usual text.
  • The <sub> tag does not have specific attributes, but supports global ones.

HTML Code for Subscript

By surrounding inline text with <sub> tags, you turn it into subscript in HTML:

Example
<p>This text contains <sub>subscript</sub> text.</p>

HTML subscript <sub> tag uses this default CSS styling:

Example
sub {
    vertical-align: sub;
    font-size: smaller;
}

Tip: you can learn more about these properties in CSS vertical-align and fonts tutorials.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Using Subscript in HTML

You should only use HTML subscript for typographical reasons, for example:

  • footnote numbers
  • variable subscripts
  • chemical formulas
Example
<!-- Here you can see footnote numbers: -->
<p>I do not like green eggs<sub>1</sub> and ham<sub>2</sub>!</p>
<!-- Here you can see variable subscripts: -->
<p>2<sub>3</sub>,  4<sub>5</sub>, x<sub>y</sub></p>
<!-- Here you can see chemical formulas: -->
<p>H<sub>2</sub>O, NaHCO<sub>3</sub>, C<sub>12</sub>H<sub>22</sub>O<sub>11</sub></p>

Tip: in other cases, use CSS styling properties.

Browser Support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile Browser Support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All