HTML5语义化标签的用法和对SEO的影响

HTML5语义化标签的用法和对SEO的影响

分类: SEO代码优化 作者:网络 阅读量:

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

但是就个人而言,因选取一些标签时会比较纠结,所以仍使用了div。

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

Html5语义化优点:

  1. 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。

  2. 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。

  3. 方便其他设备解析,如盲人阅读器根据语义渲染网页

  4. 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

先介绍主体结构标签,如图所示:

网页结构图

HTML5语义化标签参考图

HTML5语义化标签介绍和用法:

1、header

header定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个header元素,但需要注意的是header元素不能作为address、footer 或 header 元素的子元素。

2、nav

nav描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中,可定义多个nav元素。

3、main

main定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

需要注意的是在一个文档中不能出现多个main标签。

4、article

article元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

当article元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的article元素可嵌套在代表博客文章的article元素中。

5、aside

aside元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、footer

footer定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时,应在 footer 元素内使用 address 元素。

注意不能包含footer或者header

7、section

section表示文档中的一个章节,比如,内容中的一个专题组。

不要把 section 元素作为一个普通的容器来使用,特别是当section仅仅是为了美化样式或方便脚本使用的时候,应使用div。

这几个标签,比较容易混淆的是section、article,所以这里特别说明:

鼓励作者使用article元素而不是section元素,因为将元素的内容联合起来是有意义的。

通俗来说就是article比section更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。

本站注:

很多网站上关于html5的理解很片面,包括本章内容,这里只是了解一下html5一些标签的意义!