div 元素的一些语义优化替代方案

我们来看看 W3C 怎么描述 div 标签：

“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”

div 标签本身没有任何语义，我们应该使用更多语义化标签。

1. main

main 元素表示页面内容的主要部分，每个页面最好只使用一个。

<main>
  <h1>西炒蛋</h1>
</main>

2. section

section 元素主要用于对页面内容进行分组，表示应用的一个部分。它可以有自己的 header 和 footer，不同于 main 元素的是，它可以在页面中多次使用。

<section>
  <p>balabala...</p>
</section>

<section>
  <p>palapala...</p>
</section>

3. aside

aside 元素主要用于表示页面的一部分，通常用作侧边栏。

<aside>
  <ul>
    <li>balabala...</li>
    <li>palapala...</li>
  </ul>
</aside>

4. article

article 元素可用于页面独立存在的部分内容，比如常用语博客文章和用户评论之中。

<article>
  <header>
    <h2>文章标题</h2>
  </header>
</article>

5. blockquote

blockquote 元素表示外部来源的引用内容，比如名人名言、俗语等。

它通常伴随着 cite 元素，以将引用归因于其来源。

<blockquote>"PHP 是世界上最好的语言"</blockquote>
<cite>- 佚名</cite>

6. nav

nav 元素顾名思义，表示页面的导航部分，它的内容应该包含页面的导航链接。

<nav>
  <ul>
    <li><a href="...">首页</a></li>
    <li><a href="...">工作台</a></li>
  </ul>
</nav>

7. footer

footer 表示页面的页脚部分，一般情况下，页脚元素会包含联系方式和品牌信息，还有一些简单的介绍、社交媒体图标和链接。在国内，还会有网站的备案信息及其连接。

<footer>
  <p>品牌信息</p>
  <a href="...">链接</a>
</footer>

最后

既然我们知道了 div 元素的一些语义优化替代方案，那么我们如何知道在什么时候使用哪一个呢？在什么时候又可以使用 div 元素呢？ HTML5 Doctor 有一个非常方便的流程图来帮助回答这个问题：

---

全文完，如果觉得这篇文章对你有用，欢迎 点赞 👍、评论 ✍️、收藏 👀