Menu
In one of the sections of my site, my NAV is above my header.
<nav>
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Subscribe via RSS</a></li>
</ul>
</nav>
<header>
<h1>Page title</h1>
</header>
Is it valid or acceptable to use a NAV before the header? Or is there a rule that NAV needs to be after the HEADER?
Will this affect SEO or page rank in any way?
361
The <nav> tag is used inside the <header> tag . This may happen if <nav> is very small and if the content of <nav> tag is used to identify the different web content. In such cases, the <nav> is usually taken inside of the <header> tag.
The header contains introductory information about the document. The nav is a menu that links to other documents.
By using a <header> tag, our code becomes easier to read. It is much easier to identify what is inside of the <h1> 's parent tags, as opposed to a <div> tag which would provide no details as to what was inside of the tag. A <nav> is used to define a block of navigation links such as menus and tables of contents.
The nav element is a sectioning element, much like body, article, section and aside. Every section is expected, though not required, to have a heading.
I don't see why not. The nav is global navigation and therefore not specific to that particular page. I think it makes sense that the nav would be 'outside' the rest of the page content. If the nav was for navigating around that particular page then it should come below.
If, however, you had the name of the website in the <header> and <h1> rather than the name of the page then I suppose it should appear below the header.
Regarding your edit about SEO, you want your keywords to be as close to the top as possible and your title should contain the best and most relevant keywords so it should ideally go at the top. However, if your nav is as long as the code you have provided then I think the effect of switching them would be negligible. If your nav actually consists of numerous nested lists for dynamic dropdown purposes then I would certainly consider switching them around.
115
You can have them in whatever order you like. It's also valid to have multiple occurences of those elements:
<body>
<header>
Site header
</header>
<nav>
Site nav
</nav>
<article>
<header>
Article header
</header>
<p>Article content</p>
</article>
</body>
That's fine, though a little weird – why not put them the correct order in the HTML, and then use CSS to move things around. That is of course, the whole point of the CSS/HTML separation.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
