我想知道为什么每个人在制作菜单时都会使用无序列表?项目可以是具有inline-block
显示属性的块(对于水平菜单)。是否有任何理由对菜单使用ul
和li
标记?
答案 0 :(得分:3)
如果您考虑一下,菜单本质上是一个链接列表。所以在某种程度上这样做是有意义的。使用结构化和语义标记(例如ol
或ul
)的另一个好处是,屏幕阅读器比使用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;所以从抽象的角度来看,使用链接列表是有道理的。
此外,它使您(或其他人)更容易在以后查找和理解此代码。