HTML标签语义化是指通过<header>、<nav>、<main>、<section>、<article>等标签显式声明内容逻辑角色，替代无语义的<div>，以提升可访问性、SEO和代码可维护性。
HTML 标签本身不定义“逻辑块”的语义，而是通过语义化标签（如 <header>、<main>、<section>）显式声明内容的逻辑角色；浏览器和辅助技术据此理解结构，而非仅靠 <div> 堆叠。
哪些标签明确表达逻辑结构
语义化块级标签直接告诉解析器“这部分是什么”，不是装饰性容器：
-
<header>：页面或<article>的引导区域，通常含标题、logo、导航入口；一个页面可有多个，但每个应服务于其父级上下文 -
<nav>：专用于导航链接集合；非所有链接都该放这里（例如页脚版权链接不算导航） -
<main>：页面核心内容，且整个文档中只能出现一次；不能嵌套在<article>或<aside>内 -
<section>：有主题的独立内容组，必须自带<h1>–<h6>；纯样式分隔不用它，用<div> -
<article>：可独立分发/复用的内容单元（如博客条目、新闻稿），可嵌套<section>，但不要用它包裹整页布局
为什么 <div> 不算逻辑块
<div> 是无语义通用容器，它的存在对屏幕阅读器、搜索引擎、CSS 选择器没有结构提示作用。常见误用：
- 用
<div class="header">替代<header>→ 辅助技术无法识别导航意图 - 把整页内容塞进
<div id="wrapper">→ 搜索引擎无法提取主内容区域 - 为每段文字加
<div>仅为了 margin 控制 → 破坏语义流，增加 DOM 深度
真正需要样式隔离时，优先用语义标签 + 类名组合，比如 <section class="features">，而不是 <div class="section features">。
立即学习“前端免费学习笔记（深入）”；
ARIA role 不能替代语义标签
给 <div role="main"> 加 ARIA 属性看似能模拟语义，但存在明显缺陷：
- 不提供默认焦点行为（
<main>支持tabindex="-1"快速跳转） - 部分旧版读屏软件忽略
role或处理不一致 - 无法触发浏览器原生样式重置（如
<main>在某些 UA 样式表中有隐式 margin） - 当同时存在
<main>和role="main"，后者会被忽略 —— 浏览器以原生标签为准
检查结构是否合理的关键信号
打开浏览器开发者工具，切换到“Accessibility”面板，观察以下几点：
- 是否有多个
<main>节点？→ 违反规范，应只保留一个 -
<section>下没有<h2>或更高阶标题？→ 缺少主题标识，可能该用<div> - 所有
<nav>都被标记为 “navigation” 角色？→ 若未识别，检查是否遗漏aria-label或嵌套过深 - 使用 Lighthouse 运行“Accessibility”审计，关注 “Document has a main landmark” 是否通过
最常被忽略的是 <main> 的唯一性和 <section> 的标题强制要求 —— 这两点直接影响可访问性测试结果和 SEO 结构化数据提取。
