在HTML中使用单个列表元素是否合适？

如何解决在HTML中使用单个列表元素是否合适？

我总是在Internet和书籍导航栏中看到这样的内容：

<div class="navigation">
  <ul class="nav-item"><li><a href="#">Home</a></li></ul>
  <ul class="nav-item"><li><a href="#">Products</a></li></ul>
  <ul class="nav-item"><li><a href="#">About</a></li></ul>
</div>

但是这里的大多数编码人员告诉我，使用单个ul li元素并不专业。这是真的？您还有其他选择和专业方法吗？

解决方法

从语义上讲，这确实很糟糕，它直接影响可访问性。想象一个盲人使用屏幕阅读器访问（“阅读”）网站：他们没有获得具有可用导航选项的列表，而是获得了多个列表，每个列表只有一个选择，这不仅需要更长的时间才能通过屏幕阅读器（每个屏幕阅读器一个被宣布为具有一个列表项的无序列表），但也不是合乎逻辑的-糟糕的导航...

顺便说一句，不好的语义对SEO也很不利（即Google不喜欢它...）

,

对于创建导航，您可以使用多种方法，最好以这种格式使用：

<ul class="navigation">
 <li class="nav-item"><a href="#">Home</a></li>
 <li class="nav-item"><a href="#">Products</a></li>
 <li class="nav-item"><a href="#">About</a></li>
</ul>

或使用导航标签：

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/python/">Python</a>
</nav>

您还可以使用div和a创建导航栏

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

有关更多信息，请阅读CSS Navigation Bar，Top Navigation和HTML Tag