Proper use of <header> and <nav> elements

Hi Everyone--
I find <header>, <nav> and <menu> to be confusing. 

It seems to me that <header> should encompass things like a page logo and, if present, heading(s) at the top of the page. Top-level navigation, on the other hand, should be identified by the <nav> element, and be separate. I have seen, however, top-level navigation included in the <header> tag, which seems incorrect.

I've also seen breadcrumbs identified by the <nav> element; however, if breadcrumbs are present, it seems like they and top-level navigation should be further differentiated by aria-label (i.e., "You are here" and "Main navigation", for example). I haven't used <menu> in the top navigation because it overrules the list semantics. 
Like so:
<header>
  <img src="images/company logo.gif" width="129" height="66" alt="Company Logo"/><h1>Screen Reader Demonstration</h1>
  <p>HTML5 and ARIA in Action</p>
</header>
<nav aria-label="Main navigation">
  <ul>
    <li><a href="Screen_Reader_Demo_D.html">Home</a></li>
    <li><a href="Examples.html" >Examples</a>
      <ul>
        <li><a href="A11ble_Form.html">Accessible Form</a></li>
        <li><a href="A11ble_Calendar.html">Accessible Calendar</a></li>
        <li><a href="A11ble_Dialog.html">Accessible Dialog</a></li>
        <li><a href="A11ble_Graph.html">Accessible Graph</a></li>
      </ul>
    </li>
    <li><a href="">Techniques</a></li>
  </ul>
</nav>
<nav aria-label="You are here"> Home Page
</nav>
Does this seem correct to you?
Thanks!
Mike

 

Received on Tuesday, 19 April 2016 19:41:32 UTC