html5结构设计的核心是精准使用语义标签与逻辑模块化。语义标签如须严格对应内容角色；模块化应以语义为骨架，配合bem命名与构建工具实现复用；避坑需杜绝滥用、层级错乱与标签误配。

HTML5结构设计的核心在于用对标签，而不是堆砌标签。语义标签不是装饰，而是内容的“身份证”；模块化也不是拆分代码，而是按逻辑组织信息流。

语义标签：选对标签，等于说清内容身份

每个语义标签都对应一类明确的内容角色，用错就等于给搜索引擎和屏幕阅读器发错信号：

• 不只是页面顶部——它可以出现在页面级、
  内部甚至
  里，只要那里有该区块的标题、导航或引导信息
• 只包裹“主要导航链接”，比如主导航栏、侧边目录；文章末尾的“上一篇/下一篇”或页脚一堆杂项链接，通常不用
• 全局唯一，且不能嵌套在
  、
  或
  中；它只装真正不可替代的核心内容
• 强调“可独立存在”——单独拎出来（如 RSS 订阅、打印、分享）依然有意义；而
  是为分组服务，比如“产品特性”“用户评价”这类主题性区块
• 不等于“右边那块”，而是指与主内容相关但可剥离的信息，比如博客文章旁的作者简介、术语解释，甚至广告位（只要上下文合理）

模块化布局：以语义为骨架，而非样式为驱动

模块化不是把页面切成几块再贴 class，而是让每一块自带含义和边界：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用
  包裹功能区域（如“热门推荐”“客户案例”），内部用
  标明主题，结构自解释
• 卡片类组件优先用
  ，尤其当它是新闻条目、博客摘要或评论——它天然支持微数据、时间标记（）和独立链接
• 复用头部、页脚时，不靠复制粘贴，而是用构建工具导入或 预定义，确保每次插入的都是语义完整的
• BEM 命名（如 .card__title、.article--featured）配合语义标签，既保留结构清晰度，又避免 class 泛滥干扰语义判断

避坑要点：常见误用与修正路径

很多“语义化失败”源于标签和内容本质脱节：

• 把所有容器都写成
  —— 直接换成

  ，删掉无意义 class
• 在
  里塞主导航或登录框 —— 这些属于交互功能，应归入
  或
  ，页脚只放版权、备案号、联系方式等归属信息
• 多个
  并存 —— 页面级只有一个
  ；
  或
  内部可用
  起始，保持层级连续
• 用
  替代
  写博客列表 —— 每篇博文是独立内容单元，必须用
  ，外层用
  或
  统一包裹

验证与落地：三步确认结构是否真正有效

写完别急着测样式，先问自己三个问题：

• 关掉 CSS 后，仅靠标签和文字层级，能否快速识别导航在哪、正文在哪、补充信息在哪？
• 用键盘 Tab 浏览，能否自然跳转到
  、
  、
  ？辅助技术是否能正确播报各区块角色？
• 查看页面源码，有没有连续出现 3 个以上无 class 的
  ？如果有，大概率该换语义标签了