「知识」HTML语义元素含义与SEO详细讲解

耐心点、坚强点，总有一天，你承受过的疼痛会有助于你，生活从来不会刻意亏欠谁，它给了你一块阴影，必会在不远地方撒下阳光。

今天给各位同学具体讲解这些HTML语义元素在SEO中都包含哪些意思，到后期SEO优化将会越来越重视细节优化，希望各位同学能在这节课中学到新的知识。 — — 及时当勉励，岁月不待人。

HTML语义元素含义介绍

时本文总计约 2000 个字左右，需要花 8 分钟以上仔细阅读。

上期我讲过HTML语义元素构建网页的一些基础知识“SEO深入学习---HTML语义介绍”，没有看的同学可以先看看这篇文章。

如果各位同学对HTML有所了解，那么就会知道HTML标签（大部分）用于格式化内容; 这些标签告诉浏览器如何在页面上显示内容。

一些标签传达语义信息（即含义）。以下是您需要了解的语义HTML5最有用的标签。

接下来，各位同学请继续阅读来了解下每种方法的正确用法。

1

H1到H6=标题

我相信每个人都应该知道<H>标签。H标签将主体内容分解成子主题和子子主题。<h1>描述了整篇文章所涵盖的主题。在这之下，其他<h>标签用于给子主题分级。所以每个<h2>都是整个主题（父<h1>标签）的一个不同的子主题。每个<h3>都是其父<h2>的子主题 - 因此是该子主题的子主题。

<h>标签非常强大，因为它们识别内容的关键子主题，它们的相对重要性以及它们之间的关系。这是很多正在传达的语义信息。这是非常值得我们来花时间更深入的去理解H标签的含义。

但是，在目前来说，我看到过许多网页并不尊重<h>标签的语义。例如，直接从<h1>跳到<h3>，或是运用多个H1标签，还有的就是H2-H6标签包含的内容根本就与H1标签包含的内容毫无关联。这些做法，各位同学千万不要这样做。在语义上使用<h>标签来表示结构并使用CSS /类来控制文本的视觉方面。

提示：虽然标题从H1到H6都可以使用，但使用H5和H6的时候几乎不存在。一旦你达到H4，我们就要问问这些内容真的就与主体相关吗？真有这么多子主题吗？

在语义上使用标签，例子：

重要！上例中文本的颜色，大小和水平位置与标签的语义完全无关。

在语义上，下面的HTML是完全一样的东西。

在本文中请记住，语义HTML标签中文本的可视化表示不会影响这些标签传递给机器的语义含义。

2

strong标签=重要

如果一个关键词或是一句话在该段落中或全文中比较重要，那么请使用<strong>标签而不是<B>标签。

对于strong标签的意义来说，我们千万不要过度使用该标签，要不然会导致搜索引擎误认为过度优化的嫌疑。谨慎使用并正确使用。

3

em标签=重点、强调

如果为了使句子更有意义，应该更多地强调一个关键词或多个关键词，然后使用<em>标签。

其实，在有些阅读器中遇到这个标签时，他们会强调他们的（机器人）声音。

4

mark标签=突出显示的文本内容

这用于标记（或突出显示）文本，由于该段内容在上下文的适用性很强，因此可以引起读者对文本的关注。例如突出显示问题的简短答案。

5

del/ins标签=初始发布后删除的文本/初始发布后插入的文本

您可以使用它来指示更新和修改; 结合<del>使用<ins>，这两个标签对于我们来说应用的比较少，只做些了解即可。

6

abbr标签=缩写/首字母缩略词

这种用法较少，但对消除歧义很有用（歧义对搜索引擎而言是一个巨大的问题）。把这个标签放在“世卫组织”一词中明确表明我们正在谈论世界卫生组织。

7

cite标签=定义作品的标题

在HTML5中，标签内的文字代表一个人的名字或作品的标题（例如书，论文，散文，诗歌，乐谱，歌曲，剧本，电影，电视节目，游戏，雕塑，绘画，戏剧制作，戏剧，歌剧，音乐剧，展览等）。

在上面的例子中，我们明确指出我们正在谈论这本书。

8

blockquote标签=定义一个摘自另一个源的块引用:

<blockquote>应包含一个<cite>标记以指示原始来源。您可以使用链接元素（读者不可见）链接到blockquote标签中的原始源，或显示标识原始源的文本（最好使用链接）。不过该标记用的还是比较少的。

9

q标签=定义一个短的引用

<q>标签更适合简短的引用。浏览器通常使用引号括住<q>文本。如果引用跨越多行，则应使用<blockquote>标记。

10

figure figcaption标签=图形标签说明元素

<figure>标记用于包含周围内容一部分的独立内容。就我们的目的而言，这意味着图片、图标等，可以在图片的上方或下方添加标题 - 只需将<figcaption>标签放入<figure>标签内，如上所示。

11

ul ol标签=图形标签说明元素

不严格的语义，虽然不能夸大有序和无序列表的用处。但它们是结构化，因此搜索引擎消化和理解起来非常简单。

<ul> =无序

<ol> =有序（我一般喜欢用这个）

12

HTML语义标签是不包含B/I/U标签

虽然这些都是仍然有效的HTML，但语义上无用，并没有带来SEO的好处。

最滥用（且无用）的HTML标签：<b>

第一个（也是最常见的）错误是使用粗体作为SEO技巧来“提升”关键字。但是它是没有多大用处的。

最令人困惑的HTML标签：<i>

斜体也是“提升”关键字的SEO技巧。同样它也是没有什么用处的。

最具误导性的HTML标签：<u>

下划线有时被用作SEO技巧来“提升”关键字。它也是没有什么用处。

<i> <b> <s> <u>标签没有带来SEO价值，并且对于所有意图和目的而言，都是多余的。

在99％的案例中，本文中描述的语义HTML5标记之一更合适，应该用来代替。

总结：

正确使用语义HTML5已经非常重要，并且在未来几年会变得更加如此。百度、谷歌（以及其他抓取工具）在识别内容的性质时只能完成一半的工作。黄伟老师可以在这告诉你：“标记正确语义的内容的页面，机器人就越容易处理理解它。”

目前，大多数SEOer不知道如何使用语义HTML5标签，并使用（错误的）非语义标签。希望这次所讲的内容，能让各位同学对HTML语义元素有更深刻的理解。

您的关注与分享就是我最大的动力