语义化HTML的核心是让标签承担协议角色而非仅视觉功能：h1是主主题声明，article是可独立分发的内容单元，main是唯一主内容锚点，错误使用会导致SEO降权、无障碍导航失效和机器解析偏移。

因为“能用

跑起来”不等于“结构没塌”，而塌掉的不是样式，是机器可理解的逻辑层。

为什么搜索引擎会跳过你的

却给一个

打高分

Googlebot 等现代爬虫已深度支持语义化解析，但它们不会猜类名。当你写 <div class="title">产品详情</div>，它只看到一个无角色的容器；而 <h2>产品详情</h2> 会被直接映射为“二级标题”并参与内容权重计算。

常见错误现象：

• 用 <span> 包裹整个文章标题，只为了加个颜色
• 把所有导航链接塞进 <div id="nav">，却不加 <nav>
• 在 RSS 订阅源里抓不到正文，因为 <article> 被漏掉了，只留了一堆 <div class="post">

真正起作用的不是“用了新标签”，而是“让每个标签承担它该有的协议角色”。<h1> 不只是最大号字体，它是整页唯一主主题声明；<article> 不只是视觉卡片，它自带可独立分发、可被聚合器识别的语义契约。

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

屏幕阅读器用户按“R”键想跳到<main>，结果卡在

海洋里

辅助技术（AT）依赖原生语义做快捷导航：<main> 对应“跳至主内容”，<nav> 对应“列出所有导航区”，<aside> 对应“读取相关补充信息”。这些不是靠 ARIA 补出来的，是浏览器内置的无障碍 API 映射。

容易踩的坑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• <main> 嵌套在 <section> 或 <article> 内 —— 这会让 AT 认为“这个区块 = 全页主内容”，忽略真实导航和页脚
• 用 <div role="button"> 替代 <button>，却忘了加 tabindex="0" 和 onkeydown 处理回车/空格
• 把侧边广告栏标成 <aside>，但它既不关联主内容，也不提供补充信息，纯属干扰项

性能影响很小，但可访问性断点极大：一个没 <main> 的页面，对键盘用户来说可能需要 Tab 47 次才能摸到正文。

<section> 和 <article> 的边界到底在哪

关键判断依据就一条：能否脱离当前页面独立存在、被单独链接或订阅？

适用场景对比：

• 用 <article>：博客正文（有独立 URL）、新闻稿（可被 RSS 抓取）、用户评论（带作者、时间戳、可复用）
• 用 <section>：“技术参数”小节（依赖上文产品标题）、“售后政策”模块（仅在此页上下文有意义）
• 别用 <article>：轮播图每张图（无独立 ID/URL）、商品 Grid 中每个卡片（除非点击后跳转详情页且有自洽标题）

误用后果：SEO 权重被错误切片，AT 导航出现冗余入口，<article> 嵌套 <article> 会让聚合器困惑——它不知道哪个才是“原子内容单元”。

最常被忽略的其实是 <main> 的强制约束：它必须且只能出现一次，且不能是 <header>、<footer>、<nav>、<aside>、<section> 的子元素。这不是规范洁癖，是机器解析时的结构锚点——一旦松动，所有依赖它的协议（爬虫索引、AT 导航、Lighthouse 评分）都会偏移。