Gurus Needed! <sub> & <sup> Semantic or No?

[Chroniclemaster1]

OK, everything I've searched several boards, including SitePoint (none of the it particularly fresh) but they all say, yup <sub> & <sup> are semantic.

... Say What?

I think its a long way from "Well, it's not deprecated yet..." to "<sup> has semantic meaning" like I've been reading. My gut says that these tags are purely presentational. Shouldn't you rather say E=mc<span class="exponent">2</span> and H<span class="molecularNumber">2</span>O.

If I'm crazy, just tell me. I'll slink back to my dev box and use <sub> and <sup> like a good little coder.

[r937]

yup, <sub> and <sup> are semantic

what makes you think that your classes (which obliterate the intended meaning, by the way, in user agents which do not support css) is preferable?

E=mc2 is ~not~ the same as E=mc&#178;

[Paul O'B]

This is really more a question for Tommy but I would say that they are semantic elements because the letters are not moved because you want the page to look nicer but because the letters are always displayed that way in those kind of formulas. It is an expected result and not something just to make the page look pretty.

If instead you were to make every other letter in a sentence pop up and down for a visual effect only then it would be an incorrect use of those elements.

That's my take on it anyway

http://dev.opera.com/articles/view/2...ntic-elements/

[Mittineague]

That they have a presentational effect on rendering is true. But IMHO they do have semantic meaning within the context of equations and formulae.

They would not however, if used solely to raise or lower the content.

BTW, the w3c also has this for an example of correct usage
<SPAN lang="fr">M^lle Dupont</SPAN>

So my take is that the proper context is "language", eg. Mathematics, Chemistry, or Communication.

[Chroniclemaster1]

E=mc2 is ~not~ the same as E=mc&#178;

This is really more a question for Tommy but I would say that they are semantic elements because the letters are not moved because you want the page to look nicer but because the letters are always displayed that way in those kind of formulas./

Tommy was one of the people I'm hoping will chime in too Paul, but Thank you Thank you Thank you for all the heavy hitters who've chimed in so quickly!


I absolutely agree that E=mc2 is ~not~ the same as E=mc&#178;. My feeling was that sup is the presentation which distinguishes them, while "exponent" is the semantic meaning for applying that presentation.

It seems like you could advocate for all the presentational elements in the same way, e.g. the <i> tag is valid because The Grapes of Wrath is not the same as The Grapes of Wrath. But <i> is deprecated becase title is the semantic meaning, while italics is merely the presentation.

[Dr John]

As a PhD chemist, I'd say <sub> is semantically correct in a chemical formula like PF₂NHPF<sub>4</<sub>. We talk about the number being a subscript in a chemical formula, and in maths equations we talk about a superscript as well. If I remember correctly, a superscript in maths is not always an exponent (raised to the power of) - think about integrals for example.

And in the details of an atom where the number of protons and the atomic mass are quoted, the two numbers are called a subscript and a superscript. eg ₁₂C¹³

So those physicists who came up with html got it correct.

[felgall]

It is semantic in those situations where raising or lowering the text changes the meaning of the content.

1^st would also be a valid semantic use where the convention is for such abbreviations to use that format. While 1st has acquired the same meaning it is only because of poeple not writing the st correctly or not being able to.

[AlexDawson]

They are both semantically correct, as has been mentioned above. You don't really need Tommy to confirm it In the OP's example (E=MC&#178 wrapping a 2 in a span means the value is two, while wrapping it in SUP equates the value to squared as is appropriate. SubScript and SuperScript are entirely valid concepts in the English language and are in no way presentational. The reason why squared and two look different by default is because &#178; and 2 are infact entirely different symbols and characters in the extended unicode alphabet (as used within science and mathmatics) and as such, do require differences in visual appearence.

[Chroniclemaster1]

They are both semantically correct, as has been mentioned above. You don't really need Tommy to confirm it

Right back atcha Alex!

OK, I guess this is partly just retraining my brain to think of sub & sup semantically.

More importantly, I was seriously concerned that we were just biding time until the W3C deprecated sub & sup just like i & b, but it sounds like I have nothing to worry about.

Thanks very much to everyone for responding so quickly and in such detail. It's just one of the reasons that when I need an authoritative opinion... I come here.

As long as there are so many scientific types around, let me ask a related question. Does anyone know how to write isotopes in HTML? If you write...

¹³₇N The 13 appears to the side of the 7. However, that's chemically incorrect. The formal notation is to have the superscript number directly over the subscript. I haven't found a way to make them one above the other right justified against the N (or whatever element).

[RetroNetro]

More importantly, I was seriously concerned that we were just biding time until the W3C deprecated sub & sup just like i & b, but it sounds like I have nothing to worry about.

<i> and <b> are not deprecated:

http://reference.sitepoint.com/html/i
http://reference.sitepoint.com/html/b

[cooper.semantics]

<sub>,<sup>,<i>,<b>: In certain situations are semantic when used properly, but can as well be purely presentational if used incorrectly... It really depends on the situation.

[Mittineague]

I use the <i> tag for the botanical names in my wildflower lists. e.g.
Bluets Houstonia caerulea
Common Blue Violet Viola papilionacea
Common Dandelion Taraxacum officinale

EDIT something like this "works"

<html><head><title>isotopes</title>
<style type="text/css">
sub {
  position: relative;
  left: -0.6em;
 }
span {
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: -0.2em;
 }
</style>
</head><body>
<p><sup>13</sup><sub>6</sub><span>C</span></p>
<body></html>

but I think something like MathML's msubsup tag would be better

[dresden_phoenix]

It would seem to me that ALL HTML is semantic, is it not? It is the use of it that determines whether its not "functionally" semantic, that is whether it's used to deliver meaning or merely for aesthetic purposes. Lovely webpages of the 90s used <Hx> tags to display bold or larger font rather than to imply a heading.

Subscript and supper script have their own implications. In this case I would assume them to be semantically correct as ... as r937 pointed out.

[AutisticCuckoo]

Tommy was one of the people I'm hoping will chime in too Paul, but

I would have done so earlier if you had posted in the right forum ...

The sub and sup element types definitely have a semantic purpose, so when used properly they are semantic rather than presentational. Of course, like any element type, these two can be abused for presentational purposes.

They can also be used in a semantically neutral role to adhere to certain established typographic conventions, much like b and i. For instance, footnote references are often written as superscripts.

<h2>Semantic Use</h2>
<p>The chemical formula for sulphuric acid is H<sub>2</sub>SO<sub>4</sub>.</p>
 
<h2>Unsemantic Use (probably)</h2>
<p>Our company name is Widgets<sub>2</sub>Gadgets.</p>

It would seem to me that ALL HTML is semantic, is it not?

Almost every element type in HTML has a well-defined semantic meaning, or is deliberately neutral (like div and span). There are a few that are mainly presentational, which are intended to be used to follow typographic conventions. For instance, ship names are traditionally italicised, so you could use <i>Titanic</i> in the absence of a <ship> tag.

There are also a number of deprecated element types whose purpose is completely presentational (which is why they are now deprecated). This includes <center> and <font>.

But even element types with well-defined semantics can be abused for presentational purposes. One example is when people use <table> to control the page layout, even if the content isn't tabular information. Another is the use of <blockquote> to indent text that isn't a quotation. A third is the use of <em> or <strong> to make something italic or bold.

[dresden_phoenix]

Cuckoo, mentions a good point about the semantic structure of HTML. However, semantic meaning is relative. Look at his example:

"<i>Titanic</i> in the absence of a <ship> tag"

The thing is that if you just wanted to italicize for aesthetic purposes, <i> or <span class="ital"> would work equally well (even from a semantics point of view, as neither tag carries a semantic meaning. So, as no semantic meaning is INTENDED, the usuage of either tag seems correct. One can also change the look of the tags using CSS and maintain visual consistency while varying the look.

Back to the "Titanic". As a grammatical rule ( not an aesthetic one) names of vehicles, magazine articles, plays, etc are italicized... this is to separate them from any other information within that particular piece of writing. So, it stands to reason that if you were writing an article about ships, or maritime disasters, etc. you would use an <em> or at least a <strong> tag (which you can style in CSS to your taste).

simple answer is: if you are using the tag to convey a meaning, you are most likely OK(if it just so happens to also achieve the visual style you want ...BONUS!!). If you are using it to MERELY achieve a "look"... that's when you should reconsider.

[logic_earth]

Back to the "Titanic". As a grammatical rule ( not an aesthetic one) names of vehicles, magazine articles, plays, etc are italicized... this is to separate them from any other information within that particular piece of writing. So, it stands to reason that if you were writing an article about ships, or maritime disasters, etc. you would use an <em> or at least a <strong> tag (which you can style in CSS to your taste).

Except you are not emphasizing the ship name, therefore, em would be the wrong element. Italicizing a ship name is a typographic convention not a means to make it stand out. The same is true for scientific names next to common names. Neither is giving any additional weight from the surrounding text making em and strong the wrong elements.

[r937]

So, it stands to reason that ...

actually, no, it doesn't

following your own line of reasoning (see the sentence just prior to this), it would stand to reason to use I, not EM

[oddz]

Interesting question. Initially I would say they are visual, but after thinking aboutiti I would agree that they are semantic. A argument could be made on both sides though. A superscript is defined as written or printed above a line. Above could have a presentational tie but it could just as easily have a semantic tie. Using sub and sup seem more semantically correct then using a span though in any instance.

Back to the "Titanic". As a grammatical rule ( not an aesthetic one) names of vehicles, magazine articles, plays, etc are italicized...

Interesting point. In this respect the presentation could be considered semantic. hmmm…

However, that would only hold true if that item was being referred to as one of those entities.

[AutisticCuckoo]

The thing is that if you just wanted to italicize for aesthetic purposes, <i> or <span class="ital"> would work equally well (even from a semantics point of view, as neither tag carries a semantic meaning.

Almost, but not quite. A <span> is completely neutral, semantically. A non-CSS browser won't render it in any special way. The <i> element is semantically weak, merely saying 'something belonging to a class of entities that would be italicised in print'. A non-CSS browser will still render an <i> element in italics, underlined or in a different colour.

So, as no semantic meaning is INTENDED, the usuage of either tag seems correct.

That's not quite correct. A semantic meaning was intended (to mark up the name of a ship) but HTML doesn't offer an element type specifically for that. So we can choose the Things-That-Render-In-Italics element type (<i>) which gives at least some hint to a user agent, or we can choose the Sequence-Of-Characters element type (<span>) that doesn't.

One can also change the look of the tags using CSS and maintain visual consistency while varying the look.

Of course, but that should in no way affect the choice of element type when marking up the content.

So, it stands to reason that if you were writing an article about ships, or maritime disasters, etc. you would use an <em> or at least a <strong> tag

No. That is if you want to emphasise something. Emphasis implies added importance and affects pronunciation. Consider a sentence like the following,

In 1912, Titanic sank on its maiden voyage.

If you were reading this out loud, would you raise your voice slightly and slow down a bit when pronouncing the word Titanic? I wouldn't. The name isn't of any special importance; it is just italicised to show that it is the name of a ship. Since ships can be named after people or ordinary objects, the italics help a reader understand that John Doe refers to a ship, rather than a person. But you don't change the pronunciation or read it out in any special way. It is not emphasised semantically; only visually.

Compare the sentence above to the following,

You want me to cook dinner tonight?

Here, the word me is semantically emphasised and would be pronounced very differently from the rest of the sentence. The me is of extra importance, because there is an implied exasperation that the speaker is expected to perform the chore in question. It has a very different meaning from this sentence,

You want me to cook dinner tonight?

That is a neutral question; an offer. It is read out in a different way from the sentence with an emphasised me. But if you remove the italics from the Titanic sentence, neither the pronunciation nor the meaning changes. Thus it is not a question of semantic emphasis.