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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/02/2021
3176 People Used
Only 97 Left
Rating
5.0