In HTML5 should the main navigation be inside or outside the header element

Question

In HTML5  I know that  lt nav gt  can be used either inside or outside the page s masthead   lt header gt  element  For websites having both secondary and main navigation  it seems common to include the secondary navigation as a  lt nav gt  element inside the masthead  lt header gt  element with the main navigation as a  lt nav gt  element outside the masthead  lt header gt  element   However  if the website lacks secondary navigation  it appears common to include the main navigation in a  lt nav gt  element within the masthead  lt header gt  element   If I follow these examples  my content structure will be based on the inclusion or exclusion of secondary navigation  This introduces a coupling between the content and the style that feels unnecessary and unnatural   Is there a better way so that I m not moving the main navigation from inside to outside the masthead  lt header gt  element based on the inclusion or exclusion of secondary navigation   Main and Secondary Navigation Example   lt header gt       lt nav gt           lt  -- Secondary Navigation inside  lt header gt  -- gt           lt ul gt               lt li gt  lt  li gt           lt  ul gt       lt  nav gt       lt h1 gt Website Title lt  h1 gt   lt  header gt   lt nav gt       lt  -- Main Navigation outside  lt header gt  -- gt       lt ul gt           lt li gt  lt  li gt       lt  ul gt   lt  nav gt    OnlineDegrees org is an example site that follows the above pattern     Main Only Navigation Example   lt header gt       lt h1 gt Website Title lt  h1 gt       lt nav gt           lt  -- Main Navigation inside  lt header gt  -- gt           lt ul gt               lt li gt  lt  li gt           lt  ul gt       lt  nav gt   lt  header gt    Keyzo co uk is an example site that follows the above pattern     Excerpts from Introducing HTML5      Added on 02-Feb-11  7 38 AM  Introducing HTML5 by Bruce Lawson and Remy Sharp has this to say about the subject      The header can also contain navigation  This can be very useful for site-wide navigation  especially on template-driven sites where the whole of the  lt header gt  element could come from a template file       Of course  it s not required that the  lt nav gt  be in the  lt header gt        If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling    Based on that last sentence  it appears that Bruce Lawson   author of the chapter those excerpts are from   admits that  pragmatic considerations about ease of styling  yield a coupling between the content and the style

User · Answer

To expand on what  JoshuaMaddox said  in the MDN Learning Area  under the  quot Introduction to HTML quot  section  the Document and website structure sub-section says  bold emphasis is by me    Header Usually a big strip across the top with a big heading and or logo  This is where the main common information about a website usually stays from one webpage to another  Navigation bar Links to the site s main sections  usually represented by menu buttons  links  or tabs  Like the header  this content usually remains consistent from one webpage to another     having an inconsistent navigation on your website will just lead to confused  frustrated users  Many web designers consider the navigation bar to be part of the header rather than a individual component  but that s not a requirement  in fact some also argue that having the two separate is better for accessibility  as screen readers can read the two features better if they are separate

User · Answer

It s completely up to you  You can either put them in the header or not  as long as the elements within them are internal navigation elements only  i e  don t link to external sites such as a twitter or facebook account  then it s fine   They tend to get placed in a header simply because that s where navigation often goes  but it s not set in stone   You can read more about it at HTML5 Doctor

User · Answer

IanDevlin is correct  MDN s rules say the following     The HTML Header Element    defines a page header     typically containing the logo and name of the site and possibly a horizontal menu      The word  possibly  there is key  It goes on to say that the header doesn t necessarily need to be a site header  For instance you could include a  header  on a pop-up modal or on other modular parts of the document where there is a header and it would be helpful for a user on a screen reader to know about it    It terms of the implicit use of NAV you can use it anywhere there is grouped site navigation  although it s usually omitted from the  footer  section for mini-navs   important site links    Really it comes down to personal   team choice  Decide what you and your team feel is more semantic and more important and the try to be consistent  For me  if the nav is inline with the logo and the main site s  h1  then it makes sense to put it in the  header  but if you have a different design choice then decide on a case by case basis    Most importantly check out the docs and be sure if you choose to omit or include you understand why you are making that particular decision

User · Answer

It s a little unclear whether you re asking for opinions  eg   it s common to do xxx  or an actual rule  so I m going to lean in the direction of rules   The examples you cite seem based upon the examples in the spec for the nav element  Remember that the spec keeps getting tweaked and the rules are sometimes convoluted  so I d venture many people might tend to just do what s given rather than interpret  You re showing two separate examples with different behavior  so there s only so much you can read into it  Do either of those sites also have the opposing sub nav situation  and if so how do they handle it   Most importantly  though  there s nothing in the spec saying either is the way to do it  One of the goals with HTML5 was to be very clear this for comparison  about semantics  requirements  etc  so the omission is worth noting  As far as I can see  the examples are independent of each other and equally valid within their own context of layout requirements  etc   Having the nav s source position be conditional is kind of silly another red flag   Just pick a method and go with it

User · Answer

I do not like putting the nav in the header  My reasoning is   Logic  The header contains introductory information about the document  The nav is a menu that links to other documents  To my mind this means that the content of the nav belongs to the site rather than the document  An exception would be if the NAV held forward links   Accessibility  I like to put menus at the end of the source code rather than the start  I use CSS to send it to the top of a computer screen or leave it at the end for text-speech browsers and small screens  This avoids the need for skip-links

[html] In HTML5, should the main navigation be inside or outside the <header> element?

Header

Navigation bar

Examples related to html