Question

1。版本（<nav-ul-li>）：

HTML：

<nav>
  <ul>
    <li>1.1 Menu</li>
    <li>1.2 Menu</li>
    <li>1.3 Menu</li>
    <li>1.4 Menu</li>
  </ul>
</nav>

CSS：

ul {
 padding: 0;
}

li { 
 display: inline;
 width: 24%;
 float: left;
    border-style: solid;
    border-width: 1px;
    background-color: red;
}

的 2。版本（<div>）：

HTML：

<div class="navigation">
     <div class="menu">1.1 Menu</div>
     <div class="menu">1.2 Menu</div>
     <div class="menu">1.3 Menu</div>
     <div class="menu">1.4 Menu</div>
</div>

CSS：

.navigation {
 width: 100%;
 float: left;
 margin-top: 5%;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.menu {
 float: left;
 width: 24%;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

我对网站导航有一般性问题。我以两种不同的方式为网站创建了相同的导航。在 1。版本我使用了HTML标记<nav-ul-li>和 2。版本我只使用了HTML标记<div>。使用两个版本，我得到一个有效的导航。

由于我是网络开发的新手，我不明白为什么我应该使用<nav-ul-li>标签编写导航，因为它们由于标准属性而似乎更难以处理。因此，我更愿意使用<div>解决方案。

<div>解决方案是否会导致网站出现问题？或者可能是使用<nav-ul-li>解决方案的原因是什么？

（到目前为止，我唯一可以想象的是它可能会导致谷歌排名较低，因为Google只能检查网站是否有基于<nav-ul-li>标签的正确导航）

您也可以在此处找到我的代码：https://jsfiddle.net/uss8uxur/14/

Answer 1

除了阿米特的回答。根据 W3 about nav 的文档：“标记定义了一组导航链接”和 W3 about div ： “标签定义HTML文档中的分区或部分”。元素导航是HTML5的 semantic element 。此元素专门设计为包含主题相关内容。元素div对所包含的内容没有任何价值。有关这些标记的更多详细信息由 Mozilla's documentation 提供：“ HTML元素表示页面的一部分，其目的是提供当前文档或其他内容中的导航链接导航部分的常见示例是菜单，目录和索引“和” HTML元素是流内容的通用容器，并不固有地表示任何内容“。使用语义元素，您可以对网页的源代码进行分段和/或分段。搜索引擎和浏览器使您更容易理解网页的结构。语义标签是机器可读的并且有助于机器学习。

Answer 2

我在这里提出一个较长的答案，其中包括我上面提到的评论。考虑可访问性和屏幕阅读器的东西。如果您需要在页面中加入微数据，请查看微数据。使用nav是正确的方法，因为每个浏览器或html阅读器都已学会理解导航意味着导航。 div现在只是页面上的多功能阻止元素。使用它不会给最终用户带来任何麻烦。

另外，如上所述，您可以有效且非常轻松地在导航标签内使用div进行导航。如果手头的要求不希望您满足辅助技术，当然可以这样做。正如@Alohci提供的文章上面提到过的那样，你可以把它留给专家＆＃34;在这种情况下。

总的来说，在HTML 5中，HTML在意义上变得更加语义，而草拟HTML的人选择为特定目的的东西提供特定的含义。之前，它是关于使用table，div和span等创建HTML。您可能使用了什么

<div id="menu">
<div id="main">
<div id="aside">
<div id="page">
<div id="main-content">
<div id="main-content-part-one">

现在相当于

<nav>
<main>
<aside>
<page>
<article>
<section>

所以，是的，它的学习稍微多一些，但对于那个开发它的人来说绝对不会无聊。但是，HTML的每个部分都将为辅助性事物或维护它们的人提供特定且易于识别的目的。您还可以将ARIA角色放在辅助技术的这些项目中。从HTML到HTML 5，HTML从理论变得更强实用。它想要了解那里写的内容以呈现内容。

并非所有的屏幕阅读器，搜索引擎都可能正在使用正确的HTML5结构，但迟早会出现这些结构。搜索引擎算法不断变化和发展，随着旧的HTML页面开始在网络上越来越少，他们可以做的一件事就是要求严格遵守HTML5结构的搜索引擎优化排名。现在，我们只能推测这一点。

我建议你应该使用nav-ul-li，ol-li类的东西进行导航，并使用CSS样式（库，可能是引导程序）使它们看起来某种方式但是开始使用HTML5正确的语义。任何重新开始的人都需要花一些时间才能掌握HTML5中提供的许多内容。

要查看（或多或少）单个标记的确切用途，您可以转到下面的链接并检查第4点中的内容，HTML的元素

http://w3c.github.io/html/index.html#contents

使用<div>

2 个答案: