html语义化结构是搜索引擎和辅助技术识别页面主次的硬性信号；main必须唯一且不嵌套于article或section中，因其是页面级主体锚点；article用于可独立分发的内容，section仅作主题分组；nav专指站点主干导航，aside仅承载强关联补充信息；time标签须含iso格式datetime属性以保障时效性加权。
HTML模板的语义化结构不是“让代码看起来更专业”的装饰，而是搜索引擎和辅助技术识别页面主次、决定索引优先级的硬性信号。用错标签，main 里塞广告、aside 包裹主导航、多个 header 没嵌套逻辑——这些都会稀释主体权重，直接拖低关键词排名。
为什么 main 必须唯一且不嵌套在 article 或 section 里？
main 是页面内容可信度的锚点：浏览器、屏幕阅读器、Google 的核心算法都依赖它定位“用户真正想看的部分”。一旦出现两个 main，或把它放在 article 内部，就会触发语义冲突。
- 搜索引擎可能忽略第二个
main，或降权整个区块 - 辅助技术会跳过嵌套在
article中的main，误判为冗余结构 -
main本意是“页面级主体”，而article是“可独立分发的内容单元”，二者层级互斥
正确写法：<main><h1>产品首页</h1>
<p>这是核心介绍…</p></main>，不要加 class，也不包裹导航栏或页脚链接。
article 和 section 到底怎么分？别靠“视觉是否像卡片”判断
区分依据不是样式，而是内容能否被独立引用、分发或 RSS 抓取。article 必须自带完整上下文；section 只是主题分组，没标题就失去语义。
-
article：博客正文、新闻稿、用户评论（含作者、时间、正文，能单独出现在聚合页） -
section： FAQ 列表、功能模块介绍、客户案例轮播区（必须配h2或更高阶标题） - 常见错误：把轮播图容器写成
<article><div class="carousel">...</div></article>—— 轮播图不是独立内容，只是展示方式
一个页面可以有多个 article（如首页的三篇推荐文章），但每个 article 内部不能再套 main。
nav 和 aside 混用，会让 SEO 认为你在隐藏关键路径
nav 是给爬虫指路的“主干道标识”，aside 是“路边补充说明”。把主导航放进 aside，等于告诉 Google：“这部分不重要，别深挖”。实际项目中，这类错误常出现在响应式菜单折叠后、或 CMS 自动生成侧边栏时。
-
nav应只包含站点级导航（首页、关于、联系）、频道入口（产品、文档、博客） -
aside适合放相关文章推荐、术语解释、作者简介、广告位——且必须与当前article或section主题强关联 - 如果侧边栏同时含“热门标签”和“联系我们”，应拆成两个
aside，或用section+h3替代
错误示例：<aside><nav><ul><li>首页</li></ul></nav></aside> —— 这会让导航链接权重大幅衰减。
最容易被忽略的是 time 标签的 datetime 属性。只写 <time>2026年5月9日</time> 不够，必须补全 ISO 格式：<time datetime="2026-05-09">2026年5月9日</time>。否则 Google 无法识别时效性，新闻类、教程类页面会丧失“新鲜度”加权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
