<main>只能出现一次且不能嵌套，因其语义定义为页面唯一主导内容区；必须是<body>直属子元素，须含标题，datetime需ISO格式，旧浏览器仅渲染不暴露语义。
为什么 <main></main> 只能出现一次且不能嵌套在 <header></header> 里
因为 <main></main> 在规范中被定义为“页面中唯一、主导的、与当前文档直接相关的内容区域”，它的语义是排他的。浏览器和屏幕阅读器依赖这个唯一性来快速定位核心内容；若重复或嵌套，会导致辅助技术跳过、误读，甚至让搜索引擎降权主内容权重。
-
<main></main>必须是的直属子元素，不能出现在<header></header>、<footer></footer>、<nav></nav>、<aside></aside>内部 - 多个独立文章页（如博客列表页）不能每个都用
<main></main>包裹——列表页本身用一个<main></main>，每篇文章用<article></article> - SPA 应用中，路由切换时需动态更新
<main></main>的内容，但不能动态插入/删除整个<main></main>标签（会破坏 DOM 稳定性）
<section></section> 不是“分块容器”，它必须带标题且可独立理解
很多开发者把 <section></section> 当成带语义的 <div>，这是最普遍的误用。实际上，<code><section></section> 的语义锚点是标题——没有 <h1></h1>–<h6></h6>，它就失去结构意义，对屏幕阅读器等同于空标签。
- ✅ 正确场景：一篇教程里的“
<h2>环境配置</h2> <section>...</section>”，该区块可单独摘出作为文档片段发布 - ❌ 错误场景：仅用于 Flex 布局的外层包裹、无标题的“卡片容器”、纯样式分隔区
- ⚠️ 注意：
<section></section>默认无 margin/padding，视觉上和<div> 一样“没区别”，别因看不出差异就随意替换 <h3> <code><time datetime="2024-03-15"></time>的datetime属性不是可选的装饰不写
datetime或格式错误（如"3月15日"），等于放弃机器可读能力。屏幕阅读器无法播报准确日期，搜索引擎也无法提取时间维度信息用于时效性排序。- 必须使用机器可解析格式：ISO 8601（
YYYY-MM-DD、YYYY-MM-DDThh:mm:ss等） - 显示文本可以人性化（如
<time datetime="2024-03-15">3月15日</time>），但datetime是唯一可信源 - 动态生成时注意时区：服务端时间戳若未带时区偏移（如
+08:00），客户端解析可能偏差一天
IE11 和旧 Safari 对语义标签的“支持”只是渲染，不是语义暴露
它们能显示
<nav></nav>、<header></header>，但 VoiceOver 或 NVDA 可能完全忽略其角色，只当普通<div> 处理。这不是样式问题，而是 ARIA 角色未被正确映射到平台可访问性 API。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>底线兼容组合：只依赖 <code><nav></nav>、<main></main>、<header></header>、<footer></footer>—— 这些在 IE9+ / Safari 5.1+ 已有基础角色映射 - 必须使用机器可解析格式：ISO 8601（
-
<aside></aside>、<section></section>、<figure></figure>在 Safari 12 前常被读作 “section” 而非 “complementary”，实际语义失效 - 不要指望 polyfill 修复语义：CSS
display: block能解决渲染，但无法补全辅助技术所需的底层角色声明
