---

我对HTML5语义化的理解

---

之前学习的是HTML的各种标签，后来接触到HTML5，新增了好多语义化的标签，下面就简单总结一下：

谈及语义化，我到目前为止的理解，就是把合适的标签用到合适的地方去，方便机器阅读，更方便人阅读。当然语义化这东西不是一天就能掌握的，它所包含的内容很多，需要一个过程慢慢理解，追求最佳的语义化是我们每一个做开发的人的基本素质。

谈谈我对WEB语义化的看法？

1. 说一下个人的看法：

所谓 web 语义化，从广义上来说，不仅要使机器（搜索引擎等）易于理解，也要使人易于理解。在团队协作开发中，对人的易于理解显得尤为重要了，一个莫名其妙的 class 会让后续的开发或者维护者一头雾水，增加了协作成本。

2. 然后抽象的说下语义（Semantic）的概念：

“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”

那么web语义化也可以简单的理解为：用特定的语言来定义特定的事物。

3. 在这里我要说一说被神话的DIV！！！

首先DIV只是一个容器，没有实际的含义，而在早期我见过有人的代码通篇都是DIV，看的我一脸懵逼，HTML5新增的语义化标签，使得文档结构更加清晰化，比如使用<header>、<artical>、<nav>、<section>、<footer>等标签来定义文档的头部、内容、导航条、局部块、底部，虽然这些都可以用一个个<div>全搞定，但是前者更加的清晰明了结构分明，而且也不用再专门的定义一个class类，
虽然对于用户来说，页面没有太大的变化，但对于前端开发人员无疑是非常友好的，方便管理和调试。

4. 语义化趋势：

浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。

搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。

但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。

W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。

为什么要语义化？

首先，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。

搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。

语义化的好处？

• 语义化的代码更小，下载也就更快了。
• 能够更加快速的帮助新的前端工程师理解我们的代码。
• 语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。
• 语义化代码有助于SEO引擎的搜索。
• 当然语义化代码也是我们能力的体现。
• 语义化的代码具有更好的亲和力，更主要的是逐渐使网页标准化。

怎样进行web语义化？

1、html语义化

一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。

换句话说，不要让css使一个html元素看起来就像另一个html元素，比如用<div>来代替<p>标记标题。

简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong> ,<em>用来区别于其他文字，起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明显的告诉你他们是做什么的。如：

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

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

段落与段落之间的空隙也可以利用css来控制，很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。

2、css命名语义化

一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

HTML5新增了哪些标签？

新增的语意化标签，可以帮助构建更好的文档结构：

比较常见的有：
<header>    //定义文档或节的页眉
<article>   //定义文档内的文章
<nav>   //定义文档内的导航链接
<aside> //定义页面内容之外的内容
<section>   //定义文档中的节
<footer>    //定义文档或节的页脚
<time>  //定义日期/时间
<mark>  //定义重要或强调的内容
<progress>  //定义任务进度
<bdi>   //定义与其他文本不同的文本方向
<dialog>    //定义对话框或窗口
<summary>   //定义 <details> 元素的可见标题
<details>   //定义用户可查看或隐藏的额外细节
<bdi>   //定义与其他文本不同的文本方向
其他不常用的：
<figcaption>    //定义 <figure> 元素的标题
<figure>    //定义自包含内容，比如图示、图表、照片、代码清单等等
<main>  //定义文档的主内容
<menuitem>  //定义用户能够从弹出菜单调用的命令/菜单项目
<meter> //定义已知范围（尺度）内的标量测量
<rp>    //定义在不支持 ruby 注释的浏览器中显示什么
<rt>    //定义关于字符的解释/发音（用于东亚字体）
<ruby>  //定义 ruby 注释（用于东亚字体）
<wbr>   //定义可能的折行（line-break）
....等等

新的表单元素

<datalist>  //定义输入控件的预定义选项。
<keygen>    //定义键对生成器字段（用于表单）。
<output>    //定义计算结果。

新的输入类型

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

新的输入属性

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 和 width
• list
• min 和 max
• multiple
• pattern (regexp)
• placeholder
• required
• step

HTML5 图像

<canvas> 定义使用 JavaScript 的图像绘制。

<svg> 定义使用 SVG 的图像绘制。

新的媒介元素

 <audio>    定义声音或音乐内容。
 <embed>    定义外部应用程序的容器（比如插件）。
 <source>   定义 <video> 和 <audio> 的来源。
 <track>    定义 <video> 和 <audio> 的轨道。
 <video>    定义视频或影片内容。