HTML:菜单作为 UL 而不是 DIV？

Question

我最近为网页创建了一个菜单，其中的按钮是 DIV 元素。我一直在谷歌搜索，看到很多人创建 UL 列表，每个按钮都是一个 LI 元素。使用 UL 和 LI 而不仅仅是 DIV 有什么好处？它对 SEO 有什么好处吗？这与“语义”标记有关吗？将我的菜单重写为 UL 有什么令人信服的理由吗？

Answer 1

这是语义上更正确的方法。菜单可以看作是一个无序列表 ( ul )，每个元素都是一个列表项 ( li )。

过度使用div元素也被称为“divitis”，应尽可能避免使用。 (当然，这并不意味着 div 元素本身不好。几乎每个网页中都有 div 的合法用例。)

使用语义更合理的元素在功能上没有区别，但它会使代码更好、更易于阅读，并使您能够以更少的开销构建 CSS 定义。

比较例子

div.menu { ..... }
div.menu div.subitem { ..... }
div.menu div.level2 div.subitem { ..... }

到

ul { ..... }
ul li { ..... }
ul ul li { ..... }

div 的突出例子s 可以替换为更合适的元素:

• 如前所述，菜单:<ul><li>

• 带有标签的表格:<fieldset><label>

• 标题 <h1><h2> (只是标题，不是完整的标题区域)