1、语义化HTML标签：

1）HTML告诉我们的是一块内容是什么（或其意义），而不是它长的什么样子。

2）写语义化的HTML结构其实很简单，首先要掌握HTML中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

2、常用标签分类：
1）、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题来使用，并且依据重要性依次递减。<h1>是最高的等级，常用的是h1至h3。

2）、<p></p> 作为段落标签，就不会再使用<br />来换行了，不需要<br /> 来区分段落与段落。p中的文字会自动换行，段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。

3）、<ul>无序列表，这个被大家广泛的使用，<ol>有序列表也有常用。在web标准化过程中，<ul> 还被更多的用于【导航条】，相同结构的分类标签使用。

4）、自定义列表：<dl>、<dt>、<dd> 通常自定义列表要比无序列表和有序列表用的少一些，如果需要解释一系列术语与解释的列表时，使用自定义列表就是很好的方法。

1
2
3
4
5
6
<dl>
    <dt>列表中每个元素的标题</dt>
      <dd>列表中元素的内容</dd>   
      <dd>列表中元素的内容</dd>
      <dd>列表中元素的内容</dd>
</dl>

5）、<em>、< strong >强调标签：

1)、em表示强调，strong表示更强烈的强调。并且在浏览器中，em默认用斜体表示，strong 用粗体表示。

2）、em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。

3）、em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。
em 是句意强调，加与不加会引起语义变化。
strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。

6）、合理使用

：如今，
的本义应当用作数据列表的地方，对于一些数据处理用
显得更加有序化和语义化。
详情信息：http://www.smallni.com/talk-about-semantic/
caption 标签 – 定义HTML表格的标题

标签用于对表格中的列进行组合，以便对其进行格式化。```
``` 标签只能在 table 元素中使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
tabel属性：
 Common -- 一般属性
 summary -- 代表表格的摘要说明
 width -- 代表表格的宽度
 border -- 代表表格边框(此属性应该使用CSS实现)
 cellspacing -- 表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
 cellpadding -- 内容填充的宽度(此属性应该使用CSS实现)
```html
<table>
   <caption>表格标题</caption>
   <tr>
      <td>表格列</td><td>表格列</td>
   </tr>
</table>

3、为神马要语义化？

手持移动设备的无障碍阅读

手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱，这时可能就需要更语义的标签来体现一个页面的易读性

盲人等一些障碍人士的阅读

屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性

搜索引擎的友好收录

虽然各大搜索引擎的排名规则不断的再变化，但规则里的正则始终是要匹配标签的，如果能用更语义的标签，蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。

技术趋势所趋

正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签，原本用<div id=”header”></div>来实现的结构，通过html5的<header>标签我们可以更完美的表现。

便于团队项目的可持续运作及维护

语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。