语义化HTML5标签进阶：少即是多，避免误用才能提升SEO

用对也用好：结构化语义HTML5标签的正确姿势

如果你还不确定什么是语义化HTML5标签，它们有什么用，以及为什么它们对帮助搜索引擎理解你的内容至关重要，建议先阅读我之前的文章《用好语义化HTML5标签，让搜索引擎秒懂你的页面重点》。那篇文章会给你一些基础概念和示例。

这篇文章咱们来聊点进阶的：如何正确且审慎地使用这些标签，避免常见的误区。

一个普遍存在的问题是，即使开发者们在页面标记和结构化数据方面越来越细致，但在使用语义化HTML5标签时，往往还是显得随意甚至过度。

为什么会这样？我觉得主要有两个原因：

1. 难以直观看到效果: 不像CSS样式那样立竿见影，语义结构对普通用户不可见，开发者很难直观感受其影响。这也是我开发了一个小工具（文末有链接）来可视化语义结构的原因。
2. 某些标签行为类似<div>: 像<section>, <article>这些标签本身也是块级元素，这让开发者很容易就顺手用它们来替代<div>进行页面布局和视觉分块。这其实是个设计上的小缺陷，如果这些标签像<span>一样默认完全不影响布局就好了。

为什么滥用语义化HTML5标签反而有害？

语义化标签的核心作用是向搜索引擎的页面分析算法传达页面不同内容块的角色和重要性。你可以用它们来"划重点"，引导搜索引擎关注最重要的内容。

但反过来想，如果你给所有内容都加上了各种语义标签，那就相当于没有重点，反而稀释了真正核心内容的重要性。

其实，我们通常只需要用这些标签告诉搜索引擎三件事：

1. 页面的页眉 (Header) 在哪里。
2. 页面的页脚 (Footer) 在哪里。
3. 夹在中间的核心内容 (Main Content / Article) 是哪部分，这是当前页面独有的、最重要的信息。

有时，我们可能还需要标识出一些与核心内容相关但并非其主体的辅助内容 (Aside)。

通常情况下，用好 <header>, <footer>, <main>, <article>, <aside> 这几个关键标签就足够了。一个典型的、简洁有效的结构可能就像下图这样，只需要6、7对标签：

看到了吗？非常简洁。对于绝大多数网页来说，这样就够了。

你可能注意到了，上图中缺了一个很常见的HTML5标签：没错，就是 <section>！这是最容易被滥用的标签之一，下面我们就来详细说说。

第一部分：语义标签的正确用法与常见误区

最常见的错误，就是把语义标签当成<div>的替代品，用来创建视觉结构块。这不仅偏离了它们的本意，还可能向搜索引擎传递错误的信号。

看看下面这个用我的标签查看器分析的例子：

这是页面<main>区域的一部分，位于<header>和<footer>之间。我们看到了包含<h1>的<article>标签，这非常好，表明了核心内容区域和主标题。

但是，在<h1>周围，充斥着大量的<section>标签。我们就得问了：这些<section>在这里干嘛？它们各自代表了什么独立的主题块吗？

<section>标签的语义是：将一篇文章（<article>）或一个独立的内容区域，根据主题逻辑分解成若干个自成体系的部分。如果像上图那样随意使用，搜索引擎就会"懵圈"——你到底想告诉我哪部分是重点？哪部分和哪部分是并列的子主题？

如果搜索引擎不确定你的意图，它就不会轻易给予好的排名。

<section> 的正确用法示例

什么时候用<section>是合理的呢？

假设你在写一篇关于某款手机（比如三星Galaxy Z系列）的评测文章 (<article>)。你完全可以像下面这样使用<section>：

这里，每个<section>都围绕一个明确的子主题（设计、屏幕、相机、性能、电池），并且每个子主题都相对独立完整。即使把其中一个<section>单独拿出来，它也能作为一个有意义的信息块存在（甚至可能成为谷歌搜索结果中的特色片段）。

虽然用<h2>标签也能在视觉上分隔内容，但使用<section>包裹这些逻辑块，感觉就像给搜索引擎打了个更清晰的"包"，告诉它："嘿，这几块内容是并列的、关于这篇文章不同方面的重要论述。"

总结<section>的正确用法：

• 用在<article>内部（或其他代表独立内容区域的元素内）。
• 用来根据主题逻辑划分内容，而不是视觉布局。
• 每个<section>都应该有一个明确的标题（通常是<h2>-<h6>）。
• 每个<section>的内容应该相对独立和完整。
• 避免在没有明确主题逻辑分组需要时使用<section>。
• 绝对不要用<section>来替代<div>做通用布局容器。

关于 <article> 和 <aside> 的进一步说明

<article>标签表明其包含的内容是独立的、自成体系的，理论上可以被单独分发或重用（比如一篇博客文章、一篇论坛帖子、一篇新闻报道或一个用户评论）。

但有时也会遇到层级问题。比如下面这个产品页面的例子，页面底部的"相关产品"推荐区域也被放进了<article>标签：

上图中红色框是页面主要产品介绍的<article>的结束。如果下面的"相关产品"也用<article>，并且没有其他标签区分，那它们在语义层级上就可能与主要内容平级了。这显然不符合我们的意图。

为了降低这些次要内容的重要性，并明确它们与主要内容的关系，我们应该使用<aside>标签将它们包裹起来，就像这样：

<aside>标签的语义是：包含与周围主要内容相关，但本身又相对独立的内容。可以把它理解为"旁注"、"补充信息"或"侧边栏内容"。用它包裹相关产品、相关文章链接、广告、作者简介等，都是合适的。

关于多个 <h1> 的争议

HTML5规范理论上允许在不同的<section>或<article>中使用多个<h1>。但从SEO最佳实践的角度来看，强烈建议一个页面只使用一个<h1>标签。

<h1>是页面最重要的标题，是向搜索引擎传递页面核心主题的最强信号。使用多个<h1>很可能会分散权重，让搜索引擎对页面的核心主题产生困惑，而不是更清晰。

保持简单，坚持每个页面一个<h1>。

语义标签使用的决策流程（简化版）

其实很简单，遵循以下步骤即可：

1. 确定页眉: 用 <header> 包裹网站的头部区域，通常包含Logo、主导航、搜索框等。
2. 确定页脚: 用 <footer> 包裹网站的底部区域，通常包含版权信息、次要链接、联系方式等。
3. 确定主内容区: 用 <main> 包裹夹在<header>和<footer>之间的所有核心内容区域。<main>标签在一个页面中也应该是唯一的。
4. 确定核心内容单元: 在<main>内部，用 <article> 包裹当前页面独有的、最重要的、自成体系的内容。确保页面的**唯一<h1>**位于这个<article>内部。
5. 识别辅助内容:
   • 在<article>内部，如果有些内容与核心内容相关但并非主体（如配件推荐、相关文章链接、FAQ、作者信息），用 <aside> 包裹它们。
   • 在<article>外部但仍在<main>内部的内容（如侧边栏导航、不直接相关的促销信息、热门文章列表、邮件订阅框等），也用 <aside> 包裹，以明确它们与核心<article>的区别和次要地位。

遵循这个流程，你可以构建出类似下面这个清晰、简洁、对搜索引擎友好的通用布局：

对于绝大多数网页，这个结构足够用了。关键在于简洁和明确，不要画蛇添足。

第二部分：用其他语义标签为文本元素"加点料"

除了上述主要的结构性标签，HTML还提供了一些行内语义标签，可以帮助我们更精确地标记文本片段的含义，同样对SEO和可访问性有益。

但在开始之前，先明确一点：老式的 <b>, <i>, <u> 标签，它们只提供视觉上的加粗、斜体、下划线效果，没有任何语义含义，对SEO完全没有影响！ 应该用CSS来实现这些视觉样式。

现在来看看有用的语义标签：

• <strong>: 表示内容具有重要性 (Importance)。搜索引擎会认为<strong>包裹的内容比普通文本更重要一些。谨慎使用，过度使用会稀释效果，而且视觉上可能很突兀。
• <em>: 表示强调 (Emphasis)。如果朗读文本时，某个词或短语需要特别重读，可以使用<em>。它通常显示为斜体。
• <mark>: 表示标记或突出显示 (Highlight)。用于引起对某段文本的注意，比如搜索结果中的关键词高亮，或者列表中的推荐选项。它通常会给文本加上黄色背景。
• <abbr>: 表示缩写或首字母缩略词 (Abbreviation)。可以使用title属性提供全称，有助于消除歧义。比如"SEO"可以写作 <abbr title="Search Engine Optimization">SEO</abbr>。
• <figure> 和 <figcaption>: <figure>用于包裹独立的插图、图表、代码片段等（通常是图片），而<figcaption>则为其提供标题或说明。这对图片SEO很有帮助，因为<figcaption>的内容可以被搜索引擎提取并与图片关联，甚至显示在图片搜索结果中。
• <ul> 和 <ol>: 无序列表和有序列表。虽然不是严格意义上的语义标签，但它们清晰地告诉搜索引擎"这是一组相关项目"。<ol> 尤其明确地指出了项目的顺序性。列表格式的内容也更容易被搜索引擎理解，并可能获得在搜索结果中以列表形式展示的机会。
• <table> 和 <caption>: 用于展示表格数据。表格是呈现结构化数据的绝佳方式。当表格标记正确（使用<thead>, <tbody>, <th>等）并**配有明确的<caption>（表格标题）**时，搜索引擎能够非常好地理解其内容。带有<caption>的表格，即使脱离上下文，其含义依然清晰。这种清晰的结构深受搜索引擎喜爱，是获得搜索结果特色片段（如直接答案、表格片段）的有力竞争者。看下面的例子：

这个表格因为有了<caption>，我们立刻知道它是关于"2019年英国城市人口"的。<th>（表头单元格）清楚地定义了每一列的含义。这种结构化信息对于搜索引擎来说价值极高。

结论：语义清晰，少即是多

记住，在页面中使用过多的、混乱的语义标签，其效果和完全不用一样糟糕，甚至可能更差！

HTML5语义标签的真正价值在于：

1. 清晰地告诉搜索引擎：页面的哪些部分是核心内容，哪些是辅助或次要内容。
2. 帮助搜索引擎消除歧义：更准确地理解页面主题和内容结构。
3. 提升获得富媒体摘要的可能性：对于列表、表格等结构化内容。

最终目标是让搜索引擎更有信心地理解你的页面，从而更愿意给予好的排名。

所以，使用语义标签时，请务必保持简洁、准确、有目的性。少即是多。

资源

• 关于语义元素的详细官方文档，可以在 W3Schools 网站 找到。
• 想直观地查看网页的语义HTML5结构？可以试试我写的小工具：Semantic HTML5 Viewer。