Reference like in books

That's called a superscript.

You may use the HTML tags, or you may use the CSS vertical-align property. Examples of both:

I recommend using the CSS method.

Actually, wouldn't this be a case where using HTML makes more sense? An alternative device would come across that and treat it as a regular number at the end of the word, which it may not know how to handle. Since the footnote is structurally different from the rest of the text perhaps it should be treated that way. Although, I really don't know what a screenreader would do with this. And sup is just an aesthetic descriptor, not a semantic one...

Yes, I agree that the footnote marker is semantically separate from the sentence itself. I see the same problems too but I think CSS offers a little sensibility...

is semantically meaningless because it doesn't mean precisely "footnote"; it could be used for mathematical or chemical symbol notation and trademark/registered/copyright symbols, among other things. Something like would make sense. In the absence of such a tag, it seems reasonable to me to use CSS, perhaps until such time as XHTML includes a semantically sensible tag, or XML becomes an option.

I didn't think screen readers were advanced enough to care about such detailed semantics. If 2 was encountered by a SR, would it interpret that as "footnote number two" or as "mathematical power two"? I don't know either. CSS does allow more options regarding aural style, so there is an advantage there.

As for other devices, the problem can get a little tricky. If one were to use CSS, it would seem prudent to use the :before and :after psuedo-classes to put, say, brackets around the notations. If the client can parse that bit of CSS, the result could simply look like this [2], which is an acceptable presentation given the circumstances.

If the client doesn't understand the psuedo-classes or content property, then one would have to manually pad the notation with brackets, in which case possibility for styling them without brackets is removed. But this latter might be the better option because the raw text would still make sense, regardless of styling, possibly eliminating the need for a semantic markup tag in the first place...

Btw, I might improve the example code I gave by changing the name of the class to "footnote" rather that "sup". As it stands, it does defeat the purpose of using CSS in the first place.

Yes, can also be used in "everyday talk" in informal situations. For example:

"Hey Bro! ?"