为什么使用列表导航菜单?

时间:2017-05-06 18:30:22

标签: html

我想知道为什么每个人在制作菜单时都会使用无序列表?项目可以是具有inline-block显示属性的块(对于水平菜单)。是否有任何理由对菜单使用ulli标记?

3 个答案:

答案 0 :(得分:3)

如果您考虑一下,菜单本质上是一个链接列表。所以在某种程度上这样做是有意义的。使用结构化和语义标记(例如olul)的另一个好处是,屏幕阅读器比使用div等通用标记更能理解它或span,它只定义页面的一部分,但不包含其含义。

但是对于html5,您可能希望这样做:

<nav>
  <a>Home</a>
  <a>Page 1</a>
  <a>Page 2</a>
  <a>Page 3</a>
</nav>

修改:我在css-tricks.com找到了以下内容:

  

&#34;反对&#34;列表中的导航

     
      
  • 至少有一位屏幕阅读器用户更喜欢没有列表的导航,   这是原始文章的起源。
  •   
  • 更简单的标记。导航&gt; a&gt;比导航更容易/更少&gt; ul&gt; li>一个。
  •   
  • Div和span可以同样好,尤其是ARIA角色
  •   
           

&#34;对于&#34;列表中的导航

     
      
  • 宣布列表中的项目数量可能会有所帮助
  •   
  • 非CSS浏览器中的结构(Lynx屏幕截图)
  •   
  • 长期以来没有被证明是一个大问题的模式
  •   
  • 列表是&#34; hook&#34;对于屏幕阅读器,(例如按L表示列表)并显示层次井
  •   
  • 安全:列表中没有任何内容,但列表项目,导航
  • 则不然   
           

绘制

     

      
  • 额外标记可以有助于样式化。我称这是一场平局,因为它是真实的但是达到了。我可以把每个div都包起来   另一个div中的页面,有一天可能对样式有帮助。
  •   
  • 你无论如何都不能使用role = navigation(&#34;允许的角色值是   目录,列表框,菜单,菜单栏,tablist,工具栏,树和   呈现&#34;)。在任何一种情况下,我都称之为平局   应该将导航包装在一个。
  •   
  • &#34;冗长&#34;屏幕阅读器是一种选择。列表更冗长,但可以调整。
  •   
  • VoiceOver完全相同
  •   
  • 规范并不关心。
  •   

请记住,以上只是文章作者的意见。

答案 1 :(得分:0)

不,为此目的使用列表不是强制性的。 但是,当您开发一个动态网站时,菜单中的项目会不断增加和减少,这种约定使您的工作更容易管理。

所以这是一个很好的编程实践。

答案 2 :(得分:-1)

实际上有一篇关于这个确切主题的W3Schools文章。 (https://www.w3schools.com/css/css_navbar.asp

他们的推理与我认为大多数人的推理相同。菜单实际上是一个&#34;链接列表&#34;所以从抽象的角度来看,使用链接列表是有道理的。

此外,它使您(或其他人)更容易在以后查找和理解此代码。