semantic html 怎么写：页面每一块该用哪个元素，爬虫才读得懂

semantic html 的意思是：这一块是什么，就用名字说明它是什么的元素——导航用 <nav>、正文主体用 <main>、一篇文章用 <article>——而不是把每一块都塞进 <div>。搜索引擎和 AI 爬虫在读懂一句话之前，先把整页解析成一棵文档树，这些元素名就是挂在树上的标签。这一章给你那张「哪一块用哪个元素」的对照表、一条能对任何网址跑的审计命令，以及一个我们不会给你的承诺。

读这篇前

你只需要一个能改的页面，和看页面源码的办法。没有构建步骤，也不用装工具。如果你要解决的是每一节里该写什么、按什么顺序写，那是另一章——怎么把内容排成 AI 能摘的结构讲措辞和顺序。这一章讲的是包在这些文字外面的那层壳：这一块到底该用哪个元素装。

有两章挨着它。这些块里面的标题怎么写，在 h1 tag seo 那一章。而「真实站点到底有多少真在用这些元素」，实测数字在 27 个首页里的 main 标签那篇。

semantic html 到底改变了什么，没改变什么

它不会给你一个排名因子，这一点 Google 在自己的入门指南里说得很直白：「The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification」（Google Search Central，2026-09-26 访问）。我们不会拿标记语言来卖你一个排名提升。

地标元素（landmark）是给页面某一整块区域命名的语义元素。最常用的五个是 <header>、<nav>、<main>、<aside>、<footer>。它给文档树里的一个节点一个角色，于是消费方可以直接说「导航在这儿」，而不必靠位置和 class 名去猜。

它买到的是一个兜底，不是一张保证。读屏软件会直接用地标跳转；一个不读地标的爬虫，有你没你都一样——有标签时它不亏，没标签时它照样拿得到文字。代价是单向的：加了不会更差。所以这一章后面给的是表格，不是论证。

还有第二个理由，是对我们这种站才成立的那个。文档树也是提取器用来判断「一段话从哪儿开始、到哪儿结束」的依据。如果整页是一个 <div> 套着另一个 <div>，下游每个工具都得自己猜。给区域起名字，不保证它猜得对，但让它不必猜。

按这个顺序做

四步。每一步都有一个能检查的完成标志，过了再往下走。

1. 先把页面拆成区域。把读者看得见的每一块列出来：页头、菜单、正文、侧栏、页脚。完成标志是每一块都对应到一个区域，而不是「顶上那一堆」。
2. 给每个区域配元素。照下面的表来。完成标志是没有任何一块还因为「不确定它是什么」而留在裸 <div> 里。
3. 检查这些区域里的标题树。一个说明整页主题的 <h1>，下面再分节。完成标志是把正文藏掉之后，只剩标题也能读成一份大纲。
4. 对线上网址跑下面那条命令。完成标志是数出来的结果和你第一步画的那张图对得上；对不上的区域，说明它还只是个 <div>。

第四步是大家最容易跳过的一步，因为前三步靠判断，第四步是一个数字。而数字是唯一一个别人不用打开你的编辑器就能核对的东西。

交付物：一张元素对照表和一条审计命令

这张表把整章压到一屏。每一行回答的都是同一句话：这一块是什么，该由哪个元素来说。

第二件交付物是一行命令，对任何网址都能跑。它读的是服务器发回来的 HTML，不是 JS 跑完之后的页面，所以看到的正是爬虫第一次拿到的样子。

curl -sL https://example.com \
  | grep -oE '<(main|nav|header|footer|article|section|aside|figure)[ >]' \
  | sort | uniq -c | sort -rn

把它跑在 Google 自己那份 SEO 入门指南上——就是那份教你把 HTML 写好的页面——2026-09-26 这天返回的是：

这张表要慢慢看，因为它不是在说 Google 做错了。它只有一个页面、只抓了一次，而且它是文档页不是产品页。结论要窄得多：标签分布很不均匀，而读你页面的机器，在没有任何东西开口之前，分不清这 154 个盒子里面哪个才是要紧的那个。

有两个东西这条命令看不到：一是发了但被隐藏起来的地标，二是把几乎整页都包进去的那个地标。这两种都得用眼睛看页面，所以命令是底线，不是结论。

会踩的三个坑

下面三种失败出现得最多，而且在浏览器里全都看不出来。

1. 一个 div 包住整个世界。整页是一个 <div>，所有东西嵌在里面。它渲染得完美无缺，却没告诉解析器内容从哪儿开始、到哪儿结束。
2. 地标互相重叠。两个 <main>，或者毫无理由地把一个 <nav> 套进另一个 <nav>。地标是对一块区域的声明，同一块区域声明两次等于互相抵消。我们自己的实测里就有一个首页发了两个可见的 <main>。
3. 按字号挑标题层级。层级跟着 CSS class 走，大纲就成了一串互不相干的条目。修法不是补标题，而是先想清楚这一页在讲什么，再让字号去服从层级。

常见问题

语义化能提排名吗？

单靠它不能，我们也不会说它能。Google 入门指南的原话是搜索「can rarely depend on semantic meanings」。它改变的是你的页面向那些真的会读结构的工具描述自己的清晰程度。把它当成一个正确性问题来修，不要当成杠杆。

html landmarks 到底指什么？

landmark 是给页面某一整块区域命名的语义元素。常用的一套是 <header>、<nav>、<main>、<aside>、<footer>。读屏软件靠它们在区域之间跳转，解析器靠它们定位正文，而不必去数像素。

section 和 div 到底怎么选？

这一块有标题、是页面上独立的一部分，就用 <section>。只是需要一个装样式的容器、没有任何含义要表达，就用 <div>。用 <div> 当包裹层是诚实的；用 <section> 当包裹层是噪音。判断标准只有一条：把这一块的标题拿掉，它还有没有独立含义。

一个页面能有多个 main 吗？

规范只在「除了一个之外其余都隐藏」时才允许多个。我们没找到两个可见 main 有用的场景，倒是找到一个真发了两个的首页。留一个。

有一句边界要说清楚：这一章修的是文档树，别的都修不了。它救不了内容单薄的页面、救不了正文要等 JS 跑完才出现的页面，也救不了本来就说不清是什么的块。它同样不是一个一次性的动作：模板一改、组件一换，地标就可能悄悄漏掉，所以那条命令值得当成发布前的固定一步。等页面能把自己的结构说清楚之后，下一件事是让它被爬、被发布出去——那是 QueryWin 在做的事。