HTML语义化是用标签准确表达内容角色而非视觉样式；选<article>还是<section>取决于内容能否独立分发，<article>需有标题且可被RSS订阅，<section>须配<h2>–<h6>标题才具语义。
HTML语义化不是“加几个新标签就完事”，而是从第一行代码开始，用标签回答“这是什么”，而不是“它看起来像什么”。
怎么选 <section> 还是 <article>
关键看内容是否具备独立分发/复用价值：<article> 必须能单独被 RSS 抓取、邮件转发或嵌入其他页面；<section> 只是主题性分组，没有这个能力。
-
<article>内部必须有明确标题（<h2>–<h6>），且不能只是视觉装饰 -
<section>如果没配标题，浏览器会忽略其语义，DevTools 的 Accessibility 面板里看不到 role=region - 侧边栏的“热门推荐”“相关链接”不是
<article>，用<aside>更准确；但如果是“编辑精选的三篇短评”，每篇都带标题和作者，那就该用三个<article>
为什么 <nav> 不能套在页脚链接上
<nav> 的语义是“主导航系统”，即用户用来在站点主要区域间跳转的路径集合。页脚的“隐私政策”“服务条款”属于法律/辅助信息，不是导航目标。
- Chrome DevTools 检查时，
<nav>元素会自动暴露 role=navigation；页脚链接若强行套<nav>，屏幕阅读器会错误提示“进入导航区”，实际却无跳转意义 - 正确做法：页脚用
<footer>包裹，内部用普通<ul>+<a>，必要时加aria-label="页脚辅助链接" - 如果页脚真有主导航（比如多语言切换入口），那才另起一个
<nav aria-label="语言切换"，而非混在法律声明里
<main> 的隐藏陷阱：嵌套与重复
<main> 是页面唯一主内容容器，但它不是“所有内容都往里塞”的兜底标签——它只包裹当前视图的主体，不包含跨页面复用的 UI 组件。
立即学习“前端免费学习笔记（深入）”；
- 一个页面只能有一个
<main>；嵌套在<article>或<section>里是无效的，会被浏览器降级为普通 div - SPA 中路由切换时，JS 动态替换
<main>内容没问题，但别用display: none隐藏旧内容却不移除aria-hidden—— 屏幕阅读器仍可能聚焦到不可见的<main>子元素 - 组件库中封装卡片列表时，别让每个卡片都包一层
<main>，那是对语义的污染
检查语义是否真正生效的最小闭环
写完标签不等于语义落地。最简验证流程就是打开 Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”，看三项是否匹配预期：
- role 是否符合标签规范（如
<header>应为 role=banner，<nav>应为 role=navigation） - name 是否可读（
<img>缺alt就是 name=null；<button>里只有图标就得加aria-label） - level 是否连贯（
<h2>后直接<h4>会导致屏幕阅读器跳过 h3 逻辑层级）
最容易被忽略的是：CSS 重置后焦点样式失效、JS 动态插入内容未同步更新 aria 属性、以及用 <div role="button"> 却没补键盘事件支持——这些都会让语义在真实交互中“断连”。
