HTML标签语义化

• 标签语义化

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。h1~h6这几个标签在搜索引擎中权值非常高，用它们作页面标题就是一个简单的SEO，知道了这个你还使用DIV+CSS来写标题吗？（不是说直接用h1~h6标签做标题，要这几个标签+CSS）

回到开始时的疑惑，这时候header、footer、sidebar、article等标签的出现就不是那么让人困惑了，HTML5的一大革新就是语义化标签的完善

使用这样结构写出的网页其语义显而易见。在有些面试的时候会问到类似strong 和font-weight: bold有什么区别，这时候就可以从语义化的角度解答了。

1.<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。

 

2.<p>

段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。

 

3.<b>、<em>和<strong>

<b>标签语义为“加粗”

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示，strong 用粗体表示。

当我们知道了这三个标签的语义时，做SEO时就好决定用哪个来强调重要的关键字了，强调用<em>和<strong>，纯粹加粗用<b>。

 

4.<ul>标签、<ol>标签、<li>标签

<ul>标签语义为定义无序列表

<ol>标签语义为定义有序列表

<li>标签语义为定义列表项目

因此当涉及到列表的项目，应该用<ul><li>或<ol><li>（或者是<dl><dt><dd>来布局），而不是用<table>或<p>甚至<span>。

 

5.<dl>标签、<dt>标签、<dd>标签

<dl>标签语义为定义了定义列表

<dt>标签语义为定义了定义列表中的项目（即术语部分）

<dd>标签语义为定义列表中定义条目的定义部分

所以，当我们用带标题的列表时，即可采用<dl><dt><dd>自定义列表实现

 

6.<span>标签

<span>标签的语义为被用来组合文档中的行内元素

（另外应当区分<span>和<div>的区别，<div>是块级元素（block level），而<span>是行内元素，前者的内容会自动换行，而后者前后不会自动换行

 

7.<q>、 <blockquote>、<cite>

<q>标签的语义为用来标记简短的单行引用，Web浏览器会自动识别在<q>之间的内容

<blockquote>标签的语义为用来标记那些一段或者好几段的长篇引用

<cite>标签既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。

看一个例子

1 <p> <cite>孔子</cite>曰：<q>有朋自远方来，不亦乐乎</q>.
2 </p>

1 <blockquote cite="http://www.w3cn.org/">
2  <p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。&#8221;
3 </p>
4 </blockquote>

 

8.<table>、<th>、<td>、<caption>

<table>标签的语义的为定义 HTML 表格

<th>标签的语义为定义表格内的表头单元格

<caption>标签的语义为定义表格标题

 

9.<button>标签、<input>标签、<textarea>标签

<button>标签的语义为定义一个按钮

<input> 标签的语义为用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<textarea>标签的语义为定义多行的文本输入控件

button控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

 

10.<label> 标签

<label>标签的语义为为input元素定义标注（标记）

 

11.<ins>, <del>

<ins>标签的语义为定义已经被插入文档中的文本。

<del>标签的语义为定义文档中已被删除的文本。

<ins>与 <del> 一同使用，来描述文档中的更新和修正。知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。