How to do this '²' in HTML?


I’ve spent some considerable time inserting the <sup>2</sup> tags to represent m² in a website’s HTML. The original texts given to me looked like this: m2. So I had to insert the tags myself to get the 2 up there. And also do some CSS trickery to not allow the <sup> mess up my line heights.

However, I just discovered that the ‘2’ can also be done simpler, with a copy/paste character! Like this: ²


So much simpler. And survives copy/pastes too!

So which is the right way to do it? Do I go back and edit all my content to this seemingly better solution?

Thank you²

hello dear,

alternate methods you can use is put that 2 in span tag and adjust the font size and line height to few pixels smaller than the other text in line and also put some padding from bottom.

just try this!!!

My gut feeling is that using the <sup> is the more correct way to do it. Firstly it is valid html and secondly, using a superscipted 2 character could lead to browser rendering issues, depending on how they handle such characters. But I don’t know with 100% certainty 'cause I’ve always used a <sup>

One way to find out for sure, test both ways in the browsers you support and see how the 2 is rendered.

You may mainly disregard post #2. Since in this case the 2 has actual meaning. The markup SUP is fine in that example since it’s a very simple mathematical or physics formula [URL=“”]

Ideally you could use a mathematical markup language like MathML

However, if SUP wasn’t rendered there sometimes can be ambiguity if linearised. With Unicode: a lot depends upon the language of the page.

One argument against that may be that those characters tend to be quite small and hard to read, which leads the Wikipedia manual of style to favor <sup> and <sub>.

Whether or of that is a compelling argument for you is up to you to decide.

Thank you all. I am keeping the <sup> since this is the proper way to do it, it seems. Readability above all.

You can make sup/sub not screw up your line heights by adjusting it with css.

sub {
	height:1%; /* trip haslayout, make positioning behave IE */
	line-height:1.2em; /* should equal surrounding line-height */

sub {