在 WHATWG HTML 规范中,关于 div 元素,我们必须努力不使用 div 元素。
它说:
强烈建议作者将 div 元素视为不得已的元素,因为当没有其他元素适合时。使用更合适的元素而不是 div 元素可以提高读者的可访问性和作者的可维护性。
那么我们应该使用什么来代替 div 呢?
使用对文档结构有意义的内容。如果您正在撰写文章,请使用该article
元素。在文档中定义段?考虑section
标签。需要标记文档的标题?使用header
元素。
<article>
<header>
<h1>Foo Title Here</h1>
</header>
<p>Article content can go here.</p>
<p>Note how meaningful this document structure is.</p>
<footer>
<!-- Links, etc. -->
</footer>
</article>
想想看,每个文档都以具有语义意义的标签开始:我们用标签包装我们的 HTML 文档<html>
。在里面,我们定义了 a<head>
和 a <body>
。在头部中,我们提供了一个<title>
,也许是几个,并用or<script>
链接了一些样式表。<link>
<style>
由于每个人都遵循这些规则,因此令人难以置信为什么他们会放弃这种一致性并倾向于使用模糊和半无意义的标签<div>
来定义文档的关键部分。
对比由模糊和无意义的标签组成的文档:
<div>
<div>
<div>Foo Title Here</div>
</div>
<div>Article content can go here.</div>
<div>Note how meaningful this document structure is.</div>
<div>
<!-- Links, etc. -->
</div>
</div>
很没有意义,对吧?始终为工作使用正确的工具。
阅读参考规范的下一行,他们提供了一些示例:
例如,一篇博客文章可以使用 article 来标记,章节使用 section 来标记,页面的导航帮助使用 nav,以及一组表单控件使用 fieldset。
因此,如果可能,您应该使用比元素具有更多语义含义的div
元素。