必须用 而不是 或 的情况是：页面中代表用户最核心、不可替代的内容区域，且全页仅能有一个；它被搜索引擎和屏幕阅读器识别为主干内容，不可嵌套在 、 或 内，误用会导致 lighthouse 审计失败及无障碍访问问题。
什么时候必须用 <main></main> 而不是 <section></section> 或 <div>
<p>一个页面只能有一个 <code><main></main>，它代表对用户最核心、不可替代的内容区域。搜索引擎和屏幕阅读器会把它当作页面“主干”来识别，跳过导航、侧边栏直接聚焦到这里。
常见误用：<section></section> 是逻辑分组（比如“产品特性”“客户评价”），<div> 是纯布局容器——它们都不能替代 <code><main></main> 的语义权重。
- 如果你在写博客详情页，正文部分必须包在
<main></main>里，而不是套个<section class="article"></section> -
<main></main>不能嵌套在<article></article>、<aside></aside>或<nav></nav>内部 - 多个
<main></main>会导致 Lighthouse 审计失败，且被部分读屏软件忽略主体内容
<article></article> 和 <section></section> 的边界到底在哪
关键看内容是否“可独立分发、复用”。<article></article> 是自包含的完整单元，比如一篇博客、一条新闻、一个商品卡片；<section></section> 只是同一主题下的内容区块，依赖上下文存在。
错误示例：把整个首页的“关于我们”“服务介绍”“团队展示”都各自写成 <article></article> ——它们不是独立内容，只是页面结构的一部分。
- 判断标准：把这段 HTML 单独保存为文件，能否脱离原页面被 RSS 抓取、被其他网站引用？能 → 用
<article></article>；不能 → 用<section></section> -
<article></article>可以嵌套<section></section>（比如文章里的小节），但反过来不行 - 不要为了“看起来更语义”强行拆分：一段带标题的说明文字，没独立意义，就用
<section></section>+<h2></h2>，别硬套<article></article>
<aside></aside> 不等于“侧边栏”，也不该塞广告代码
<aside></aside> 表示与当前内容相关但非必需的补充信息，比如术语解释、作者简介、延伸阅读链接。它的语义是“关联性”，不是“位置”。
把全站通用的广告横幅、登录入口、热门标签云扔进 <aside></aside>，反而会干扰语义解析——这些属于全局 UI，应该放在 <header></header> 或独立 <div role="complementary"> 中。
<ul>
<li>正确用法：<code><article></article> 里的一段背景知识说明，用 <aside></aside> 包裹并加 <h3></h3> 标题
<aside></aside>，用 <div aria-label="site-wide sidebar">
<li>注意兼容性：<code><aside></aside> 在旧版 IE 中无默认样式，需手动重置 margin/padding
<time></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></main>、<article></article> 的解析是刚性的，错用一次，SEO 和无障碍就掉一档——宁可多用 <section></section>，也别让 <main></main> 出现在错误层级里。
