Re: Proper use of <header> and <nav> elements

Hi Mike,

Here is an example of a nav element nested within a header element that may
be useful

https://www.w3.org/TR/html5/sections.html#the-header-element
On Apr 19, 2016 12:43 PM, "Mike Elledge" <melledge@yahoo.com> wrote:

> 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
>
>
>