语义化标签的核心是让浏览器和辅助技术理解内容意图，直接影响可访问性树与SEO；如<nav>提示导航区域，<article>被优先索引，而<div>默认无语义，需手动补ARIA属性。
<header> 不是 <div class="header"> 的语法糖，<main> 也不是为了省几行 CSS —— 它们的核心区别在于浏览器和辅助技术能否“理解”这段内容的意图。
语义化标签会直接影响可访问性树和 SEO 解析
屏幕阅读器遇到 <nav> 会主动提示“导航区域”，用户可一键跳转；搜索引擎把 <article> 内容视为独立内容单元，优先索引其标题与正文。而 <div> 或 <span> 在可访问性树中默认无角色（role="generic"），除非手动加 role 属性和 aria- 属性补救。
- 没有
<main>或重复使用多个<main>：会导致屏幕阅读器无法定位主内容，WCAG 检查直接报错 - 用
<section>却不配<h2>或更高阶标题：违反 HTML5 规范，部分读屏软件忽略该区块 -
<aside>放在<main>外但语义上属于某篇文章的注释：结构错位，影响内容归属判断
<figure> 和 <img> 的用途边界很明确
<img> 表示嵌入式图像，强调“内容本身”；<figure> 是一个自包含的媒体单元，必须搭配 <figcaption>（即使为空）才完整。单独用 <img> 放截图说明代码行为，是错的；应套 <figure> + <figcaption> 明确“这是某段代码的执行结果示意图”。
-
<figure>可以包含<table>、<pre>、<video>，不限于图片 -
<figcaption>必须是<figure>的第一个或最后一个子元素 - 纯装饰图（如背景花纹）仍该用 CSS
background-image，不进 HTML 结构
浏览器对语义标签有隐式 ARIA 角色，但不可依赖 JS 动态替换
原生 <nav> 自带 role="navigation"，<footer> 是 role="contentinfo"。但若用 JavaScript 把 <div id="nav"> 动态改成 <nav>，部分旧版读屏器不会重新解析角色，仍按 div 处理。
立即学习“前端免费学习笔记（深入）”；
- 语义结构应在初始 HTML 中确立，避免运行时“打补丁”
- 动态内容区域（如 Tab 切换面板）需手动维护
aria-hidden和tabindex -
<main>必须且只能出现一次，且不能是<article>、<aside>、<footer>等的子元素
最容易被忽略的是：语义不是“贴标签”，而是描述真实内容关系。一个叫 sidebar 的 <div> 即使视觉上在右侧，只要它承载的是当前文章的延伸阅读，就该用 <aside>；反之，如果它放的是全站通用的广告位，那它其实属于 <footer> 或独立 <section>，和当前内容无关。
