使用 <nav-ul-li> 导航与使用 <div> 导航

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

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

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

<div> 解决方案是否会对网站造成任何问题？
或者什么可能是使用 <nav-ul-li> 解决方案的原因？

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

你也可以在这里找到我的代码：https://jsfiddle.net/uss8uxur/14/

Answer 1

我在这里放了一个更长的答案，其中包括我上面提到的评论。想想辅助功能和屏幕 reader 的东西。如果您需要将微数据合并到您的页面中，也可以看看微数据。使用 nav 是正确的方法，因为每个浏览器或 html reader 已经学会理解 nav 意味着导航。 div 现在只是页面上的一个多用途阻塞元素。使用它不会给最终用户带来任何麻烦。

此外，正如您在上面提到的，您可以有效且非常轻松地在 nav 标记内使用 div 进行导航。如果手头的要求不希望您迎合辅助技术，那么一定要这样做。正如上面@Alohci 提供的文章中提到的那样 "You can leave that to experts" 在这种情况下。

总的来说，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 从理论变得更实用。它想要理解其中所写的内容以呈现内容。

并非所有屏幕-readers，搜索引擎可能会使用 HTML5 的正确结构，但迟早他们会这样做。搜索引擎算法不断变化和发展，随着旧 HTML 页面在网络上的数量越来越少，他们可以做的一件事就是要求严格遵守 HTML5 SEO 排名结构.目前，我们只能对此进行推测。

我的建议是，您应该将 nav 与 ul-li、ol-li 之类的东西一起用于导航，并使用 css 样式（库，可能是 bootstrap）来制作它们以某种方式看，但开始使用具有正确语义的 HTML5 。任何重新开始的人都需要一些时间才能掌握 HTML5.

中提供的许多内容

要（或多或少）查看 individual 标签的确切用途，您可以转到下面的 link 并检查第 4 点中的内容，[=38= 的元素]

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

Answer 2

除了阿米特的回答。根据 W3 about nav: "The tag defines a set of navigation links", and W3 about div: "The tag defines a division or a section in an HTML document". Element nav is a semantic element of HTML5. This element is specifically designed to include thematically related content. The element div has no value about the content contained. More details about these tags are provided by Mozilla's documentation 的文档：“HTML 元素表示页面的一部分，其目的是提供导航链接，无论是在当前文档或其他文档。导航部分的常见示例是菜单、目录和索引”和“HTML 元素是流内容的通用容器，本身并不代表任何东西”。使用语义元素，您可以对网页的源代码进行分段和/或片段化。搜索引擎和浏览器使您更容易理解网页的结构。语义标签是机器可读的，有助于机器学习。

使用 <nav-ul-li> 导航与使用 <div> 导航

Navigation with <nav-ul-li> vs. navigation with <div>

html

css

seo