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

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
 
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.
 
Mikey said:
Yep, I've used it that way.

<nav> can also be in the <footer>
Click to expand...

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>
 
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.
 
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>
 
Thank you for confirming it.
Guess I should stop listening to people i work with and just do my own thing ! :D
 
Miko said:
Thank you for confirming it.
Guess I should stop listening to people i work with and just do my own thing ! :D
Click to expand...
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.
 
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
 
Elizabeth said:
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.
Click to expand...
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.
 
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.
 
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.
 
Anthony Parsons said:
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.
Click to expand...
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.

Anthony Parsons said:
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.
Click to expand...
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.
Anthony Parsons said:
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.
Click to expand...
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!
 
Back
Top Bottom