logo标签列表

HTML5 NAV与HEADER的顺序问题

htmlcoding-style
7
在我的网站的某个部分，我的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或页面排名产生影响吗？

3个回答
9
我不觉得有什么不可以。导航是全局导航，因此不特定于该特定页面。我认为导航应该“在”页面内容的外部，这是有道理的。如果导航是用于在特定页面上导航，则应该放在下面。
然而，如果您在<header>和<h1>中使用了网站的名称，而不是页面名称，那么我认为它应该出现在页眉下面。
编辑
关于您的SEO编辑，您希望您的关键字尽可能靠近顶部，您的标题应包含最佳和最相关的关键字，因此理想情况下应该放在顶部。但是，如果您的导航与您提供的代码一样长，那么交换它们的效果将可以忽略不计。如果您的导航实际上由多个嵌套列表组成以实现动态下拉目的，那么我肯定会考虑交换它们。
2

您可以按任何顺序拥有它们。同时拥有多个元素的出现也是有效的：

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

这没问题，虽然有点奇怪 - 为什么不在HTML中按正确顺序放置它们，然后使用CSS移动它们。这当然是CSS / HTML分离的全部意义。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接