做导航栏为什么用ul>li，而不用dd dt dl?

原创: 2016-06-07 08:42:372356浏览

回复内容：

@丁小倪的说法有点偏激了。

元素是区块内容（sectioning content），也就是会最终影响文档大纲（outline）生成的元素。它仅仅反映其内容包含导航，但并没有表达其内容的形式。导航内容可以是一个链接的列表，也可以是一段自然文本中内嵌了导航链接。

按 W3C 对

元素的描述（http://dev.w3.org/html5/spec/the-nav-element.html#the-nav-element）中给出的适用场景例子，我简化一下，用法可以是：


　
　　 href="/home">Home
　　 href="/about">About
　　 href="/links">Links

其实导航用ul>li本身就是个错误，根本不是列表项目，就是个链接而已。国内已经用泛滥了，好多新人也被误导，不要想那么复杂。
html5的

才是导航标签语义化上真正的实现，nav>a足矣。比较赞同 @顾轶灵的说法。dl dt dd 是名值对，适用场景如：课程表、日程表等有值的列表。而导航本身就是一个包含多个链接的无序列表，是符合ul>li语义的。html5中

标签对于导航列表的语义化更准确，详见 @一丝html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？从语义化的角度考虑，dl(Definition Lists) 标签中的 dt 和 dd 是要成对出现的。Dt 是 Definition Term 即定义，dd 是 Definition Description 即解释，所以语义上并不符合「导航」。另外从页面结构考虑，成对出现的形式显然也不符合导航的常见形式。先发个link
语义化你的HTML标签和属性
http://bbs.blueidea.com/thread-2658231-1-1.html

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

所以不适合做列表。另外用dl dt dd的话结构怎么办。把dl当dd一样用？如果无需考虑代码的可维护性我觉得简单的导航就用p>a就合适了.
如果用html5简单的就直接nav>a了导航栏里面的element都是无序的list item时应该用ul>li, 如果需要解释可以用dl>dt>dd(谁的导航栏又需要有解释呢？又不是生词表)。
同意大家说的直接nav>a。 ul li 就是无序列表，导航本身是可以用无序列表来表现的。dl dt dd，这种定义列表的方式，用在这里对于语义化标签不是很恰当。

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Web 前端与算法的结合点在哪里？下一条：哪个开源的移动 HTML5 框架更好一点？此问题提出于2011年

【24期】《PHP小白到大牛》线上班，开始报名了！

查看更多