语义化是使用HTML标签表达内容真实含义，如section表示有主题的独立区块，需含标题，用于文章章节等逻辑分节，提升可读性、SEO和可访问性，区别于仅作布局的div。
HTML 中的 section 标签不是简单的布局容器，而是具有明确语义的结构化标签。正确使用 section 能提升页面可读性、增强 SEO 效果，并帮助辅助技术（如屏幕阅读器）更好理解内容结构。
什么是语义化？
语义化是指使用 HTML 标签表达内容的真实含义，而不是仅仅为了样式或布局。比如用 article 表示独立内容，nav 表示导航，section 表示文档中的一个主题区块。
section 标签的核心语义
section 代表文档中一个有主题的独立区域，通常包含一个标题（h1–h6），并且该区域的内容在逻辑上是自成一体的。它强调“分节”而非“分区”。
符合 section 使用场景的情况包括：
立即学习“前端免费学习笔记（深入）”；
- 文章中的章节，如“引言”、“方法”、“结论”
- 产品页面的不同模块：规格、评论、售后信息
- 新闻网站的“国内新闻”、“国际新闻”板块
- 仪表盘中按功能划分的统计区域
什么时候不该用 section？
很多人误把 section 当作 div 的替代品来布局，这是错误的。以下情况应避免使用 section：
- 只是为了加样式或 JS 钩子而包裹一组元素 —— 此时应使用 div
- 没有标题的内容块 —— 缺少标题往往意味着没有明确主题
- 作为页面通用容器，如页头、页脚、侧边栏 —— 这些更适合用 header、footer、aside
正确使用示例
下面是一个合理使用 section 的文章结构：
<article>
<h1>机器学习入门指南</h1>
<section>
<h2>什么是机器学习？</h2>
<p>介绍基本概念……</p>
</section>
<section>
<h2>监督学习与非监督学习</h2>
<p>对比两种主要类型……</p>
</section>
<section>
<h2>常见算法举例</h2>
<ul>
<li>线性回归</li>
<li>决策树</li>
</ul>
</section>
</article>
每个 section 都有明确标题和主题，构成文章的逻辑分节。
与相似标签的区别
section 常被拿来和 div、article、aside 混淆，关键区别如下：
- section 是有主题的分节，必须能概括出“这一节讲什么”
- article 是可独立传播的内容，如博客文章、评论、产品卡片
- div 无语义，仅用于样式或脚本操作
- aside 是侧边内容，与主内容相关但可脱离存在，如广告、作者简介
注意：article 内部可以包含多个 section，但不要嵌套无意义的 section。
基本上就这些。掌握 section 的关键是问自己：“这个区块有没有一个明确的主题？能不能加上一个合适的标题？” 如果答案是肯定的，那它很可能适合用 section。否则，老老实实用 div 更合适。
