SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 65 of 65
  1. #51
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    <div class="header"> is 99% used as a presentational division.
    Whereas <div id="header"> is the semantic way of defining the page header with no presentational aspect associated with it.
    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="^$">

  2. #52
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Whereas <div id="header"> is the semantic way of defining the page header with no presentational aspect associated with it.
    You're assuming there will be only one header per page, and probably at the top of the document correct?

  3. #53
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div class="header"> is 99% used as a presentational division.
    I meant to say, <div id="header">..... Not <div class="header">

  4. #54
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    In the whatwg example, the headers were always at the top of the content they were heading, not underneath (headers who were underneath some content were not underneath the content they headed) which was what I meant with the limited placing. It had to come first, even though the information in that particular example could come last (I've seen little article-thingies where the author and date came after the body... in which cases I usually assumed the authors did not think that information headed the content).

    I could use class=header in those cases if I thought they needed that grouping (everywhere that code chunk has <header> it could well be div class=header, with the difference being <header> is supposed to have more semantic meaning than a classed div... again this is only true for any user agents who actually know the difference). Though more likely, if I thought that information needed to explicitly head the content underneath I could consider actually header (h2, etc) tags maybe.

  5. #55
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    In the whatwg example, the headers were always at the top of the content they were heading, not underneath (headers who were underneath some content were not underneath the content they headed) which was what I meant with the limited placing. It had to come first, even though the information in that particular example could come last (I've seen little article-thingies where the author and date came after the body... in which cases I usually assumed the authors did not think that information headed the content).
    From the earlier on example you were articulating, about the head(human head lol) being chopped off and placed at your feet, I was under the impression that your essential point being, was that you can only have one head, and that was at the very top most of the page, which in theory is incorrect and is a presentational usage of the naming convention 'header'.
    <div id="header">...</div>

    The example posted below won't lose it's semantic meaning, and won't have to be changed no matter of the placement in the document:
    Code HTML5:
    <article>
       <header>
        <p>Posted by: George Washington</p>
        <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
       </header>
       <p>Yeah! Especially when talking about your lobbyist friends!</p>
    </article>

    By using this syntax - <div id="header">, I can make the assumption that the intended author doesn't have the clear meaning of what 'header' is.

  6. #56
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    By using this syntax - <div id="header">, I can make the assumption that the intended author doesn't have the clear meaning of what 'header' is.
    Well <div id ="pageheader"> is longer than <div id="header"> without really conveying any extra information since the fact that it is an id rather than a class implies that it is the header for the entire page and not for any specific subsection of the page. Therefore when selecting a name for the page header just giving it an id of header is meaingful because the fact that it is an id implies theat it is for the page. Calling it pageheader therefore contains four redundant characters on the front that can be implied from the context.

    So for the specific header that applies to the entire page <div id="header"> is the most effective way of clearly defining what it is. I suppose the HTML 5 equivalent would be <header class="page"> which again is an extra four characters but which in this instance may actually convey slightly more meaning that the alternative (not sure that it is a whole four characters worth of extra meaning though).
    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="^$">

  7. #57
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Well <div id ="pageheader"> is longer than <div id="header"> without really conveying any extra information since the fact that it is an id rather than a class implies that it is the header for the entire page and not for any specific subsection of the page. Therefore when selecting a name for the page header just giving it an id of header is meaingful because the fact that it is an id implies theat it is for the page. Calling it pageheader therefore contains four redundant characters on the front that can be implied from the context.

    So for the specific header that applies to the entire page <div id="header"> is the most effective way of clearly defining what it is. I suppose the HTML 5 equivalent would be <header class="page"> which again is an extra four characters but which in this instance may actually convey slightly more meaning that the alternative (not sure that it is a whole four characters worth of extra meaning though).
    I would say 1% of authors use <div id="header"> as you've explained, and the other 99% use <div id="header"> as a presentational division at the top of the document.

    Correct:
    Code HTML4Strict:
    <div id="header">
        <h1>About</h1>
        <p>....</p>
    </div>

  8. #58
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I would say 1% of authors use <div id="header"> as you've explained, and the other 99% use <div id="header"> as a presentational division at the top of the document.

    Correct:
    Code HTML4Strict:
    <div id="header">
        <h1>About</h1>
        <p>....</p>
    </div>
    I'd have thought a bigger percentage than that put their <h1> tag inside the <div id="header">

    I do agree with you that if it doesn't contain an <h1> then it is mislabelled.
    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="^$">

  9. #59
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I was under the impression that your essential point being, was that you can only have one head, and that was at the very top most of the page, which in theory is incorrect and is a presentational usage of the naming convention 'header'.
    Oh, no, I was not trying to imply that a document may only have one head (though a proper document, if all its content is headed by something, it only makes sense for one of those... there can be multiple subheaders of course). My point was more that if something "heads" content (names it, titles it, sometimes gives some accessory information) that it makes sense to call it a "header" and that the term keeping its meaning regardless of where it is placed is analogous to my head staying a "head" even if you chopped it off and put it at my feet.

    And then also that my head doesn't belong chopped off and put at my feet, so it also has a place where it belongs : ) There are some on this forum who may disagree with that last one : )

  10. #60
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Oh, no, I was not trying to imply that a document may only have one head (though a proper document, if all its content is headed by something, it only makes sense for one of those... there can be multiple subheaders of course). My point was more that if something "heads" content (names it, titles it, sometimes gives some accessory information) that it makes sense to call it a "header" and that the term keeping its meaning regardless of where it is placed is analogous to my head staying a "head" even if you chopped it off and put it at my feet.

    And then also that my head doesn't belong chopped off and put at my feet, so it also has a place where it belongs : ) There are some on this forum who may disagree with that last one : )
    Using html5, there can and probably will be more than one <header> tag used in a document, depending on the content flow.

    I agree with you for the most part, except the 'makes sense for one of those' part. I mean, the same goes with a h1, that it can be used more than once.

  11. #61
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I mean, the same goes with a h1, that it can be used more than once.
    There can be, but for the types of pages I write, I try to just have one. I've only written one schismed page and that was technically a splash page I couldn't talk them out of, with the two headers being "Individual" (or private?) and "Commercial" leading to different parts of one site.

  12. #62
    SitePoint Zealot Timbothecat's Avatar
    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post

    Yeah, but it brings confusion when it's placed elsewhere, just as the 'header' does


    Rule of thumb is, if a naming convention ties to placement, then it's presentational.


    So, does that mean that when I use id="branding" instead of id="header", I'm doing the right thing? Fluked that one if it's the case. Must have been some sort of subliminal training technique.
    Linux Clustering: All nodes lead to /home.

  13. #63
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Timbothecat View Post
    So, does that mean that when I use id="branding" instead of id="header", I'm doing the right thing? Fluked that one if it's the case. Must have been some sort of subliminal training technique.
    The answer lies with in the context of information, the intended tag/naming convention encompasses

  14. #64
    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)
    All this convention and non-semantic naming on potentially presentational attributes makes my head go fuzzy:

    Whoops I shouldn't say head, I should say thought-process-generator as it's more semantic

  15. #65
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    All this convention and non-semantic naming on potentially presentational attributes makes my head go fuzzy:

    Whoops I shouldn't say head, I should say thought-process-generator as it's more semantic
    Or you could call it what it is, your brain hehe


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
  •