使用 <nav-ul-li> 导航与使用 <div> 导航 [关闭]

【问题标题】：Navigation with <nav-ul-li> vs. navigation with <div> [closed]使用 <nav-ul-li> 导航与使用 <div> 导航 [关闭]
【发布时间】：2017-08-20 09:38:37
【问题描述】：

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> 解决方案的原因是什么？

（到目前为止，我唯一能想到的是它可能会导致谷歌排名下降，因为谷歌只能根据<nav-ul-li> 标签检查网站是否有正确的导航）

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

【问题讨论】：

• 想想可访问性和屏幕阅读器的东西。如果您需要将微数据合并到您的页面中，请查看微数据。使用 nav 是正确的方法，因为每个浏览器或 html 阅读器都已学会理解 nav 意味着导航。 div 现在只是页面上的一个多用途阻塞元素。使用它不会给最终用户带来任何麻烦。
• 从css-tricks: Navigation in Lists: To Be or Not To Be阅读这篇文章，包括后面的长评论，你会更好地理解它为什么重要。
• @Amit：如何将导航的

  更改为

  并将列表项保留为

  而不是 。见这里：jsfiddle.net/uss8uxur/17
• @Alohci：感谢您的链接。现场似乎掀起了热议。我喜欢 的解决方案，而将

  排除在外。你怎么看？
• 原则上，我认为无障碍工具创建者可以比他们现在做的更多的事情来帮助他们的用户。但是我们必须使用最先进的技术，这意味着现在使用 nav-ul-li。