HTML5 NAV vs. HEADER ordering_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-11 04:22 出处：网络

In one of the开发者_如何学JAVA sections of my site, my NAV is above my header. <nav> <ul>

相关专题：coding-style

In one of the开发者_如何学JAVA 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?

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.

Edit

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.

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.