HTML的标签（tags）都是具有一定含义的（http://w3school.com.cn/html5/html5_reference.asp）。如： <img /> 表示图像，<p> 代表段落，<ol> 代表有序列表等。
这种标签的 语义化 （Semantic），是HTML在制定的最初就一直遵守的规则，用来将文本等信息结构化，从而方便理解和使用。
- 有利于搜索引擎的检索（SEO）
有利于搜索引擎对网页的结构和内容的分析，更容易查找到关键信息。 - 便于人的理解
结构化的 HTML 文档，更容易被人理解。统一的编写标准，也便于团队协作和进行传播。 - 脱离样式时仍然结构清晰
去掉或丢失样式时，仍保持默认样式，不影响页面的可读性。对于无法有效执行 CSS 的特殊设备，也会保持可读的结构。 - 有利于特殊群体的阅读
很可能有访问者需要借助屏幕阅读器等设备来识别网页内容，语义化的页面更容易将有效信息分离出来。
早期的开发者为了使页面具有丰富的布局，往往使用 <table> 将页面划分成多个部分，甚至嵌套多个 <table> 来实现特殊布局，这是Web开发最黑暗的时期。<table> 标签的作用是以表格的形式呈现数据，而不是用来进行页面布局。
在CSS的功能增强之后，又出现了大批 “DIV+CSS” 的倡导者（决定写这篇文章之前，我也是其中之一）。虽然这种方式结束了使用 <table> 进行布局的错误，但仍旧没有很好的遵循标签语义化的规则。<div> （division）代表了分隔和区块的意思，由于仅有 display:block 这一个默认属性，因此用它来进行页面的布局最为合适。但在页面内容上，最好使用 <h2> <p> 等具有语义的标签，使页面的内容可识别。
在近几年的发展中，网页编写风格逐渐趋向统一。
根据 Google 的分析数据（https://developers.google.com/webmasters/state-of-the-web/2005/classes），有许多网站都在使用相同的 class name 来命名页面元素。这些元素是大部分网站需要的，但HTML中并没有匹配的元素可用，所以大部分都是使用 <div> 来编写的。
在 HTML5 中，规则的制定者认识到了这个普遍存在的问题，并增加了许多与 <div> 类似的，但更加语义化的标签（http://w3school.com.cn/html5/html5_reference.asp）：
<header> 代表页眉
<footer> 代表页脚
<nav> 代表导航链接
<article> 代表页面主体（如文章）
<aside> 代表非页面主体（如侧边栏）
<menu> 代表表单菜单
等等。
同样，由于 HTML5 以标签语义化作为指导，也相应的抛弃了一些非语义化的标签（这些标签在 XHTML1.0 中，也是不推荐使用的）：
<center> 定义文本居中
<font> 曾用于定义文本的样式
<s>、<strike> 曾用于定义带删除线的文本
<u> 曾用于定义带下划线的文本
等等，建议完全使用 CSS 代替其功能。
还有另外一些标签的含义和作用被重新定义或区分了：
<strong> 表示文本的重要（文本显示为加粗效果）
<b> 文本显示为加粗效果
<em> 表示阅读时，需要使用强调的语气（文本显示为斜体效果）
<i> 文本显示为斜体效果
###语义化标签应用指导
对于比较常见的类 Wordpress 模板，可以使用如下的结构安排页面：
左侧使用了 HTML4 风格的 <div> 标签布局，右侧使用了 HTML5 的语义化标签布局。语义化的标签更加简洁和直观，更容易理解其含义。
可能会有人担心：HTML5 尚未成为推荐的标准，是否会存在兼容性问题？答案是肯定的。不过，无法支持 HTML5 的浏览器已经很少了（http://caniuse.com/#feat=html5semantic），是时候加速它们的死亡了。所以，完全可以大胆地尝试新的语法了。
参考链接：
1.http://www.cnblogs.com/yhongyu/archive/2012/06/01/2530891.html