应使用<main>标签唯一包裹页面主体，内部按语义用<section>（主题分组）或<article>（独立内容单元）组织，避免无语义<div>；<main>是语义锚点，不可嵌套，需排除导航/页脚等重复模块。

页面主体用 main 标签唯一包裹，内部按内容逻辑用 section 或 article 组织，避免套用无语义的 <div id="content"> —— 这是提升可读性的最直接做法。

用 main 锁定唯一核心区域

不是样式容器，而是语义锚点：它告诉浏览器、搜索引擎和屏幕阅读器“这里才是用户真正该看的内容”。

• 每个页面只能有一个
  ，且不能嵌套在

  、

  、

  、

  或另一个

  里
• 它应排除全局导航、页脚、侧边栏等重复性模块，只容纳不可替代的主体信息（如文章正文、产品列表、表单主区块）
• 错误示例：<div class="main-content"> 无法被辅助技术识别；正确写法就是直接用 <main>

主体内部按意图选 section 或 article

不要把所有区块都塞进

。关键看内容是否具备独立主题或可复用性：

Wechat HTML Publisher

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

下载

• 用于有明确主题的分组，比如“配置参数”“用户评价”“常见问题”，每个

  应配有

  –

  标题

• 用于能脱离当前页面独立存在、分发或复用的内容单元，例如博客正文、新闻条目、评论卡片
• 首页上的“最新动态”列表，每条新闻用
  包裹；而“关于我们”页中“团队介绍”“发展历程”两个模块，更适合用

  划分

搭配 header 和 footer 做局部语义收束

内部的子模块也可自带结构，增强层级可读性：

立即学习“前端免费学习笔记（深入）”；

• 一个
  可以有自己的

  （如模块标题+副标题）和

  （如更新时间、编辑按钮）
• 这种嵌套不破坏语义，反而让 DOM 更贴近人类阅读逻辑：比如“用户评价”
  的

  放

  用户怎么说

  ，比纯靠 class 名称更直观
• 注意：
  在

  内不是页眉，而是该区块的头部信息，不必强求放 logo 或导航

少用 div，但别怕用 div

没被淘汰，只是不该承担语义职责：

• 当某块内容确实没有更贴切的语义标签（比如仅用于 Flex/Grid 布局对齐的包裹层），用
  完全合理
• 反例：给“文章标题栏”写 <div class="article-header">，其实应直接用
  +

• 团队协作中统一规范比“绝对不用 div”更重要——关键是每次写标签前问一句：“它有没有明确语义？有没有更合适的标签？”