语义标签必须严格遵循规范：section需自带标题，main只能出现一次且不可嵌套，nav应直接使用而非role模拟，time必须含datetime属性，标签作用域具有局部性。

没标题就用

，DOM结构反而更乱

浏览器不会报错，但屏幕阅读器会跳过这个

，搜索引擎也当它不存在。它不是“视觉分块”，而是“逻辑章节”——必须自带

–

，否则语义断裂。

常见现象：<section><p>订单状态：已完成</p></section> 这种写法让辅助技术无法建立文档大纲，导航时直接跳过。

• 有自然标题（哪怕只是

  ）→ 用 <section>

• 没标题、只是样式分组 → 改用 <div> 或加 role="region" + aria-labelledby
• 想复用到 RSS/邮件里也能独立存在 → 才算真正符合 <section> 的设计意图

嵌在

或

里，读屏器直接迷路

<main> 是页面唯一主内容锚点，读屏器按 Ctrl+Alt+Home（NVDA）或 Cmd+Option+H（VoiceOver）会直跳这里。一旦嵌套，跳转失效，甚至只识别第一个。

错误示例：<header><nav><main>...</main></nav></header> —— 这会让所有辅助技术忽略主内容。

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

• 全页只能出现一次 <main>
• 不能出现在 <header>、<footer>、<nav>、<aside> 内部
• 建议配稳定 id="content"，方便 JS 聚焦或 SEO 锚点跳转

把

当

用，多写代码还降级

用 <div role="navigation"> 等价于手动模拟 <nav>，但旧版 Safari 和 IE11 不保证正确暴露给 AT（辅助技术），而原生 <nav> 在 IE9+ 就已稳定支持。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

性能上看似没差别，但维护成本高：你得自己管焦点、键盘行为、ARIA 状态同步；而 <nav> 浏览器原生处理。

• 导航区块 → 直接用 <nav>，别绕路
• 需要多个导航？加 aria-label 区分，比如 <nav aria-label="主导航"> 和 <nav aria-label="页脚导航">
• 非标准导航（如面包屑）→ 用 <nav aria-label="Breadcrumb">，不是 <ol> 或 <div>

缺datetime属性，日期对屏幕阅读器就是“不可读”

<time>3月15日</time> 在 VoiceOver 或 NVDA 下常被读作“t-i-m-e”，不是日期。必须靠 datetime 属性提供机器可读格式，AT 才能解析并播报为“2024年3月15日”。

旧版 Edge（≤2021）甚至直接忽略无 datetime 的 <time>，既不渲染语义，也不暴露给辅助树。

• 必须写 <time datetime="2024-03-15">3月15日</time>
• 带时间？格式是 YYYY-MM-DDTHH:MM，比如 2024-03-15T14:30
• 纯文本日期（如“上周三”）→ 别硬套 <time>，用 <span> + aria-label 更稳妥

语义标签不是“越用越多越好”，而是“该用才用”。最常被忽略的其实是上下文一致性：一个 <section> 里用了 <header>，那它的 <header> 就只属于这个 section，不是全站顶栏。这种局部作用域意识，比记住标签名难得多。