语义化是用语义标签准确表达内容逻辑关系，错用比不用更伤seo和可访问性；main必须唯一且不嵌套，nav用于多链接导航，article要求内容可独立分发，section依赖上下文，css不应扭曲语义。
直接说结论：语义化不是加几个新标签就完事，而是用
为什么只能出现一次且不能嵌套在里
Google 明确把 main 作为识别页面主体内容的首要信号。多个 main 会让爬虫直接忽略全部；嵌套在 article 中则违反语义层级——main 表示“整页唯一核心”，而 article 是可独立分发的单元（比如一篇博客），它自己就是内容主体，再套一层 main 就等于说“这篇博客里还有个更核心的部分”，逻辑断裂。
- 检查方式：用浏览器 DevTools 的「Elements」面板搜索
<main></main>，确保只出现一次，且父级是body或文档根节点 - 常见误用：
<article><main>...</main></article>—— 应改为<article>...</article>，把主体内容直接放进去 - 兼容提示：IE11 不渲染
main的默认样式，但只需一行document.createElement('main')就能激活，现代项目基本不用 polyfill
nav 的本质是“一组用于跳转的链接”，不是“顶部横条”。页脚的友情链接区、文章末尾的“相关阅读”、甚至移动端弹出菜单，只要语义匹配，都该用 nav。
- 错误写法：
<div class="nav">...</div>—— 爬虫无法识别，Lighthouse 会标为“结构缺失” - 正确场景举例：
- 页眉主导航：
<header><nav>...</nav></header> - 页脚资源链接：
<footer><nav aria-label="友情链接">...</nav></footer> - 文章内跳转锚点：
<nav aria-label="本文目录"><a href="https://www.php.cn/link/d898b56d8d76a952291cad93c805877f">第一部分</a></nav>
- 页眉主导航：
- 注意：如果只是单个链接（如“返回首页”按钮），不用
nav；nav必须包含两个及以上有跳转功能的链接
和怎么选？看内容能不能“单独发朋友圈”
这是最常踩坑的地方。article 的内容必须能脱离当前页面独立存在并保持完整意义（比如复制到 RSS、转发到社交平台）；section 则是依赖上下文的逻辑区块，抽出来就不知所云。
- 该用
article的：- 博客正文：
<article><h2>标题</h2> <p>正文...</p></article> - 新闻条目、商品卡片、用户评论
- 博客正文：
- 该用
section的：- “关于我们”“服务流程”“客户评价”这类需配合主标题理解的板块
- 每个
section建议带h2–h6标题，否则在文档大纲中会消失，影响 SEO 结构识别
- 嵌套规则：
article里可以有多个section（如文章里的小节），但section里不应包裹多个article—— 那说明你该用main包一层再放article列表
CSS 怎么配合语义标签布局，而不是覆盖语义
语义标签本身不带样式，也不该被 CSS 强行扭曲含义。比如用 aside 做右浮动广告位，但内容和主文毫无关联，这就属于“伪语义化”——标签名骗过了人眼，却误导了爬虫和屏幕阅读器。
- 关键原则：
aside必须与邻近的article或section有逻辑关联（作者简介、延伸阅读、数据来源） - Flexbox / Grid 控制排列，不改语义：
- 主栏+侧栏：
<main></main><aside></aside>外层容器设display: flex，分别设宽，而非给aside加float: right - 导航横排：
nav ul设display: flex; gap: 1.5rem，别用inline-block+ 负 margin
- 主栏+侧栏：
- 重置优先：
* { margin: 0; padding: 0; box-sizing: border-box; }开头清掉干扰，再单独为header、nav等设背景、内边距等视觉属性
最容易被忽略的一点：语义化不是“做完就提交”的一步操作，而是每次增删 DOM 节点时都要问一句——这个标签是否真实表达了它的内容角色？哪怕只是加一个轮播图容器，硬套 article 也比用 div 更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
