HTML5 'header' and 'nav' question

HTML & CSS
1

reading through I just cant find a clear answer to these two questions:

At the top of many pages I have designed I used to use an ID= “header” for DIV that contained branding and navigation info… with HTML5 I was thinking it would translate to something like:

 <header id="PageHed">
      <div id="branding">
           <h1 id="logo">Site Name</h1>
           <p id="motto">Motto</p>
           </div>
      <nav id="main_">
           <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
           </ul>
      </nav>
 </header>

IN HTML5:
BUT Is it CORRECT to put a NAV tag within a HEADER TAG? I have read in the specs that you can put non H or HGROUP tags within a header but it refers to those other tags as “metadata”… That makes me nervous.

ALSO
Since we now have a nav tag, would we still use list for nav menus?!? What about multi-level nav menus? I mean what would be the SEMANTICALLY right thing to do in each case?

2

Basically <header> is a replacement for <div id=“header”> and <nav> is a replacement for <div id=“nav”> and the extra that you will gain from using them in place of the div tags is if browsers start offering an option to display a summary of the page where these specific structural elements will allow the summary option to work out what parts of the page are which. As far as the actual use in the web page itself is concerned they will be straight swaps for the corresponding div tags assuming that they are still a part of HTML 5 once it becomes a standard. Everything else within the tags will be unchanged and your navigation menu8 will still be best marked up as a list.

3

Sure.

Where were you reading this? Could you link to it?

Just use one <nav> and nested <ul>s.

4

Z,
this is ONE of the links where i got my info from:
http://html5doctor.com/the-hgroup-element/

I was asking about navs, because it occurred to me … that it could all be A tags wrapped in a NAV now… if the NAV tag automatically implied the list…

5

There are dozens of other ways to do navigation that don’t require a list. (eg. a tag cloud).

6

Ah. That’s a blog, not a spec. :slight_smile: http://whatwg.org/html#the-header-element](http://html5doctor.com/the-hgroup-element/) doesn’t say anything about ‘metadata’.

It doesn’t imply a list, just navigation.