1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML5 Question: Can the <nav> tag be nested inside the <header> tag?

Discussion in 'Off Topic' started by Miko, Sep 21, 2010.

  1. Miko

    Miko Well-Known Member

    Just a quick questions:

    in HTML5, can the <nav> tag be nested inside the <header> tag?

    Code:
    <header>
    <nav>
    </nav>
    </header>
    
    I have found so many different opinions on different sites, just wondering if someone knows a better answer to it.

    Thank you.

    Miko
     
  2. Mikey

    Mikey Well-Known Member

    Yep, I've used it that way.

    <nav> can also be in the <footer>

    <nav> is used for any group of links which help to navigate the site.
     
  3. Miko

    Miko Well-Known Member

    Thanks Mikey, so is it the right / correct way to use it?
    I have also used it that way, but someone told me that you are not supposed too nested it inside <header> or <footer>
     
    Mikey likes this.
  4. Anthony Parsons

    Anthony Parsons Well-Known Member

    I don't see why not. I don't see anything on the spec about it not being nested, only what it is for. My understanding is, regardless where it resides, it carries the navigation as a semantic markup... nothing more, nothing less.
     
  5. Kier

    Kier XenForo Developer Staff Member

    Yes, no problem with <header><nav> in the spec.
     
  6. Anthony Parsons

    Anthony Parsons Well-Known Member

    Ok... the official answer: "The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links"

    Source: http://www.w3.org/2009/cheatsheet/#search,nav

    "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

    Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element."

    And: http://www.w3.org/TR/html5/sections.html#the-nav-element

    W3C Example

    HTML:
    <body>
     <header>
      <h1>Wake up sheeple!</h1>
      <p><a href="news.html">News</a> -
         <a href="blog.html">Blog</a> -
         <a href="forums.html">Forums</a></p>
      <p>Last Modified: <time>2009-04-01</time></p>
      <nav>
       <h1>Navigation</h1>
       <ul>
        <li><a href="articles.html">Index of all articles</a></li>
        <li><a href="today.html">Things sheeple need to wake up for today</a></li>
        <li><a href="successes.html">Sheeple we have managed to wake</a></li>
       </ul>
      </nav>
     </header>
     <div>
      <article>
       <header>
        <h1>My Day at the Beach</h1>
       </header>
       <div>
        <p>Today I went to the beach and had a lot of fun.</p>
        ...more content...
       </div>
       <footer>
        <p>Posted <time pubdate datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
       </footer>
      </article>
      ...more blog posts...
     </div>
     <footer>
      <p>Copyright © 2006 The Example Company</p>
      <p><a href="about.html">About</a> -
         <a href="policy.html">Privacy Policy</a> -
         <a href="contact.html">Contact Us</a></p>
     </footer>
    </body>
    
     
  7. Miko

    Miko Well-Known Member

    Thank you for confirming it.
    Guess I should stop listening to people i work with and just do my own thing ! :D
     
  8. Floris

    Floris Guest

    Exactly!
     
  9. Elizabeth

    Elizabeth Well-Known Member

    Miko, one think I did read so far in what I have found was that everything we've learned so far about xhtml and css is out the window! (okay not literally, but you know what I mean).

    I was JUST getting a handle on xhtml and they go throw html5 at me...so now I am on the fast track to trying to make sense of it.
     
  10. Cezz

    Cezz Well-Known Member

    Nav can be used in any other block level element, and can also be used multiple times in one page... so to have a header nav, sidenav AND footernav is all fine :D
     
  11. Anthony Parsons

    Anthony Parsons Well-Known Member

    Whilst tossing html5 into design is ok, the problem is that you have to still think backwards. So in essence, xhtml only design isn't going anywhere. Just like this sites design, whilst it has html5 tags, its not html5, because it has to contain standard xhtml in order to meet the current browsers and what is still a major market in backward browser versions.

    People confuse css3 with HTML... and because a site may use CSS3 and opt to use a few html5 tags for semantics, it doesn't make a site html5. You couldn't build a live html5 website right now, because it would fail in IE8 and still in prior FF and chrome versions being used. It would only be pure html5 for a minority of the web at this point.

    Its great to begin using it now for semantic and instructional purposes, but realistic design purposes... you still need to include xhtml web practices in the actual coding for styling... because you can't style a header or nav tag at present for the majority.
     
  12. Kier

    Kier XenForo Developer Staff Member

    I must disagree with you there, Anthony. Just because we back-up our HTML 5 tags with elements that are styleable by crappy browsers doesn't make it not HTML 5. There's nothing that distinguishes 'pure' HTML 5 from any other kind of HTML 5. We make use of HTML 5 tags to import semantic meaning to our markup, and to allow additional data attributes to be included in the code. It seems to me that HTML 5 itself doesn't really offer anything more than what we are already doing with it.
     
    Miko and Anthony Parsons like this.
  13. Anthony Parsons

    Anthony Parsons Well-Known Member

    This is true Kier... and I must agree with you that my statement was wrong.

    After I posted it I then thought about the doctype, which is what makes the overall document type... so if the html5 doctype is used, then it technically would make a site html5, true or not from a coding viewpoint, it would still make it html5.

    I accept that one... fair point.
     
    Kier likes this.
  14. James

    James Well-Known Member

    Just because some browsers don't support it, does that mean it isn't something? I'm just curious, we can adapt to use HTML5 but that doesn't mean we expect every single browser in use to adapt to it also. HTML5 (as officially named on WHATWG I believe) uses both HTML and XHTML standard. No elements are deprecated, just obsolete.

    Can you define a HTML5 website? I find XenForo makes great use of HTML5. It allows the use of custom attributes using the data- prefix, uses HTML5 elements and HTML5 semantics and this looks fine in all major browsers.
    You can style them with the use of JavaScript. Still effectively styling them :p

    EDIT: Point must've been cleared up whilst I was still posting!
     
  15. Kier

    Kier XenForo Developer Staff Member

    Disaster waiting to happen, IMHO.
     
  16. James

    James Well-Known Member

    Yeah, it's not ideal to do so but it's still possible.
     
  17. Kier

    Kier XenForo Developer Staff Member

    Possible, yes. Advisable? Not in my book.
     
    Anthony Parsons and James like this.

Share This Page