How am I supposed to write superscript text?

Question

I have an app which contains plenty of figures or letters in superscript. I noticed that

 X<span style="vertical-align: super;">3</span>

and just using sup tag around the figure 3 both yield X3 in my app.

But only the sup tag yields X3 on SO. Does it mean I should stick with the latter? What are the differences, pros and cons, if any?

Edit: I have checked http://www.w3schools.com/tags/tag_sup.asp and http://www.w3.org/TR/html-markup/sup.html . I don't seem to see any differences.

Answer 1

Just use <sup>super</sup>,

As you have seen in the reference from W3C the sup tag is just a routine for the CSS:

sup {
    vertical-align: super;
    font-size: smaller;
} 

Pros: It works across all platforms and this is what it's intended for. Also provides semantic meaning to screen readers and other 'bots.

Cons: Some people just love to do it themselves in CSS.

Edit: And full credit to j08691 - for this very succinct comment:

SO filters what code you can use, and it has no bearing on what you should use in your own projects

Answer 2

The <sup> tag is fine for ordinary paragraph text, but what about text inside a "title" field; for example, ...title="Tombeau de Napoléon 1er"...?

I cannot get the 'er' ('st' in English!) in a superscript position. The <sup> tag has no effect. :-(