SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,017
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    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;
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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/

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,458
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    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<sup>lle</sup> Dupont</SPAN>

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

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    E=mc2 is ~not~ the same as E=mc&#178;
    Quote Originally Posted by Paul O'B View Post
    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.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As a PhD chemist, I'd say <sub> is semantically correct in a chemical formula like PF<sub>2</sub>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 <sub>12</sub>C<sup>13</sup>

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

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    It is semantic in those situations where raising or lowering the text changes the meaning of the content.

    1<sup>st</sup> 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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  9. #9
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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...

    <sup>13</sup><sub>7</sub>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).
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  10. #10
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    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


  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <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.

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,458
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    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 Code:
    <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

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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.

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    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.

    Code HTML4Strict:
    <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>

    Quote Originally Posted by dresden_phoenix View Post
    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.
    Birnam wood is come to Dunsinane

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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.

  16. #16
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  17. #17
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,017
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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

    Last edited by r937; Apr 29, 2009 at 14:01. Reason: fixed typo
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  18. #18
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.

    Quote Originally Posted by dresden_phoenix
    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.

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.

    Quote Originally Posted by dresden_phoenix View Post
    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.

    Quote Originally Posted by dresden_phoenix View Post
    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.

    Quote Originally Posted by dresden_phoenix View Post
    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.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •