应优先用表示可独立分发、重用的内容单元（如博客、新闻、评论），而仅用于有主题但依赖上下文的逻辑分组；错用会破坏结构可读性与无障碍访问。
语义化不是“加点新标签就完事”，而是用对标签表达真实内容关系——错用 <section></section> 包裹导航、把 <article></article> 当容器盒用，反而破坏结构可读性。
什么时候该用 <article></article> 而不是 <section></section>
<article></article> 表示能独立存在、可被单独分发或重用的内容单元，比如一篇博客、一条新闻、一个用户评论；<section></section> 是文档中逻辑上自成一节的区域，但不强调独立性。
- ✅ 正确：
<article></article>里嵌<header></header>（标题）、<footer></footer>（作者/时间），甚至再套一层<section></section>（如“背景”“分析”小节） - ❌ 错误：用
<article></article>包整个侧边栏、轮播图或页脚链接列表——它们既不独立，也不可被 RSS 抓取或单独分享 - ⚠️ 注意：
<article></article>可以嵌套（如评论区里每条评论都是<article></article>），但<section></section>嵌套过深会让大纲混乱，浏览器开发者工具的“大纲视图”会明显变扁平
<main></main> 的边界和常见误用
<main></main> 必须且只能出现一次，且不能是 <article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav> 的子元素——它代表页面唯一核心内容流。
- ✅ 正确：在
直接子级放<main></main>，里面放标题、正文、图片、评论区（<article></article>）等主体内容 - ❌ 错误：把网站全局导航、面包屑、页脚版权信息塞进
<main></main>；或在一个<article></article>内部又写一个<main></main> - ⚠️ 注意：某些 CMS 模板会默认给每个区块加
<main></main>，导致多个<main></main>标签，屏幕阅读器可能只聚焦第一个，其余被忽略
标题层级（<h1></h1>–<h6></h6>）与语义结构强绑定
标题不是样式开关，而是内容骨架的锚点。浏览器大纲、屏幕阅读器跳转、SEO 权重分配都依赖它的真实嵌套关系。
- ✅ 正确：
<article></article>内部用<h2></h2>作主标题（因<h1></h1>应留给页面整体），其子<section></section>用<h3></h3>，保持层级递进 - ❌ 错误：全篇只用
<h2></h2>或<h3></h3>，靠 CSS 改大小模拟标题；或在<aside></aside>里放<h1></h1>，干扰主内容权重 - ⚠️ 注意：跳级（如
<h2></h2>后直接<h4></h4>）会让大纲断裂，部分辅助技术无法正确生成导航树
真正难的不是记住标签名，而是每次写 HTML 前先问一句：“这段内容脱离样式后，还能被机器准确归类吗？”——这个判断过程没法自动化，得靠人盯住内容本质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
