表示页面唯一核心内容区域，仅能出现一次，用于包裹博客列表中的文章卡片等主内容；是无数量限制的主题分组容器，如“产品特性”“客户评价”，不可替代或语义化功能标签。
<header></header> 不是“放 logo 的 div”，<nav></nav> 也不是“带 ul 的容器”——它们是浏览器和辅助技术能识别的结构信号。用错标签，SEO 和屏幕阅读器就可能读偏；用对了，不加 class 也能表达意图。
什么时候该用 <main></main> 而不是 <section></section>
<main></main> 表示页面唯一的核心内容区域，一个 HTML 文档里只能出现一次；<section></section> 是通用的内容分组，可嵌套、可复用，没有数量限制。
常见错误现象：<main></main> 套着多个 <section></section> 还算合理，但有人把侧边栏、页脚导航也塞进 <main></main>，导致语义污染。
- 使用场景：博客列表页中，文章卡片区域应包在
<main></main>里；而每篇文章本身用<article></article>包裹更准确 - 参数差异：无属性强制要求，但建议配合
aria-labelledby指向主标题（如<h1 id="page-title"></h1>）提升可访问性 - 性能影响：无直接性能开销，但错误嵌套会干扰搜索引擎对主内容的提取，间接影响索引质量
<nav></nav> 必须包含 <ul></ul> 吗？
不需要。<nav></nav> 的语义核心是“主导航链接集合”，不是“必须用列表组织”。它识别的是链接意图，不是 DOM 形式。
常见错误现象：为“符合习惯”硬套 <ul><li><a></a></li></ul>，结果在响应式菜单里用 JS 动态切换结构时，<nav></nav> 内只剩一堆 <a></a>，反而被误判为非导航内容。
- 使用场景：顶部横排导航、页脚快捷入口、面包屑（
<nav aria-label="Breadcrumb"></nav>）都适用 - 兼容性注意：旧版 IE 不支持
<nav></nav>的语义解析，但不影响渲染；真正影响的是屏幕阅读器（如 NVDA、VoiceOver）对导航区的跳转逻辑 - 实操建议：若只有 2–3 个链接且无列表语义（比如“登录｜注册｜客服”纯文本链接），直接写
<nav><a>登录</a><a>注册</a></nav>更干净
<article></article> 和 <section></section> 容易混淆的边界
<article></article> 强调“可独立分发、复用”，比如一篇博客、一条新闻、一个用户评论；<section></section> 强调“主题相关的一组内容”，比如“产品特性”“客户评价”“技术参数”这些栏目。
常见错误现象：把整个“关于我们”页面用一个 <article></article> 包住，其实它只是网站的一个子页面，不具备独立传播价值；反过来，把单条评论写成 <section></section>，又弱化了其作为独立内容单元的语义。
- 判断口诀：“能单独 RSS 订阅吗？能被第三方转载而不失上下文吗？”——能，就用
<article></article> - 嵌套规则：
<article></article>内可用<section></section>划分小节（如“背景｜方法｜结论”），但<section></section>里一般不套<article></article>，除非是“相关文章推荐”这类明确的嵌套内容流 - SEO 影响：Google 明确表示会用
<article></article>辅助识别正文主体，错误使用可能导致摘要提取失败
最常被忽略的点：语义标签不是“贴标签”，而是“建契约”——你告诉浏览器“这是什么”，它才敢按这个角色去处理。少一层 <main></main>，多一个无意义的 <div class="wrapper">，差别不在视觉，而在机器怎么读你。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
