语义化是HTML布局的基础生存线，而非加分项：div无语义，导致搜索引擎降权、读屏器报错、团队协作困难；导航必须用nav，section表主题分组，article表独立内容单元，h1唯一且不可跳级，main必须且仅出现一次包裹主体内容。

HTML布局设计中，语义化不是“加分项”，而是基础生存线——搜索引擎降权、读屏器报错、团队协作卡在

里改三天都找不到主内容，基本都源于语义标签用错了或压根没用。

为什么用 div 套 div 写导航会出问题

这不是风格偏好问题，是机器无法解析结构的硬伤。浏览器、SEO爬虫、辅助技术依赖标签名推断用途，div 没有语义，等于告诉它们“这是一块砖，用途未知”。

• 导航区域必须用 nav，哪怕只有一条链接；多个导航（如页眉+页脚）可加 aria-label 区分
• div class="nav" 在 Lighthouse 审计中直接扣分，且无法被 voice control 工具识别为“跳转到导航”
• 真实案例：某招聘站把侧边筛选栏写成 div class="sidebar"，结果读屏软件朗读时跳过整个模块，HR 用户完全无法操作

section 和 article 的核心区别在哪

两者都表示“内容区块”，但语义权重完全不同：section 是主题性分组，article 是可独立分发的内容单元。

• article 适合博客正文、新闻稿、用户评论——能单独 RSS 推送、被搜索引擎当独立页面索引
• section 适合“产品介绍”“技术参数”这类依附于父页面的主题块；单个按钮、单张图、纯样式容器都不该用它
• 错误高发点：把轮播图的每个 div 都包一层 section，实际应统一用 div + ARIA 属性（如 role="region"）

标题层级断裂导致 SEO 权重稀释

h1 到 h6 是逻辑树，不是字体大小开关。跳级或重复使用会切断内容结构链，让搜索引擎误判主次。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 每个页面只能有一个 h1，通常是主标题（如“前端避坑指南”），不是 logo 或 slogan
• 禁止 h1 → h3 跳级；若需视觉小标题，用 h2 + CSS 控制字号，而非硬切到 h3
• 组件化开发中易踩坑：子组件自带 h1（如卡片组件），嵌入页面后造成多 h1，应改为 h2 或用 aria-labelledby 关联

main 标签被忽略的后果比你想象得严重

它不是装饰性标签，而是告诉所有辅助技术“这里才是页面核心内容起点”。漏掉它，等于让用户手动滑动 5 秒才能进正文。

• 必须且仅能出现一次，包裹所有主体内容（不含 header、nav、aside、footer）
• Vue/React 中常见错误：把 main 写在组件内部，路由切换后未重置，导致多个 main 共存
• 验证方法：打开 Chrome DevTools → Elements → 按 Ctrl+F 搜 <main，确认唯一且位置合理

最常被绕开的其实是检查环节：不运行 Lighthouse，不打开读屏软件试一遍，不粘贴代码进 W3C Validator，语义化就永远停留在“我以为我用了”。