SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The way headings are defined in "semantical" web sites is intellectual dishonesty

    Hi.

    It's very well explained so careful reading will pay off.

    HTML Code:
    <h1>Articles</h1> 
    ... h1  content (some articles)
    // end of <h1>


    Is this legal? Of course it is. OK!


    HTML Code:
    <h1>Articles</h1>
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    // end of <h1>

    Is this legal? Of course it is. OK!


    Let's all start thinking. Consider this:

    HTML Code:
    <h1>Articles</h1>
    <ul>...</ul>// Order by & sort menu.
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    <ul>...</ul>// Navigation menu (does NOT belong to last <h2>)
    // end of <h1>


    Is this legal? It isn't. In a <h1> (or any heading for that matter), if there are sub-headings (<h2>s in our example), you must continue using those sub-headings throughout the entire <h1>. So this example is unsemantical and false. Remark: If the first <ul> under the <h1> was a paragraph further clarifying the contents of the <h1> that would of course have been acceptable! (Only exception!)


    Now consider this:

    HTML Code:
    <h1>Articles</h1>
    <h2>Order Menu</h2>
    <ul>...</ul>
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    <h2>Navigation Menu</h2>
    <ul>...</ul>
    // end of <h1>



    Is this legal? It still isn't. In fact, the nature of the <h2>s throughout the <h1> is not the same so it is horribly unsemantical (An article is not of the same nature as a navigation menu or order by menu!).


    Solution: Well, ... now it's your turn to come up with the a solution.


    More examples will follow.

    Thanks for reading.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    i do not understand what you mean when you write stuff like this --

    // end of <h1>

    want to know where the h1 ends? it is right here ---> </h1>

    have you run all of those html fragments through the validator? what sort of errors/warnings did you get?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    Non-Member
    Join Date
    Apr 2006
    Location
    Scotland
    Posts
    325
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    agw - Sorry no offence but thats the biggest load of cr@p ive read since joining SP

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    This is perfectly legal and semantic:

    HTML Code:
     <h1>Articles</h1>
     	<!-- Unordered List -->
     	<ul>...</ul>
      <h2>Header</h2>
     	<p>Para...</p>
      <h2>Header</h2>
     	<p>Para...</p>
      <h2>Header</h2>
     	<p>Para...</p>
     	<!-- Unordered List -->
     	<ul>...</ul>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Enthusiast TannerC's Avatar
    Join Date
    Mar 2005
    Location
    Orem, UT
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it legal that I find this humorous?
    Visit Creative Something, my creativity blog.

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use H1 for the nav instead then.
    HTML Code:
    <h1>Articles</h1>
    <h2>Order Menu</h2>
    <ul>...</ul>
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    <!-- end of Articles section -->
    <h1>Navigation Menu</h1>
    <ul>...</ul>
    Edit:

    I don't quite understand what you mean about the Order Menu section, but if you think it's separate from the Articles section then place it outside that section...:
    HTML Code:
    <h1>Order Menu</h1>
    <ul>...</ul>
    <!-- end of Order Menu section -->
    <h1>Articles</h1>
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    <!-- end of Articles section -->
    <h1>Navigation Menu</h1>
    <ul>...</ul>
    Simon Pieters

  7. #7
    SitePoint Evangelist gollux's Avatar
    Join Date
    Feb 2005
    Location
    Oregon, USA
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh? Either it's a really up there in the ozone concept, or a load of road apples trying to be expressed. Not enough explanation presented to really mean anything.
    Released under the Fiasco Labs Digital Damnation Copywright,
    it's yours to make whatever the 7734 you want with it.

    (c) 2005 Fiasco Labs All Wrongs Reserved

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    oh wait, i think i see now what aqw was trying to say

    that last UL doesn't really "belong" to the last H2, it "belongs" to the entire page (i.e. the H1)

    unfortunately, html just isn't up to this challenge

    i cannot see any nice way of solving this semantic question, unless that new SECTION tag might do the trick

    my advice, aqw, is to forget it, let it be, and go in search of some other problems to solve
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    my advice, aqw, is to forget it, let it be, and go in search of some other problems to solve
    And lighten up on the legal/dishonesty angle. No-one's going to prison for what you perceive to be a problem.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly.

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The last H2 (Navigation Menu) should be present, but may be hidden with CSS. The extra H2 for the 'order menu' should not be necessary, IMHO.
    Birnam wood is come to Dunsinane

  12. #12
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Use H1 for the nav instead then.
    HTML Code:
    <h1>Articles</h1>
    <h2>Order Menu</h2>
    <ul>...</ul>
    <h2>Article 1</h2>
    ... h2  content (article 1)
    <h2>Article 2</h2>
    ... h2  content (article 2)
    <h2>Article 3</h2>
    ... h2  content (article 3)
    <!-- end of Articles section -->
    <h1>Navigation Menu</h1>
    <ul>...</ul>
    I always thought that only one h1 tag was best practice?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  13. #13
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blain
    I always thought that only one h1 tag was best practice?
    I've heard that too, but if the navigation menu isn't a sub section of Articles then you use the same heading level as Articles. (Perhaps there should be another top-level heading that covers both Articles and Nav.)
    Simon Pieters

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    rule #1 of holes: when you find yourself in a hole, stop digging

    all this nonsense of trying to make something "semantically correct" is only making it worse and worse

    Hx tags are semantically broken, they do not "include" the stuff that comes after them, so let's admit it and move on to some other problem
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  15. #15
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Maybe it should include the stuff...


    HTML Code:
    <h1 heading="headinghere">
    content
    that
    goes
    under
    the
    h1
    </h1>
    Hmm, that just looks horrible actually.

  16. #16
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    I've heard that too, but if the navigation menu isn't a sub section of Articles then you use the same heading level as Articles. (Perhaps there should be another top-level heading that covers both Articles and Nav.)
    I agree, I'd have the page title in an <h1> and then both Articles and Navigation in an <h2>

    <h1>'s should only appear once on a page and should be the page title so if more than one is being used then it is probably being used incorrectly.

  17. #17
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Summary of the post

    Thanks all for your answers... I voluntarily made this post a little provocative to heat up the debate. I really didn't want to offend anyone. Sorry if I did.

    Summary:

    1/ It is a time waster to try to semantically define the "area" or "section" of a heading element <hn>. Hopefully the <section> element will solve this. That's not for tomorrow though.

    2/ Situation: A <hn> heading followed by a top element (ex: explaining paragraph, etc.), middle elements (preceded by <hn-1>s), and a bottom element (nav bar, etc.).

    The top element doesn't need a <hn-1> simply because when a user is on the <hn> element, the user will see it (Supposing the <hn> heading is on 1 line or otherwise very short). The bottom element, however, needs a <hn-1> heading simply because the preceding and last article can be very long. The nav bar won't be visible when over the last article's <hn-1> in that case. Therefore, it needs an <hn-1> heading also.

    Moreover, the bottom element needs a <hn-1> heading to clearly indicate that it's not part of the preceding article. (That argument will no longer be valid when the <section> element will have become standard though).

    Thanks for reading.


    P.S.

    agw - Sorry no offence but thats the biggest load of cr@p ive read since joining SP
    That made me laugh. I must say I don't wholly disagree with what you're saying. As I said I made the post voluntarily a little provocative to heat up the debate. That said, maybe it's stupidity but don't be so sure... Trust me, genius is always on the brink of stupidity...

  18. #18
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    Hx tags are semantically broken, they do not "include" the stuff that comes after them
    That's not exactly true - the HTML specification says this:
    A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

    The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.

    Code:
    <DIV class="section" id="forest-elephants" >
    <H1>Forest elephants</H1>
    <P>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
    <DIV class="subsection" id="forest-habitat" >
    <H2>Habitat</H2>
    <P>Forest elephants do not live in trees but among them.
    ...this subsection continues...
    </DIV>
    </DIV>
    So we have a semantic element, the DIV, which provides the encapsulation of content that aqw is trying to imply with headings. The code in the OP would therefore be represented as this:
    Code:
    <h1>Articles</h1>
        <h2>Order Menu</h2>
        <ul>...</ul>
        <div id="articles">
            <h2>Article 1</h2>
                ... h2 content (article 1) 
            <h2>Article 2</h2>
                ... h2 content (article 2) 
            <h2>Article 3</h2>
                ... h2 content (article 3)
        </div> <!-- end of articles div -->
        <h2>Navigation Menu</h2>
        <ul>...</ul>
    // end of <h1>
    The heading level that the navigation menu should have is debateable.
    Last edited by Buddy Bradley; Oct 16, 2006 at 09:10. Reason: indent code

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Headings in HTML 'work' exactly the same as they do in normal typography. They provide a very brief summary of the content that follows, until the next heading at the same or higher structural level.
    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
  •