有关WEB前端中的语义化

作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念，于是乎也就花点时间搞搞它。语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意，哇哈哈，其实我也就算只比较老的菜鸟而已，本文不是说教，只是分享有关语义化的一些东西。

那什么是语义化呢？

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”娘的，太抽象了。其实在那个用4000W打造的超级防猥琐的绿坝就有个叫语义分析的功能，如果发现不健康信息，立马对其进行关闭，哼哼。

通过强大的拆字我们可以简单的理解它为：用特定的语言来定义特定的事物。在web前端中语义化标记也可以这样理解。

绿坝它全家靓照

你是不是特别特别喜欢DIV标签？

在刚开始学习web前端时想必你肯定听说div+css布局，说的那是如此好如此妙如此呱呱叫，于是乎你就div+css了，div套 div，div何其多，去w3c验证发现还能通过，仰天长呼，so easy，so easy。

然而堂堂的(X)HTML就一个div标签？答案肯定不是，那其他的标签是不是没有用？答案更不是。任何事物存在亦有它的价值所在滴。在初学 XHTML时，我曾经犯了一个很傻的错误，在定义几个行列表项时我是这样写的：

<div id="list">

虫下米<br />

wlsy<br />

虫下米wlsy合体<br />

</div>

你别笑，我当时真的是这样写的，只不过其中的文字记不清了，写完后发现在浏览器中是我想要的结果也就认为代码是正确的。代码是正确的吗？代码当然是正确的但是不规范。在XHTML中有个专门定义列表的标签ul（无序列表），ol（有序列表），dl（定义列表）。所以更加规范，更加有语义的我们可以这样写：

<ul id="list">

<li>虫下米</li>

<li>wlsy</li>

<li>虫下米wlsy合体</li>

</ul>

在学习XHTML时，应尽量能够熟悉有定义到的标签，并在特定的内容加以应用，比如我们可以用strong(用strong来替代b)标签来强调内容，用Hx(h1,h2…..)来定义标题等等。我可以吐血奉献我搜刮到一些资源：XHTML Cheat Sheet（这是常用的XHTML标签表格，可以下下来看，不过是英文的），HTML 4.01 / XHTML 1.0 参考手册（这里面有标签的详细用而且还配有实例），在早些时候我有写过一篇：几个不太常见的(X)HTML标签。

另外关于语义化标签蓝色理想上有篇帖子很不错：http://bbs.blueidea.com/thread-2658231-1-1.html

所以呢相对于叫div+CSS布局，我更喜欢叫做(X)HTML+CSS布局。

结构命名中的语义化

这里说的结构就是就是我们平常编写的XHTML代码，而命名就是我们为id或class所取的名称。

有个例子是这样的，你是不是有时会类似这样来写代码（代码比较粗糙演示用）：

<div id="left">

<p>今天是个好天气呀</>

</div>

<div id="right">

<p>我的一些照片</p>

</div>

CSS代码：

#left{float:left;display:inline;width:50%;}

#right{float:right;display:inline;width:49%;}

但是某天我突然闲着没事想换个布局来增加新鲜感，比如对掉左右边的内容，那么我仅仅要在CSS里面这样改：

#left{float:right;display:inline;width:50%;}

#right{float:left;display:inline;width:49%;}

结果呈现的效果确实是你想要的，但是为其id命名是不是违背的你的原意？你原本命名id=“left”的div内容的意思就是要在左边显示，而现在却显示在右边了。虽然结果是你想要的，但是命名好像很别扭的跟你做对。所以如果要对其进行语义化的命名我们可以这样来：

<div id="content">

<p>今天是个好天气</p>

</div>

<div id="sidebar">

<p>我的一些照片</p>

</div>

这样命名为content就是内容，命名为sidebar就是边栏，管它上窜下跳，左躲右藏，命名内容块始终为包含内容，命名边栏块也始终包含边栏。这个例子就是语义化命名的实例，很好理解吧。

看看我是怎么给自己的网站结构命名的：

结构命名为常用的英文单词，多词之前用-来分割。因为是个人博客所以命名也就没什么其他特殊要求了。如果想看看其他的网站的命名推荐各位用 firebug，这是在Firefox的一个插件，能很方面的查看，修改和调试代码。

这里有一些有用的文章能够让你更加理解结构命名中的语义化：

CSS类命名的语义化VS结构化方式（这篇文章有很好的配图帮助你理解语义化命名）

语义化有什么优势吗？

当你写完代码后在浏览器调试，如果呈现的结果是你想要的，你是不是就不会再去检查你的代码了呢？访客能看到浏览器解析后的实际页面，但是你想过流量的另一个重要来源：搜索引擎吗？

语义化更有利于SEO

有个很常见的例子是这样的：在初学SEO的时候你是不是经常用h1来突出你的标题，用strong来突出你的关键字，或许你不太在意，但这确实是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析的你源码来体现或猜测网站要表达的内容。比如你想表达某篇文章的标题，你或许会这样写：

<div id="title">文章的标题</div>

访客或许能理解你的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

<h1>这是标题</h1>

小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

当然语义化还有其他优势：

正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解你的代码。语义化代码也更能帮助视障的人通过设备来理解你的内容等等。当当然语义化代码也是你能力的体现。

一些资料：semantic code: what? why? how?，

4 Ways CSS Can Improve Your SEO

语义化的更高体现-微格式

什么是微格式呢？维基百科这样给它定义的：

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。

从技术上来说，这些数据是一些语义标记，用标准的(X)HTML中的class名称设置。他是开放、可用、自由的，可以被任何人使用。

维基百科上还有一个实例我就不贴了，你可以到这里看到。

在往后，当搜索引擎越来越重视微格式，在你的网站上应用微格式肯定会为你加分不少。在应用和推广微格式上面，我觉得wordpress做的非常的好，在之前应用了诸如：rel=”tag”，rel=”nofollow”,rel=”license”后，在升级到wordpress2.8后我发现它在header处新增了这几个：

根据字面意就是帮助搜索引擎理解本页的主页，开始页，上一篇和下一篇。不过目前有些微格式还处于草案当中，并不能确保它在最后时还在。要想关注微格式你可以看看它的官方网站

微格式还有个很经典的例子就是名片的应用，它也就是通过一些很有语义的标记来描述个人信息，如果你想折腾微格式还是有得折腾的，为了避免篇幅过长下面给出写有用的了链接方便有兴趣的继续折腾。

微格式全功略Hcard、hCalendar、hReview、 XFN 轻松掌握（这几个微格式也就是主要来体现个人信息，这篇来自ued163）。这里也还有一系列的翻译译文http://www.mijia.org/blog/?p=152能够帮助你很好的理解微格式。

end～