HTML Structure
The advent of HTML5 ushered in new HTML tags that provide more semantic meaning to the structure of an HTML document. This is useful because it allows the adoption of a standardised document structure that may then be customised for a particular design using CSS.
I have previously published the document, HTML5 Page Structure, which describes the super-structure of a page; this page looks at sepcific areas, such as navigation, and proposes a standardised structure.
Navigation
Prior to HTML5, navigation links were often coded as anchor ('A') tags within DIV elements, or were provided more structure by being contained within lists tags, such as unordered-list ('UL') or ordered-list ('OL') along with associated list-item tags ('Li').
The w3schools website describes the new navigation ('NAV') tags as [1]:
The NAV tag defines a set of navigation links. Notice that NOT all links of a document should be inside a NAV element. The NAV element is intended only for (a) major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
Restating this, one may say that NAV elements should not be used within a web page's content, but only when a page providers auxiliary blocks of links for navigation that lie outside the content of the page.
Therefore, the NAV tag is suitable for navigation links that are contained within the header, footer, or any asides, on a web page. However, the question arises [2], when sub-navigation menus are present, whether NAV elements should/could be nested or not?...
As can be seen in the two figures presented below, nesting NAV elements requires that the a NAV be nested within the enclosing parent anchor. This may cause problems as sometimes anchor elements do not act well as block level elements.
{{body}}
{{header}}
{{nav}}
{{a}}About{{/a}}
{{a}}Products
{{nav}}
{{A}}Product 1{{/a}}
{{A}}Product 2{{/a}}
{{/nav}}
{{/a}}
{{/nav}}
{{/header}}
{{/body}}
{{body}}
{{header}}
{{nav}}
{{ul}}
{{li}}{{a}}About{{/a}}
{{li}}
{{a}}Products{{/a}}
{{ul}}
{{li}}{{a}}Product 1{{/a}}
{{li}}{{a}}Product 2{{/a}}
{{/ul}}
{{/li}}
{{/ul}}
{{/nav}}
{{/header}}
{{/body}}
For now, I am favouring the (semi-)traditional approach of using lists to organise tags within NAV elements (see second figure). While potentially more verbose, this structure does provide more semantic meaning, and is likely to be easier to style using CSS. For example, the following CSS rule can be used to style the links contained within the inner unordered-list.
BODY > HEADER > NAV > UL ~ UL > LI > A
{
/* Styles here */
}