HTML5语义化标签是参与DOM构建与渲染树生成的关键元素，直接影响无障碍访问、SEO及浏览器解析逻辑。它们在解析时自动映射ARIA role（如<main>→role="main"），触发节区划分与隐式大纲生成，并需兼容处理以保障旧版IE中DOM结构完整。
HTML5语义化标签不是“装饰性语法”，而是直接参与浏览器解析与渲染流程的关键输入。它们在DOM树构建阶段就被赋予明确的语义角色，影响无障碍访问、搜索引擎理解，甚至底层渲染树的生成逻辑。
语义标签在DOM构建中触发角色映射
浏览器HTML解析器采用状态机模型，遇到语义化标签（如<main>、<nav>、<article>）时，会依据内置语义规则表自动附加ARIA role属性：
-
<main>→ 自动添加role="main"，且被标记为唯一地标（landmark），浏览器只允许一个<main>出现在文档中 -
<nav>→ 映射为role="navigation"，并启用可访问名称推导（如自动读取内部<h2>作为导航区名称） -
<header>和<footer>→ 分别绑定role="banner"和role="contentinfo"，但仅当其父容器为<body>或<section>时才生效
语义结构决定渲染树的裁剪与组织
语义标签本身不改变视觉样式，但会影响渲染树（Render Tree）的构建过程：
-
<head>、<script>（无defer/async）、<style>等非渲染元素不会进入渲染树 -
<article>和<section>触发“节区划分”（sectioning），浏览器据此生成隐式大纲（outline），用于屏幕阅读器跳转和开发者工具的“大纲视图” -
<aside>被识别为role="complementary"，即使CSS设为display: block，其语义层级仍独立于主内容流，在打印或简化视图中可能被降权处理
兼容性处理直接影响解析起点
在IE9及更早版本中，原生不识别HTML5语义标签，会导致解析器跳过这些标签，直接将其子节点挂载到父<div>或<body>下——DOM树结构被破坏，语义完全丢失：
立即学习“前端免费学习笔记（深入）”；
- 必须通过
document.createElement('header')提前声明新标签，让旧版IE知道这是合法元素 - 或引入
html5shiv.js，它不仅创建元素，还会为每个语义标签注入display: block样式，避免默认内联行为导致布局错乱 - 现代项目虽已无需支持IE，但若需服务老旧政务/银行系统，仍需保留该兼容层，否则
<main>可能被当成未知标签而忽略
SEO与可访问性依赖语义解析结果
搜索引擎爬虫和辅助技术（如NVDA、VoiceOver）不依赖CSS或JS，而是直接读取DOM树+ARIA角色组合后的语义结构：
- 没有
<main>或多个<main>，会导致“主要内容定位失败”，影响搜索权重分配 - 用
<div class="nav">替代<nav>，即使加了role="navigation"，也缺少原生语义保障（如自动焦点管理、快捷键支持） - 语义错误（如在
<footer>里嵌套<main>）会被Chrome DevTools的Lighthouse标记为“结构违规”，影响无障碍评分
