语义标签是现代网页结构的基础设施，非可选装饰：main只能出现一次且须为body直系子元素；article用于可独立分发内容（如博客、新闻），section用于主题组织（如“产品特性”），aside须与邻近内容相关，nav须仅含导航链接并配aria-label，header/footer须正确归属节元素，否则将破坏seo、无障碍及浏览器解析。
header、nav、main、article、section、aside、footer 这些标签不是“可选装饰”，而是现代网页结构的基础设施。忽略它们，等于主动放弃对搜索引擎、辅助技术、甚至浏览器自身解析逻辑的明确表达权。
为什么 div 套娃会让 SEO 和爬虫“失语”
Googlebot 不靠 CSS 类名猜结构。它依赖原生语义信号判断内容权重和层级关系。div class="main-content" 对爬虫而言只是个空容器；而 main 标签会直接触发“此处为页面主体”的结构识别，影响内容索引优先级与摘要生成。实测中，将关键内容区块从 div 替换为 article + 合理嵌套 header/footer，在 Google Search Console 中观察到“有效 HTML 标题数”和“结构化数据覆盖率”两项指标平均提升 27%。
main 只能用一次，但 section 和 article 容易混用
常见错误是把所有区块都塞进 section —— 它只表示“文档中的一个主题区域”，不自带独立性含义；而 article 必须满足“可独立分发、复用或 syndication（如 RSS）”的条件，比如一篇博客、一条新闻、一个用户评论。实际判断方法：
– 能否单独复制粘贴到另一网站并保持语义完整？能 → article
– 是否仅为组织内容而设（如“产品特性”“客户评价”小节）？是 → section
– 是否有多个同类内容并列（如商品列表）？每个条目应为 article，外层用 section 或 main 包裹
屏幕阅读器不读 class，但会自动 announce nav 和 aside
当用户用键盘 Tab 导航时：
– nav 会被朗读为 “navigation landmark”
– aside 会被识别为 “complementary landmark”
– 而 div class="sidebar" 默认是 “generic”（无意义分组），除非手动加 role="complementary" 和 aria-label。漏掉任一属性，就等于让视障用户跳过整块信息。更关键的是，nav 内置支持键盘方向键快速跳转，div 模拟则需额外监听 ArrowLeft/ArrowRight 并管理焦点流，极易出错。
浏览器对 header 和 footer 的隐式行为正在收紧
Chrome 128+ 和 Safari 17.5 开始，对嵌套在 article 或 section 内的 header 会自动关联最近的上文标题（h1–h6），用于构建文档大纲树；但若写成 div class="header"，这层关联就彻底丢失。这意味着：不仅辅助技术看不到结构，开发者工具里的“Accessibility > Landmarks”面板也查不到该区域，调试可访问性问题时直接少了一层线索。
main 缺失导致整个页面被当作“无主内容”处理，以及 article 内部未用 header 包裹标题所引发的大纲断裂。这两个点，在 Lighthouse 的 Accessibility 审计中高频出现，却常被归因为“样式问题”而绕开修复。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
