标签语义化详解

来源：互联网发布：2k16本西蒙斯捏脸数据编辑：程序博客网时间：2024/05/19 01:07

* 一、什么是标签语义化？*
对于标签语义化我觉得百度百科对它的定义我是很接受。百度百科对它的解释为：

    首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。

上面的定义中首先解释了语义与默认样式的区别。默认样式是浏览器显示标签的规则，语义是让人直观地懂得标签里面的内容代表什么。然后用Hx标签举例。
当然你也可以从功能的角度去理解语义化标签：

语义化标签是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

* 二、标签语义化的优点*

i、为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
为了更好理解我们看着两段代码效果：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签语义化</title></head><body>    <table>       <tr>          <td>学校</td>          <td>姓名</td>      </tr>      <tr>          <td>深圳大写</td>          <td>周运金</td>      </tr> </table></body></html>

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签语义化</title></head><body>    <table>        <caption>身份信息</caption>        <thead>            <tr>                <th>学校</th>                <th>姓名</th>            </tr>        </thead>        <tbody>            <td>深圳大学</td>            <td>周运金</td>        </tbody>    </table></body></html>

这里写图片描述
第一段代码明显没有很好利用标签语义化，所有在代码结构上不易读，
在内容结构上也体现了不出表的标题和表头等信息。第二段代码用caption标签标示表明内容，用thead、th标签标示表头，用tbody标示表格内容，这样的代码结构是非常明朗的。内容表现上有表名，对表头也进行了颜色的加深，有助于理解。所以在没有css样式修饰的时候，后者无论是在代码结构上还是在内容表现上都比前者好。

* ii、有利于SEO(Search Engine Optimization,搜索引擎优化)*
我们都知道爬虫依赖于标签来确定上下文和各个关键字的权重。所以标签语义化可以与搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息

iii、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
屏幕阅读器、盲人阅读器对于网页的分析也是通过标签进行处理的，利用语义化标签能很好地展示出网页的结构，从而能让屏幕阅读器、盲人阅读器获取的内容更加准确。由于在移动设备上对css的支持比较弱，这时候采用语义化标签能更好地展现内容。

iiii、便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
代码的可读性对于团队开发来说是非常关键的。再者跟着标准走永远是好的，W3C是我们的风向标。

三、对于常用标签的语义理解

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>是行内元素，前者的内容会自动换行，而后者前后不会自动换行 http://www.cnblogs.com/coco1s/p/3578947.html）7.<q>、 <blockquote>、<cite><q>标签的语义为用来标记简短的单行引用，Web浏览器会自动识别在<q>之间的内容<blockquote>标签的语义为用来标记那些一段或者好几段的长篇引用<cite>标签既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。看一个例子1 <p> <cite>孔子</cite>曰：<q>有朋自远方来，不亦乐乎</q>.2 </p>1 <blockquote>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是表示插入，也有这样的属性。

HTML5添加的新语义化标签
用一张图能很好地了解：
这里写图片描述
1、header
header 元素代表“网页”或“section”的页眉。通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。如：

<header>    <hgroup>        <h1>网站标题</h1>        <h1>网站副标题</h1>    </hgroup></header>

2、footer元素
footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。如：

<footer>    COPYRIGHT@周运金</footer>

3、hgroup元素
hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。比如：

<hgroup>    <h1>HTML5语义化标签</h1>    <h2>HTML5</h2></hgroup>

4、nav元素
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
比如：

<nav>    <ul>        <li>HTML</li>        <li>CSS</li>        <li>JavaScript</li>    </ul></nav>

5、aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
比如：

<article>    <p>article content</p>    <aside>        <h1>语义化</h1>        <p>语义化十个好东西</p>    </aside></article>

6、section元素

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：

<section>    <h1>HTML5语义化</h1>    <article>        <h2>降级处理</h2>        <p>section的介绍</p>        <section>            <h3>降级处理</h3>            <p>我是内容我最小</p>        </section>    </article></section>

7、article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。我们举几个例子介绍一下article，更好区分article、section、div

<article>    <h1>文章标题</h1>    <p>文章内容</p>    <footer>        <p>页脚内容</p>    </footer></article>

<article>    <header>        <h1>文章头部</h1>        <p>文章头部说明</p>    </header>    <p>文章内容</p>    <article>        <h2>评论</h2>        <article>            <header>                <h3>评论者: 周运金</h3>                <p><time>one hour ago</time></p>            </header>            <p>评论内容</p>        </article>        <article>            <header>                <h3>评论者: 李佳家</h3>                <p><time>two hour ago</time></p>            </header>            <p>评论内容</p>        </article>    </article></article>

总结：
语义化有以下优点：

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

一个网页相当于一个画中的树，html结构相当于这个数的枝干，而标签则是这个枝干上的果实叶子，css则是颜料，用来装饰这幅画的整体风格，
HTML标签语义化相当于将果实和叶子用不同语义的标签将它们区分开来，让别人在看这幅画的时候，一眼能够明白哪部分代码的是果实，哪部分代表的是叶子。（这句话摘抄自http://blog.csdn.net/baoendemao/article/details/52348458，总结的很好）

0 0