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