SEO 百科

HTML 基础

本页目录

HTML 基础

HTML 是描述网页内容与结构的标记语言，浏览器和搜索引擎都通过它读取页面上的文字与链接^[1]。做 SEO 的人要了解它，原因很直接：爬虫抓回来的是 HTML 源码，标题、正文、内链这些能被收录的东西，全都写在源码里。源码结构写得乱，爬虫解析出来的页面和访客看到的不一致，收录结果就会跟着变^[3]。

页面的组成

一个页面从 <!DOCTYPE html> 开头，告诉浏览器这是一份 HTML5 文档。<html> 根元素紧随其后，里面分成两部分。

<head> 装机器读的信息，例如标题、字符编码、样式表和脚本；
<body> 装访客能看到的内容，例如正文、图片和链接。

元素由开始标签、内容和结束标签组成。<p>段落文字</p> 里的 <p> 是标签，中间的文字是内容。元素按包含关系层层嵌套，组成一棵树，浏览器和爬虫都按这棵树处理页面，这棵树叫文档对象模型（DOM）^[2]。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>正文大标题</h1>
    <p>正文段落，可以放 <a href="/next">链接</a>。</p>
  </body>
</html>

爬虫拿到的那份文件

爬虫抓取时发出一次请求，服务器返回 HTML 源码。抓取这一步拿到的是源码，不是渲染之后的页面。

引擎先解析这份源码，从 <a> 的 href 里发现其他网址，再把它们放进抓取队列^[3]。百度把这一步概括为从互联网抓取网页、建立索引数据库、把索引库中的数据展现给用户^[4]。

渲染发生在之后。浏览器执行 JavaScript，把源码变成最终的 DOM，图片和异步内容此时才出现。源码里没有的内容，只有等渲染完成才可能被看到。

嵌套错误与容错解析

HTML 有容错机制。标签忘了闭合，或者顺序错位，浏览器仍会尽量解析，页面上看起来可能还没有问题。

容错的结果却不一定合意。<p> 里放一个 <div>，浏览器会把段落提前闭合，<div> 落到段落外面，DOM 结构与源码对不上。表格里漏写 <tr>，浏览器会自行补上，补出来的结构也和源码不同。

结构与源码不一致时，引擎读到的主次关系会变。内容所处的层级、链接与正文的相对位置，都可能被重新判定。

与抓取和收录的关系

重要内容要写成文本。标题做成图片，这段文字就不在源码里，抓取阶段读不到。

链接要写成可抓取的形式。Google 说明，只有当链接是带 href 属性的 <a> 元素时，它才能发现这些网址^[3]。用脚本跳转，爬虫发现不了新页面。

结构清晰还有一层好处。正文、导航、页脚各归各的元素，爬虫更容易判断哪一块是主体内容。

常见误用

全页用 <div> 堆出来，正文和导航分不出主次。
把大标题做成图片，源码里没有这段文字。
正文由 JavaScript 现场生成，原始 HTML 里是空的。
用过期的 <table> 布局拼版，容错后结构全变。

附录

参见

参考资料

官方（境外）

《HTML（超文本标记语言）》，MDN Web 文档，2025-11-10 更新。
《HTML Living Standard》，WHATWG，2026-10-06 更新。
《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

官方（国内）

《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。