How do I make Super or Subscript letters and numbers using HTML?

Posted October 6, 2004

Like those neat little footnotes you can add when doing word processing so you can properly annotate all of your sources? Of course not. But do you want to know how to achieve it anyway using HTML? Sure you do.

This was something I assumed, wrongly, that was done with CSS. But there are actually HTML tags to achieve subscript and superscript footnote type annotations. These are the two tags;

Surround the number, or whatever else you may be using these tags for, with this markup and you have your effect. You can redefine the selector in CSS, but I didn’t have much luck. I added a font-weight:bold to the selector, but when trying to adjust the font size, when set to font-size:10px I couldn’t see the number as good as when I didn’t set a font size.

Now, when I was reading about these two tags, I read that sometimes they can cause some problems with line height and making your line spacing look larger between lines in places where there is subscript or superscript. You can easily adjust that by added a little line height for your paragraph for a certain section or a specific class, something like this;

p.lineChange{
line-height:20px;
}

.lineChange{
line-height:20px;
}