Superscripts/Subscripts as “Presentation”
Both HTML and XHTML include the SUP tag for superscripts and the SUB tag for subscripts. However, if you’ve been involved in the standards communities, you may be “warned” against using the SUP and SUB tags and told to use CSS instead.
“Now sup and sub are presentational tags and should be avoided because the presentation should be in the CSS.”
http://brunogirin.blogspot.com/2005_07_01_brunogirin_archive.html“Since SUP is inherently presentational, it should not be relied upon to express a given meaning.”
style-sheets.com
So why are SUP and SUB even listed within the XHTML standard if they are only presentational? My answer is that they are sometimes NOT presentational. That is, the position of the character is meant to convey additional information which would be lost otherwise. For many academic purposes, the use of CSS only could actually cause additional accessibility issues because a user could ignore your stylesheet.
Disabling Stylesheets
Paragraph D of Section 508 specifically states
“Documents shall be organized so they are readable without requiring an associated style sheet.”
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web
That means that if a user decides to disable your stylesheet (some low vision or color blind users do exactly this), then all CSS formatting information will be lost. If your user can parse your content without the superscript/subscript then all CSS is acceptable. An instance of this is trademark “TM” placement on a word. Your page is “prettier” if the “TM” sign is superscripted, but it’s not essential.
SupermanTM (superscript) = SupermanTM (no superscript)
If you use CSS positioning, but a user ignores your stylesheet, he or she will be able to parse the text in most cases. Although it would be even better to use the entity code ™ (as in Superman™ = Superman™)
Academic Superscripts/Subscripts
In the academic world, superscripts and subscripts are usually there to indicate additional meaning, not just for the sake of typographical aesthetics. For example as style-sheets.com points outs, in math, 2 superscript 4 means 2 to the fourth power, but “2-4” is the number 24. Now if you use CSS positioning and your user ignores your stylesheet, they may not be able to understand the content.
24 ≠ 24
Some users suggest options like “2^4” but that may not work in every case. For instance. in linguistics, gw ≠ gw. The first letter with the superscript w means rounded g; the second is a true consonant cluster. Again if you use CSS, and the user ignores your stylesheet, the reader will lose the information. Even better, you can add aural styles to SUB and SUP tags if necessary for screen reader supper.
Entity Codes
You can avoid the SUP/SUB tag, in these cases but not with CSS. What you would do is find the entity code for superscript 4 (⁴) or superscript w (ʷ) and use them instead…and hope you’ve specified the right font for everyone. The lesson is – you didn’t replace SUP and SUB with CSS but with more meaningful content (i.e. entity codes). See links below for a list
- Math Super/Subscripts
- Phonetics (organized by letter)
By the way, entity codes may be the wave of the future, but have their own problems. Not all common fonts may support the special characters (while the SUP version will almost always work) and screen readers may not understand the entity code and may spell out “unknown”. At least with the SUP/SUB tag the chances are higher that the user will hear the content of the tag.
Conclusion
If your superscripts/subscripts are adding meaning and not just there to be “pretty”, consider using the SUB/SUP tags or the more modern entity code (assuming it exists for your character)…but the most dangerous path would be CSS only.