HTML5 NAV 与 HEADER 排序答案

【问题标题】：HTML5 NAV vs. HEADER orderingHTML5 NAV 与 HEADER 排序
【发布时间】：2011-10-04 13:08:32
【问题描述】：

在我网站的某个部分中，我的NAV 位于我的标题上方。

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

在标题前使用NAV 是否有效或可接受？或者有没有规定NAV必须在HEADER之后？

这会以任何方式影响 SEO 或页面排名吗？

【问题讨论】：

标签： html coding-style

【解决方案1】：

我不明白为什么不。 nav 是全局导航，因此不特定于该特定页面。我认为导航将在页面内容的其余部分“之外”是有道理的。如果 nav 用于在该特定页面上导航，那么它应该位于下方。

但是，如果您在<header> 和<h1> 中有网站的名称而不是页面名称，那么我想它应该出现在标题下方。

编辑

关于您对 SEO 的修改，您希望您的关键字尽可能靠近顶部，并且您的标题应包含最佳和最相关的关键字，因此理想情况下它应该位于顶部。但是，如果您的导航与您提供的代码一样长，那么我认为切换它们的效果可以忽略不计。如果您的导航实际上包含许多用于动态下拉列表的嵌套列表，那么我当然会考虑切换它们。

【讨论】：

【解决方案2】：

你可以按照你喜欢的任何顺序来拥有它们。这些元素多次出现也是有效的：

<body>
    <header>
        Site header
    </header>
    <nav>
        Site nav
    </nav>
    <article>
        <header>
            Article header
        </header>
        <p>Article content</p>
    </article>
</body>

【讨论】：

【解决方案3】：

这很好，虽然有点奇怪——为什么不把它们放在 HTML 中的正确顺序，然后使用 CSS 来移动。当然，这就是 CSS/HTML 分离的重点。

【讨论】：