html5逻辑语义核心是用结构标签明确内容角色：main唯一锚定主体；article表独立内容，section表依附上下文的主题区块；header/footer/nav/aside按功能而非位置使用；语义结构提升机器理解与协作效率。

HTML5文档的逻辑语义，核心在于结构标签如何把内容组织成有层次、可理解、可机器识别的信息单元。它不是排版技巧，而是用标签明确表达“这段内容在整体中扮演什么角色”。

main：锚定页面唯一核心意图

main 是整个文档的语义中心点，代表用户访问该页最应关注的内容主体。它必须且只能出现一次，且不能嵌套在

、

、

或

内——因为这些区域本身已有上下文边界，把 main 放进去会破坏“主次关系”的逻辑一致性。

• 正确做法：所有正文、产品详情、表单、独立文章都直接放在
  内
• 常见错误：把导航栏或侧边栏塞进
  ；或用多个

  分割不同板块
• 注意：
  可以包含多个

  或

  ，但自身不可被其他结构标签包裹

article 与 section：区分“可独立”和“需上下文”

article 表示能脱离当前页面仍具完整意义的内容单元，比如一篇博客、一条新闻、一个用户评论；section 则是为服务当前文档而划分的主题区块，必须依附于上下文才有价值。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 用 article：论坛帖子、RSS 订阅条目、独立图表说明——单独拎出来也能被理解
• 用 section：“安装步骤”“兼容性说明”“售后政策”等带标题的小节，合起来才构成完整产品页
• 关键提示：每个
  应至少含一个

  –

  标题，否则它和

  在语义上无差别

  header、footer、nav、aside：按职责而非位置使用

  这些标签不是“顶部就用 header，底部就用 footer”，而是看内容是否真正承担对应功能。

  • header 和 footer 可多层复用：页面级
    放 logo 和主导航；单个

    内的

    放标题、作者、时间
  • nav 仅用于跳转型链接组：主导航、站点地图、步骤流程条；文章末尾的“上一篇/下一篇”不强制用
    ，

    或

    更自然

    aside 装非必需补充信息：侧边注释、术语解释、相关推荐——它不属于主内容流，也不影响主线理解

    语义结构直接影响机器理解和协作效率

    搜索引擎靠这些标签判断页面重点；屏幕阅读器按

    →

    →

    的层级朗读；团队成员无需猜 class 名就能读懂代码意图。

    • 避免全用
      套 class：机器无法识别“这是导航”还是“这是广告位”
    • 不等于视觉样式：即使 CSS 把
      显示在右侧，只要语义是导航，就该用
    • 验证方式：用浏览器开发者工具查看 DOM 结构，确认嵌套是否符合语义层级（如
      是否为 直接子元素）