必须用 <main> 而不是 <section> 或 <div> 的情况是：页面中代表用户最核心、不可替代的内容区域，且全页仅能有一个；它被搜索引擎和屏幕阅读器识别为主干内容，不可嵌套在 <article>、<aside> 或 <nav> 内，误用会导致 Lighthouse 审计失败及无障碍访问问题。
什么时候必须用 <main> 而不是 <section> 或 <div>
一个页面只能有一个 <main>，它代表对用户最核心、不可替代的内容区域。搜索引擎和屏幕阅读器会把它当作页面“主干”来识别，跳过导航、侧边栏直接聚焦到这里。
常见误用：<section> 是逻辑分组（比如“产品特性”“客户评价”），<div> 是纯布局容器——它们都不能替代 <main> 的语义权重。
- 如果你在写博客详情页，正文部分必须包在
<main>里，而不是套个<section class="article"> -
<main>不能嵌套在<article>、<aside>或<nav>内部 - 多个
<main>会导致 Lighthouse 审计失败，且被部分读屏软件忽略主体内容
<article> 和 <section> 的边界到底在哪
关键看内容是否“可独立分发、复用”。<article> 是自包含的完整单元，比如一篇博客、一条新闻、一个商品卡片；<section> 只是同一主题下的内容区块，依赖上下文存在。
错误示例：把整个首页的“关于我们”“服务介绍”“团队展示”都各自写成 <article> ——它们不是独立内容，只是页面结构的一部分。
立即学习“前端免费学习笔记（深入）”；
- 判断标准：把这段 HTML 单独保存为文件，能否脱离原页面被 RSS 抓取、被其他网站引用？能 → 用
<article>；不能 → 用<section> -
<article>可以嵌套<section>（比如文章里的小节），但反过来不行 - 不要为了“看起来更语义”强行拆分：一段带标题的说明文字，没独立意义，就用
<section>+<h2>，别硬套<article>
<aside> 不等于“侧边栏”，也不该塞广告代码
<aside> 表示与当前内容相关但非必需的补充信息，比如术语解释、作者简介、延伸阅读链接。它的语义是“关联性”，不是“位置”。
把全站通用的广告横幅、登录入口、热门标签云扔进 <aside>，反而会干扰语义解析——这些属于全局 UI，应该放在 <header> 或独立 <div role="complementary"> 中。
- 正确用法：
<article>里的一段背景知识说明，用<aside>包裹并加<h3>标题 - 如果侧边栏内容和主内容完全无关（如全站公告、第三方推荐），别用
<aside>，用<div aria-label="site-wide sidebar"> - 注意兼容性：
<aside>在旧版 IE 中无默认样式，需手动重置 margin/padding
<time> 的 datetime 属性为什么不能随便填字符串
<time datetime="2026-08-25">今天</time> 这种写法看似省事，但 datetime 值必须是机器可解析的规范格式，否则搜索引擎无法提取时间信息，Lighthouse 也会报“无效日期”警告。
常见错误：用中文日期（"2026年8月25日"）、模糊描述（"上周"）、或缺失时区（"2026-08-25 14:30" 没带 +08:00）。
- 发布时间必须用 ISO 8601 格式：
datetime="2026-08-25T18:45+08:00"（含时分秒和时区） - 仅日期可用简写：
datetime="2026-08-25"，但不能混用中文或空格 - 动态生成时注意：后端返回的时间字符串要先 parse 成 Date 对象再格式化，避免直接拼接
语义化不是贴标签比赛，而是让每个标签承担它该有的责任。最容易被忽略的是：浏览器和辅助技术对 <main>、<article> 的解析是刚性的，错用一次，SEO 和无障碍就掉一档——宁可多用 <section>，也别让 <main> 出现在错误层级里。
