HTML5 语义化标签
最佳实践与避坑指南

用于包裹页面或独立区块的引导性、头部介绍内容，是结构头部容器，无默认特殊样式。

• 页面级头部：放置网站 Logo、站点标题、简介、全站搜索框、用户登录入口等全站通用头部内容；
• 区块级头部：可用于 article、section 内部，作为当前区块的标题、简介头部；
• 合规特性：一个页面可以存在多个 header，1 个全局头部 + 多个文章/区块独立头部。

• 误区1：认为一个页面只能有一个 header。真相：页面全局 + 每个独立文章区块均可使用，完全合规。
• 误区2：在 header 中放置页面核心正文、底部信息。真相：仅用于引导、介绍类内容。
• 误区3：将 header 当作纯样式容器。真相：无头部引导语义的区块，直接用 div。

专门用于定义页面导航链接区域，供用户跳转页面、定位内容，搜索引擎会优先识别该区块。

• 全站主导航：网站首页、分类、关于我们、联系我们等核心全局导航；
• 重要辅助导航：页面侧边导航、面包屑导航、分页导航；
• 规范用法：内部嵌套 ul/li 列表 + a 链接，结构更规整，适配屏幕阅读器。

• 误区1：所有链接都放进 nav。真相：仅用于系统性导航，文章内普通跳转、广告、版权链接无需 nav；
• 误区2：一个页面只能有一个 nav。真相：主导航、侧边导航、分页导航可分别使用；
• 误区3：header 内部必须嵌套 nav。真相：导航可在头部、侧边、底部，无强制嵌套关系。

用于包裹完全独立、可单独复用、脱离页面也具备完整意义的内容模块，是语义独立性最强的标签。

• 核心场景：博客文章、新闻资讯、商品卡片、评论内容、帖子内容；
• 结构规范：内部可嵌套 header（标题区）、section（内容分段）、footer（作者、发布时间）；
• 核心特性：每个 article 都是独立主体，页面可包含多个 article（如列表页）。

• 误区1：用 article 划分普通页面区块。真相：非独立、不可复用的内容禁止使用；
• 误区2：section 嵌套 article。真相：正确方向是 article 包含 section，反向嵌套违背语义逻辑；
• 误区3：多个零散内容共用一个 article。真相：一篇独立内容对应一个 article。

用于对页面内容进行主题性、逻辑化分段，包裹同一主题的一组内容，不具备独立复用性。

• 页面模块分段：首页轮播区、产品介绍区、用户评价区、联系模块等主题区块；
• 文章内部分段：长文章的章节、段落分组，搭配标题使用；
• 必备规范：section 必须搭配标题（h2-h6）使用，无标题的纯区块直接用 div。

• 误区1：用 section 替代所有 div 做布局。真相：无主题逻辑的布局区块禁止用 section；
• 误区2：无标题直接使用 section。真相：失去语义意义，属于无效语义化；
• 误区3：混淆 section 与 article。真相：独立可复用 → article；主题分段 → section。

用于存放与主体内容相关，但非核心、辅助性、附属类内容，和主内容关联但相对独立。

• 页面侧边栏：热门推荐、分类目录、标签云、最新资讯；
• 内容附属信息：文章注释、拓展阅读、相关推荐、作者简介；
• 布局适配：可在页面侧边、文章内部使用，不局限于页面左右侧边栏。

• 误区1：aside 只能做页面侧边栏。真相：核心是「附属辅助」语义，而非「侧边布局」；
• 误区2：存放与主内容无关的广告、冗余信息。真相：必须和当前主体内容相关；
• 误区3：将核心业务内容放入 aside。真相：搜索引擎会降低 aside 权重，严重影响 SEO 收录。

用于定义页面或独立区块的底部收尾内容，存放补充信息、备注、版权信息等收尾内容。

• 页面级页脚：版权声明、备案号、联系方式、隐私政策、友情链接；
• 区块级页脚：article 内部的发布时间、作者、阅读量、点赞数、转载说明；
• 合规特性：和 header 一致，一个页面可存在多个 footer。

• 误区1：footer 只能用于页面最底部。真相：每个独立 article、section 均可搭配专属 footer；
• 误区2：在 footer 中放置核心正文、导航主导内容。真相：仅用于收尾补充信息；
• 误区3：多个区块共用一个 footer。真相：语义混乱，不利于爬虫识别。