HTML5 语义化标签：<article>, <section>, <aside> 的正确打开方式
各位前端的小伙伴们，大家好！今天咱们聊聊 HTML5 里的三个“老朋友”：<article>, <section>, 和 <aside>。别看它们仨长得挺像，用起来却各有讲究。如果把它们用错了地方，就好像把袜子穿在手上，虽然也能用，但总觉得哪里不对劲。
想象一下，你打开一本杂志，里面是不是有各种各样的内容？有封面文章，有专栏评论，还有一些边边角角的广告。<article>, <section>, 和 <aside> 就有点像杂志里的这些内容块，它们的作用是让你的网页结构更清晰，更容易被搜索引擎理解，也方便你自己和你的同事维护代码。
咱们先来认识一下这三个“家伙”。
1. <article>：独立自主的“文章”
<article> 标签代表一个独立的、完整的、可以独立于页面其他部分而存在的“文章”。 想象一下，如果把 <article> 里的内容复制粘贴到另一张网页，或者直接放到 RSS 阅读器里，它应该仍然是有意义的，是可以被理解的。
-
举个栗子：
- 一篇博客文章
- 一篇新闻报道
- 一个论坛帖子
- 一段用户评论
- 一个独立的产品介绍
这些都适合用
<article>包裹起来。 -
再举个不适合的栗子：
- 导航菜单
- 网页页脚
- 广告横幅
- 一些零碎的小组件
这些通常不是独立的内容，不应该用
<article>。
记住一个关键点： <article> 必须是“自给自足”的。 它要有自己的标题（通常用 <h1> 到 <h6>），可能还有自己的署名、发布日期等等。 想象一下， 如果你把 <article> 的内容单独打印出来， 它应该像一篇完整的文章一样。
2. <section>：主题明确的“章节”
<section> 标签代表网页中的一个“章节”或者“区块”。 它的作用是将相关的内容组织在一起，形成一个逻辑上的整体。 <section> 通常有一个明确的主题，并且应该有一个标题来描述这个主题。
-
举个栗子：
- 网页的“关于我们”部分
- 博客文章的“评论”部分
- 产品页面的“产品特点”部分
- 联系页面的“联系方式”部分
这些都可以用
<section>包裹起来。 -
再举个不适合的栗子：
- 仅仅是为了样式而创建的容器
- 一个简单的列表
- 一个没有任何主题的段落
如果只是为了方便 CSS 样式，那应该使用
<div>。
记住一个关键点： <section> 必须有一个明确的主题。 如果你只是为了给内容分组，并没有一个清晰的主题，那可能 <div> 更合适。
3. <aside>：锦上添花的“侧边栏”
<aside> 标签代表与页面主要内容相关的“补充信息”或者“附属内容”。 它通常出现在页面的侧边栏，但也可以出现在页面的其他位置。 <aside> 里的内容通常不是页面主要内容的一部分，但它可以提供一些额外的上下文、背景信息或者相关链接。
-
举个栗子：
- 博客文章的侧边栏，包含作者简介、相关文章、广告等等
- 新闻报道的侧边栏，包含相关事件、人物背景、相关链接等等
- 产品页面的侧边栏，包含相关产品、用户评价、购买链接等等
这些都可以用
<aside>包裹起来。 -
再举个不适合的栗子：
- 导航菜单
- 网页页脚
- 页面主要内容的一部分
如果某个内容是页面必不可少的一部分，那它就不应该放在
<aside>里。
记住一个关键点： <aside> 必须是“锦上添花”的。 即使把 <aside> 里的内容移除，也不会影响对页面主要内容的理解。
三者的关系：
这三个标签之间存在着一种层级关系：
<article>可以包含多个<section>，每个<section>代表文章的一个章节。<aside>可以出现在<article>或者<section>内部，提供额外的补充信息。<section>也可以包含多个<article>，例如一个博客文章列表。
举个实际的例子：
假设我们有一个博客页面， 页面结构可以这样组织：
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<!-- 导航菜单 -->
</nav>
</header>
<main>
<article>
<header>
<h2>HTML5 语义化标签：`<article>`, `<section>`, `<aside>` 的正确打开方式</h2>
<p>发布日期：2024年1月26日</p>
</header>
<section>
<h3>`<article>`：独立自主的“文章”</h3>
<p>...</p>
</section>
<section>
<h3>`<section>`：主题明确的“章节”</h3>
<p>...</p>
</section>
<section>
<h3>`<aside>`：锦上添花的“侧边栏”</h3>
<p>...</p>
</section>
<aside>
<h4>作者简介</h4>
<p>我是你的朋友，一个热爱前端的程序员。</p>
</aside>
<footer>
<p>版权所有 © 2024</p>
</footer>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">CSS 布局技巧</a></li>
<li><a href="#">JavaScript 进阶</a></li>
</ul>
</aside>
</main>
<footer>
<!-- 页脚信息 -->
</footer>
</body>
</html>在这个例子中：
<article>包裹了整篇博客文章。<section>将文章内容分成了不同的章节。<aside>出现在文章内部，提供了作者简介；也出现在文章外部，提供了相关文章链接。
为什么要使用语义化标签？
可能有些小伙伴会觉得，用 <div> 也能实现同样的效果，为什么还要费劲使用语义化标签呢？ 原因很简单，语义化标签有很多好处：
- 提高可访问性： 屏幕阅读器可以更好地理解网页结构，方便残障人士浏览。
- 方便搜索引擎优化 (SEO)： 搜索引擎可以更好地理解网页内容，提高网页排名。
- 提高代码可维护性： 语义化标签可以让代码更清晰易懂，方便自己和同事维护。
- 提高用户体验： 语义化的代码更容易被理解，可以提高用户体验。
想象一下，你写了一段代码，过了几个月再回来看，如果代码里全是 <div>，你可能需要花很多时间才能搞清楚每个 <div> 的作用。 但如果代码里使用了语义化标签，你就可以很快地理解代码结构，节省大量时间。
总结一下：
<article>代表独立的、完整的、可以独立于页面其他部分而存在的“文章”。<section>代表网页中的一个“章节”或者“区块”，通常有一个明确的主题。<aside>代表与页面主要内容相关的“补充信息”或者“附属内容”。
使用语义化标签，可以让你的网页结构更清晰，更容易被搜索引擎理解，也方便你自己和你的同事维护代码。 所以，下次写 HTML 的时候，记得用好这三个“老朋友”哦！
希望这篇文章能帮助你更好地理解 HTML5 语义化标签 <article>, <section>, 和 <aside> 的正确应用。 记住，好的代码就像一首优美的诗，读起来赏心悦目，用起来得心应手。 让我们一起努力，写出更优雅、更易懂、更易维护的代码吧！
最后，希望你在前端的道路上越走越远， 越走越精彩！ 拜拜！