「知识」SEO深入学习---HTML语义介绍

我们现在经历的那些，无论好的坏的，全部都是微不足道的小事。度过那些摇摇晃晃的日子，所有艰辛也会内化成为力量，留下闪光又珍贵的回忆和一路上坚韧不拔的勇气。

今天给大家讲解一个看似与SEO关系不大的知识点，在下面的讲解中，也许你就能感觉到它的重要程度了。接下来各位同学直接往下看吧，有任何问题，可以直接给我留言。 — — 及时当勉励，岁月不待人。

文档结构语义HTML5介绍

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

文档结构语义HTML5，其实，在很早就出来了，也许对于前端人员来说，是非常了解了。不过在实际中，却很少有前端人员按照这个来进行操作。在开始讲之前，黄伟老师就跟大家说明下：为什么语义HTML5对SEO也是很重要的？

在这先不谈SEO优化手法，原创文章等等，搜索引擎蜘蛛来抓取一个页面，它看到的是HTML代码，它也只能基于HTML代码来先进行基础的页面分析，它不能像人工一样知道页面，哪个地方的重要的，哪个地方的次要的（也许我们会想到大数据，人工智能来进行综合分析，但我这讲的是最先进行的基础分析）。从有利于提高搜索引擎分析这方面来说，语义HTML5，无疑是规范了HTML写作手法，让搜索引擎（机器）更快更准备的理解相关内容的意思。

通过上面比较简单的解释，相信各位同学都有所明白它的重要性了。下面就给大家具体的讲解下语义HTML5的相关内容。

1

什么是语义HTML5？

对于HTML标签的作用其实就是主要用于格式化内容，这些标签告诉浏览器如何在页面上显示排版内容。但他们没有指出它们包含的内容类型或内容在页面中扮演的角色。

语义HTML5通过定义特定的标签来清楚地表明这些标签包含的内容扮演了什么角色，从而解决了这个缺点。这些明确的信息可帮助Google和百度等机器人/抓取工具更好地了解哪些内容很重要，哪些是附属的等等。通过在页面中添加语义HTML标记，就相当于我们直接给搜索引擎提供其他信息，帮助Google和百度了解页面各个部分的角色和相对重要性。

例如

这些是非语义HTML元素的例子。他们只能向浏览器传达内容应该如何显示。他们没有提供这些内容在网页上所扮演的角色。

这些是语义元素。他们明确界定了他们所包含内容的作用。

2

为什么我需要使用它？

对于用户来说，用眼睛就很容易识别网页的各个部分。标题，菜单和主要内容都非常容易的识别。

但搜索引擎蜘蛛，它是看不到，所以，它想通过视觉来进行查看与理解页面内容，这是很难做到的。

因此，他们需要我们的帮助。如果我们可以明确的告诉搜索引擎，这些页面的哪一部分是页眉，哪些是页脚和哪些是页面用于导航。最重要的是，告诉他们哪些是最重要的内容，你给他们一个明确的指示。

我一直认为成功的搜索引擎优化就是许多许多小细节的累积。这是可以提高搜索引擎对我们网站的内容的理解的小细节之一，这将有助于我们的搜索引擎优化工作。

3

HTML语义元素都有哪些？

语义HTML标签的例子包括<nav>，<footer>和<section>。还有更多可以使用的语义HTML5标签（例如<blockquote>和<em>），但在本文中，我只查看那些需要将页面内容划分为基本部分的语义HTML标签。

以下HTML5标签可用于<div>标签的位置，以将页面内容分解为各自实现特定角色的标识部分。如果都是这样，搜索引擎为什么不喜欢呢。

这种明确的划分和明确的角色归属到内容的每个部分使得页面更加清晰，更加容易为搜索引擎正确编制索引。

注意：由于这些标签的行为完全像<div>标签，因此它们可以简单地替换页面中现有的<div>，而不会影响布局。

语义HTML5的例子

超简单的语义HTML5示例：

这里我们简单地定义了页面的每个部分扮演的角色 - 标题，导航，主要，页脚。

更复杂的例子

在这里我们已经在我们的主要内容中建立了一个层次、有一个涵盖主标签中心内容的全方位文章。这概述了该页面的该部分的主题。在那篇文章中，我们有多个子主题来开发由嵌套部分标识的主题。

相关内容

间接相关

注意：旁边的内容不一定是主要内容旁边的边栏。它也可以用于主要内容下面的块，其中包含标题，文本和指向其他页面的链接

在这里，我们已经确定了与主要内容之外的页面间接相关的内容。在这里我们表明，旁边的内容与主要文章没有直接关系。

有关HTML语义的内容就先讲解到这里，这次讲解的也只是一些基本知识，下期将给各位同学具体讲解这些HTML语义元素在SEO中有什么意思，这样理解下来，希望对你的SEO技能有所帮助。

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