HTML语义化层级须真实反映内容逻辑关系：有独立主题和标题的用<section>，否则用<div>；<article>用于可独立分发的内容，<section>用于依存性主题区块；标题必须严格逐级嵌套，跳级将破坏无障碍与SEO。
HTML语义化层级不是“越深越好”，而是要让每个标签真实反映内容的逻辑从属关系——<header></header>不该包裹<nav></nav>以外的正文，<section></section>不能替代<article></article>表达独立内容单元，嵌套错位会直接破坏屏幕阅读器流和SEO权重分配。
什么时候该用 <section></section> 而不是 <div>
<p>当一块内容有明确主题、能被独立标题（<code><h2></h2>–<h6></h6>）概括，且在文档大纲中构成一个逻辑节时，才用<section></section>。比如产品介绍页里“性能参数”“用户评价”“售后服务”三个模块，各自带<h3></h3>，就该分别用<section></section>；如果只是单纯分组样式或动画容器，没语义价值，就用<div>。
<p>常见错误：<code><section></section>里只放<p></p>没标题，或用<section></section>包裹导航栏——这会让大纲解析器误判为“内容节”，实际应归入<header></header>或<nav></nav>。
<article></article> 和 <section></section> 的边界怎么划
<article></article> 和 <section></section> 的边界怎么划关键看内容是否具备“可独立分发、复用、归档”的特性：
立即学习“前端免费学习笔记（深入）”；
-
<article></article>：博客正文、新闻稿、用户评论、独立卡片式商品条目——复制粘贴到别处仍成立 -
<section></section>：同一页面内按主题划分的区块，如“关于我们”页里的“团队介绍”“发展历程”“企业文化”，彼此依存、不可拆分
性能影响：过度使用<article></article>会导致浏览器生成过多文档大纲节点，拖慢无障碍API遍历；而滥用<section></section>则让大纲扁平化，失去层次信号。
标题层级断裂为什么比标签用错更危险
HTML大纲算法严格依赖<h1></h1>–<h6></h6>的嵌套顺序，跳级（如<h2></h2>后直接<h4></h4>）或降级（<h3></h3>出现在<section></section>外）会让屏幕阅读器丢失上下文，搜索引擎也可能截断内容权重传递。
实操建议：
- 每个
<section></section>或<article></article>必须以一个<h2></h2>–<h6></h6>开头（不能是<h1></h1>） - 子层级标题必须连续递进，不跳不回退
- 用浏览器开发者工具的“Accessibility > Landmarks”面板实时验证大纲结构
最容易被忽略的是：语义层级不是写完再检查的后期工作，而是在写第一行<header></header>时就要决定整个页面的信息骨架——一旦<main></main>里混进了本该在<aside></aside>里的辅助信息，后续所有嵌套都成了补救性妥协。
