HTML在页面中的作用就是结构和语义，它通过标记符号来标记要显示的网页中的各个部分，就像是页面的骨架。对一个页面来说，提供一个简洁而又结构分明的HTML是非常必要的。HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
为什么要语义化
- 能让页面呈现清晰的结构
- 有利于网页在PDA、手机等移动设备上更好的呈现,因为这些设备对CSS的支持较弱,使用语义标记可以确保这些设备以一种有意义的方式来渲染网页
- 有利于SEO,使代码被搜索小蜘蛛更容易的读懂。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重
- 语义化的代结构更易于阅读，便于团队的开发和维护
- 能让你写出更加优雅的代码
常用的语义化标签
一、语义化页面结构
-
<header></header>
用来声明整个页面或任意“section”的头部部分 -
<nav></nav>
用于定义页面的主要导航部分 -
<section></section>
代表文档中的“节”或“段” -
<footer></footer>
用来声明整个页面或任意“section”的底部部分；
二、语义化页面内容
-
h1-h6
这个不用多说吧； -
<hgroup></hgroup>
可以用于有连续多个h1-h6标签的情况，比如文档大纲 -
<aside></aside>
用于主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。 -
<article></article>
article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。 -
<time></time>
标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的 -
<mark></mark>
标签定义带有记号的文本。请在需要突出显示文本时使用<mark>标签。 -
<figure></figure>
规定独立的流内容（插图,图标、源码等等）。该元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响 -
<figcaption></figcaption>
定义 figure 元素的标题 -
<abbr></abbr>
标记一个简称或缩写 -
<address></address>
定义文档或文章的作者/拥有者的联系信息。
如果<address>元素位于<body>元素内，则它表示文档联系信息。
如果<address>元素位于<article>元素内，则它表示文章的联系信息。 -
<strong></strong>
强调内容 -
<cite></cite>>
通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。 -
....
浏览器支持
很多语义化标签是html5的规范，当然IE7/IE8是不支持这些新标签的，所以如果项目中是需要兼容到IE8及以下的，就放弃H5标签吧。（仅指语义化这一块）
如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！
>>>>点击阅读原文