语义化不是加几个新标签就完事，而是用对的标签做对的事——错用<section>比不用更糟，<main>多写一个就破坏整个页面的无障碍锚点；<section>必须有独立主题和<h2>–<h6>标题，否则一律用<div>；<main>每页仅一个且不可嵌套在<header>等容器内；<nav>仅用于全站主导航并建议加aria-label。
直接说结论：语义化不是加几个新标签就完事，而是用对的标签做对的事——错用 <section> 比不用更糟，<main> 多写一个就破坏整个页面的无障碍锚点。
怎么判断该用 <section> 还是 <div>
关键看这块内容有没有独立主题和标题。没有 <h2>–<h6> 的“分组”，一律用 <div>。
-
<section>必须自带标题（比如产品页的「参数详情」<h2>下包一层<section>） - 轮播图容器、网格卡片列表、纯样式分隔区——这些只是视觉布局，用
<div>更诚实 - 误用
<section>会导致浏览器大纲（outline）混乱，NVDA 会把无标题的<section>当作无效节点跳过
<main> 只能出现一次，且不能嵌套在其他语义容器里
这是最常被忽略的硬约束。<main> 是辅助技术定位“核心内容”的唯一可靠 landmark，多一个或包在 <header> 里，它就退化成普通 <div>。
- 正确结构：
<body>→<header>+<main>+<footer>（三者并列） - 错误写法：
<header><main></main></header>或<article><main></main></article> - Lighthouse 会报 “Multiple main landmarks”；Chrome DevTools 的 Accessibility 面板里看不到
mainrole
<nav> 不是所有链接集合都算导航
只用于主导航——即全站级、跨页面跳转的链接集合。页脚的「关于我们」「隐私条款」、文章内的「上一篇/下一篇」、面包屑，都不该用 <nav>。
立即学习“前端免费学习笔记（深入）”；
- 主导航必须有明确用途标识，建议加
aria-label="主导航"（尤其当页面有多个<nav>时） - 侧边栏菜单、分页控件、标签云——用
<ul>+ 普通链接更准确 - 用
<nav>包住搜索框或登录入口？错。它们属于交互控件，不是导航
检查语义是否真正生效，别只看标签名
写了 <header> 不等于屏幕阅读器就认出它是页眉。得验证它的 role、name、level 是否被正确暴露。
- Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”
- 常见失效：
<img>的alt是空字符串但图非装饰性；<time>的datetime写成"2026/04/29"（必须是"2026-04-29"） - 用 JS 动态隐藏
<nav>时，光设display: none不够，还得同步加aria-hidden="true"
真正难的不是记住哪些标签可用，而是每次写之前问一句：这个容器在脱离 CSS 和 JS 后，还能让机器和人准确理解它的角色吗？
