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