该用 <nav> 时是整站级主导航（如顶部菜单），因其被屏幕阅读器识别、提升SEO权重；非主导航链接组应选 <div> 或 <aside>；<section> 需有明确主题和标题；<main> 全局唯一且不可嵌套于 <article>；<time> 和 <mark> 提供关键机器可读语义。
什么时候该用 <nav> 而不是 <div class="nav">
屏幕阅读器用户按快捷键跳转导航时，只识别原生 <nav>；<div class="nav"> 完全不被识别，等于主动屏蔽辅助访问能力。搜索引擎也会对 <nav> 内部链接赋予更高权重，尤其当它出现在 <header> 或页面顶部时。
但别一看到“导航”就套 <nav>：页脚里的“友情链接”、文章末尾的“相关推荐”链接组，语义上不属于主导航，用 <div> 或 <aside> 更合适。
-
<nav>应包裹整站级、跨页面一致的导航（如顶部菜单、侧边全局菜单） - 单个按钮、分页控件、面包屑（
<nav aria-label="breadcrumb">除外）不推荐用<nav> - 旧版 IE8 及更早浏览器不支持
<nav>，需配合document.createElement("nav")或 polyfill（但 2026 年已基本可忽略）
<section> 和 <div> 的边界在哪
<section> 不是“视觉分块”的代名词。它要求内容有明确主题，且必须配一个标题（<h2>–<h6>），否则就是误用。比如一个纯图标+文字的工具栏，没标题、无独立主题，用 <div> 更准确。
常见误判：<section> 嵌套 <section> 是允许的，但若子 <section> 没有自己的 <h3>，而只是父 <section> 的展开项，那它大概率该降级为 <div>。
立即学习“前端免费学习笔记（深入）”；
- 正确用法：
<section><h2>产品功能</h2><p>…</p></section> - 错误用法：
<section><div>按钮组</div></section>（没标题，主题模糊） - 性能影响极小，但语义错误会让 Lighthouse 的“结构化数据”评分掉档
<main> 只能出现一次，但可以嵌套在 <article> 里吗
不能。<main> 表示整个文档的唯一主体内容，必须直接位于 <body> 下，且全文只能有一个。而 <article> 是可复用的独立内容单元（如一篇博客、一条新闻），它内部应使用 <header>、<p>、<footer> 等组织，而不是再塞一个 <main>。
典型错误：在 CMS 页面中，把每篇动态加载的文章都包进 <main>，结果生成多个 <main> —— 这会破坏辅助技术的“直达正文”逻辑，也让 SEO 认为页面结构混乱。
- 正确结构：
<body><header>…</header><main><article>…</article></main><footer>…</footer></body> -
<main>内可包含多个<article>、<section>，但不可被任何其他语义标签包裹（<div>可以） - 若页面是单页应用（SPA），路由切换时需手动更新
<main>的aria-live属性，否则屏幕阅读器可能不感知内容更新
为什么 <time> 和 <mark> 容易被忽略却很关键
<time datetime="2026-08-25">今天</time> 不只是为了加个 tooltip，它的 datetime 属性是机器可读的时间戳，日历类扩展、RSS 解析器、SEO 结构化数据提取器都依赖它。不用它，就只能靠正则硬扒文本，准确率暴跌。
<mark> 也不是高亮样式替代品。它表示“这段文字在当前上下文中有特殊相关性”，比如搜索结果页中关键词匹配部分、法律条文中被引用的条款——这种语义能被辅助技术朗读强调，也能被 CSS 用 mark:not([hidden]) 单独控制可见性。
-
<time>的datetime必须是合法机器可解析格式（如YYYY-MM-DD、HH:MM），"昨天"或"8月25号"无效 -
<mark>不该用于装饰性高亮（如强调价格数字），那是<strong>或 CSS 的事 - 二者在 HTML 验证器中不会报错，但缺失会导致结构化数据测试（如 Google Rich Results Test）失败
<div>。 
