HTML5语义标签必须用<header><nav><main><article><section><aside>，它们被现代浏览器原生支持且具真实语义；<footer><figure><time><mark>等需严格按语义使用，避免滥用。
HTML5 新增的语义化标签不是“锦上添花”，而是为了解决 HTML4 中 <div> 和 <span> 滥用导致的结构模糊、无障碍支持弱、SEO 解析不准等问题。真正该关注的，是那些浏览器已广泛支持、且有明确语义边界、能被屏幕阅读器和搜索引擎可靠识别的标签。
哪些 HTML5 语义标签在实际项目中必须用
这些标签已被所有现代浏览器（包括 Edge 12+、Chrome 10+、Firefox 4+、Safari 5.1+）原生支持，无需 polyfill，且具备真实语义价值：
-
<header>：仅用于页面或区块的**顶部引导内容**（如 logo、主导航），不是所有顶部<div>都该换；嵌套时注意层级，避免在<footer>里再套<header> -
<nav>：专指**主导航链接集合**，不适用于面包屑、分页、页脚链接群；一个页面可有多个<nav>（如顶部主菜单 + 侧边工具导航） -
<main>：每个页面**有且仅有一个**，代表核心内容区域；不能出现在<article>或<aside>内部 -
<article>：表示**独立可分发的内容单元**（如博客文章、新闻条目、论坛帖子），自带隐式sectioning root，影响大纲生成 -
<section>：按主题组织内容的通用区块，**必须有标题**（<h1>–<h6>），否则语义失效；别把它当“高级<div>”用 -
<aside>：内容与主文相关但可独立存在（如侧边栏注释、术语解释、广告），不是所有侧边栏都适用——如果只是导航或 logo，用<nav>或<header>更准确
哪些“HTML5 标签”其实不该乱用
部分新增标签虽合法，但语义窄、兼容场景少，或已被实践证明容易误用：
-
<footer>：常被当成“页面底部容器”，但它的语义是**所属区块的尾部信息**（如文章末尾的作者/日期，或页面级版权信息）；页脚里的导航应放在<nav>内，而非直接塞进<footer> -
<figure>+<figcaption>：仅适用于**自包含的媒体内容及其标题**（如插图、代码块、表格），不适用于纯装饰图或 banner 图；标题必须紧邻内容，且不可省略 -
<time>：必须带datetime属性才有效（如<time datetime="2023-05-12">5月12日</time>），否则只是普通内联文本，对机器无意义 -
<mark>：表示**上下文中的高亮引用**（如搜索结果中关键词），不是视觉加黄工具；滥用会导致无障碍体验混乱（屏幕阅读器会读出 “highlighted”）
HTML4 到 HTML5 的语义断层在哪
关键不在“多了什么标签”，而在**大纲算法（document outline）逻辑的根本变化**：
立即学习“前端免费学习笔记（深入）”；
- HTML4 完全依赖
<h1>–<h6>的显式层级构建文档结构；<div>对大纲无贡献 - HTML5 引入**隐式节（sectioning content）**：所有
<article>、<section>、<nav>、<aside>自动创建新节，其内部<h1>被视为该节的最高级标题（即：可全篇用<h1>，靠嵌套关系定义层级） - 但现实是：主流浏览器从未完整实现 HTML5 大纲算法（仅 Safari 有限支持），开发者仍需靠
<h1>–<h6>保证可访问性；所以正确做法是——既用语义标签划分区块，又用合理<h2>–<h6>维持显式层级
验证语义是否真起作用的实操方法
别只看源码有没有标签，要验证机器是否能正确解析：
- 用 Chrome DevTools → **Accessibility 面板**查看“Landmarks”和“Heading levels”，确认
<nav>显示为 navigation、<main>显示为 main - 用 NVDA 或 VoiceOver 开启屏幕阅读器，按
Insert+F7（NVDA）调出元素列表，检查是否出现正确的地标（landmark）和标题树 - 运行 W3C Nu Validator，输入 URL 或粘贴 HTML，它会报出
<main>重复、<section>缺标题等真实语义错误 - 在终端执行：
curl -s "https://your-site.com" | grep -E "(header|nav|main|article|section|aside|footer)" | head -10
快速确认基础语义标签是否已落地
语义标签的价值不在“用了新语法”，而在于让内容结构可被机器稳定提取。最常被忽略的一点：即使写了 <article>，如果里面没用 <h2> 做标题、没加 pubdate（HTML4）或 datetime（HTML5）时间属性，它对 SEO 和无障碍的帮助就非常有限。
