HTML5真正语义化标签是浏览器和辅助技术可识别内容角色的原生元素，包括<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>，须严格按规范使用以保障可访问性。
HTML5 新增的语义化标签不是“装饰用的别名”，而是有明确的 DOM 含义和辅助技术（如屏幕阅读器）识别逻辑的原生元素。用错或滥用反而会破坏可访问性。
哪些标签算真正语义化？
语义化标签指浏览器和辅助技术能据此推断内容角色的原生元素，不是 <div class="header"> 这类靠 CSS 或 JS 模拟的伪语义。HTML5 明确定义了以下核心结构标签：
-
<header>：页面或区块的页眉（非必须在顶部，但应含引导性内容） -
<nav>：仅用于**主导航链接集合**，不是所有链接都该套它 -
<main>：页面唯一、不可嵌套，代表主体内容（每个页面最多一个） -
<article>：能独立分发/复用的内容单元（如博客正文、新闻条目） -
<section>：有主题的分组，必须带标题（<h1>–<h6>），否则不如用<div> -
<aside>：与主内容相关但可分离的旁注（如侧边栏、引用、广告），不是所有侧边栏都适用 -
<footer>：所属区块的页脚（可以是<article>的 footer，不单指页面底部）
为什么 <section> 和 <div> 容易混用？
关键区别不在视觉，而在文档大纲和 AT（辅助技术）解析逻辑：
-
<section>会出现在浏览器生成的文档大纲中（例如 Chrome 的「大纲」开发者工具），<div>不会 - 没有
<h2>–<h6>的<section>是无效语义，AT 可能忽略或报错 - 纯样式分组、无主题的容器（如网格布局 wrapper、动画控制层）应该用
<div>，强行套<section>会污染大纲 - 示例错误：
<section class="grid-container"></section>—— 无标题、无主题，应为<div class="grid-container"></div>
<nav> 的边界在哪？
它只适用于**主要导航机制**，不是所有链接集合：
立即学习“前端免费学习笔记（深入）”；
- ✅ 页面顶部主导航菜单、左侧垂直导航栏、面包屑（
<nav aria-label="Breadcrumb">） - ❌ 文章内超链接、页脚的友情链接、分页控件（
<nav aria-label="Pagination">是例外，但需加aria-label明确意图） - ❌ 多个独立导航需分别包裹，不要把页头导航 + 页脚链接塞进同一个
<nav> - 兼容性注意：IE9+ 原生支持，但旧版屏幕阅读器可能需要
role="navigation"双保险（现代已非必需）
实际项目中最常被忽略的一点
语义化标签本身不保证可访问性 —— 如果你用 <main> 包裹了整个页面，却忘了移除其他 role="main" 或旧式 ARIA 标记，会导致重复播报；如果 <article> 里没写 <h2>，它在大纲中就变成“无题区块”，反而比 <div> 更难定位。语义是起点，不是终点。
