语义化是标签的本质角色而非视觉表象，如专指主导航而非横条菜单；全页唯一且仅包核心内容；须可独立分发；需有主题和标题；应为相关可剥离内容。
语义化不是“看起来像什么”，而是“它本来就是什么”
HTML语义化标签不是为了让你的页面更好看，而是为了让机器（搜索引擎、屏幕阅读器）和人（其他开发者）一眼看懂某段代码的职责。比如 <h1></h1> 不是因为它默认字体大加粗才叫标题，而是因为它在结构上就代表“最高级标题”；<nav></nav> 也不是因为常被写成横条菜单，而是它专指“主导航链接集合”。用 <div class="nav"> 模拟导航，对浏览器来说只是个无意义的盒子——它既不会被屏幕阅读器识别为可跳转区域，也不会被搜索引擎标记为导航入口。
<h3>常见语义标签该用在哪儿，别乱套</h3>
<p>每个语义标签都有明确的使用边界，硬套反而破坏结构：</p>
<ul>
<li>
<code><main></main> 必须且只能出现一次，包裹页面核心内容；嵌套在 <article></article> 或 <section></section> 里是错的
<article></article> 要能独立存在、可被单独分发（比如 RSS 抓取），新闻正文、博客帖子适用；但页脚里的“关于我们”简介不算<section></section> 必须有主题，且通常带标题（<h2></h2> 等），纯样式分隔或无逻辑的容器别用它<aside></aside> 是与当前上下文相关但可剥离的内容（如侧边栏推荐文章），广告或无关链接堆砌进去会误导辅助技术不语义化的代价，远不止“代码难读”
问题往往在上线后才暴露：
- SEO：百度爬虫可能把
<div class="header"> 当作普通区块，忽略其中的 logo 和主导航链接，导致关键词权重分散 <li>无障碍：视障用户用键盘 Tab 切换时，<code><nav></nav>可被识别为“导航区域”，按快捷键直接跳入；<div> 则只能逐个 tab 遍历，体验断层 <li>维护成本：半年后你回来改一个“搜索框”，得先 grep 所有 <code>class="search"，再确认是不是真在 header 区域；而<header><form role="search"></form></header>结构一目了然 -
<nav></nav>应显示 role="navigation" -
<main></main>应显示 role="main" -
<article></article>应显示 role="article"
怎么判断自己用对了？看浏览器的“结构树”
Chrome DevTools → Elements 面板右键任意节点 → “Inspect Accessibility Tree”，展开后观察角色（role）是否匹配预期：
如果全是 generic 或 section，说明语义没生效——可能是标签误用，也可能是父容器缺失必要层级（比如 <article></article> 直接挂在 下，缺少 <main></main> 或 <section></section> 上下文）。
真正难的不是记住标签名，而是每次写 HTML 时多问一句：“这段内容，脱离样式后，它的身份还成立吗？”
