网页的HTML结构进行重构:语义化标签的意义

武林网(www.vevb.com)文章简介：语义化标签的实战意义.

Php工程师：“无所谓什么语义化，只要逻辑正确，不影响我循环数据”
项目管理人员：“我更看重在最短的时间，实现我的需求，至于语义化不是我们关心的，只要别耽误项目时间，你们怎么优化都行 ”
设计师：“什么是语义化？”
市场销售人员：“客户满意就行，客户满意我们才能赢利”

这些声音时常充斥在我们的耳边，虽有些片面，但似乎还是挺有道理的，可站在自己的立场上（一个页面重构人员），基于这些现实条件，我们要如何权衡，语义化和现实工作之间的关系？我们该怎么做呢？

先解释几个名词，我们再来讨论在实际工作中如何处理这些问题。

首先解释一下什么是语义化？

“语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。

语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。”

语义化存在的意义

例如

 
<div class= " wrapper ">
<div class= " main"> …</div>
<div class= " sidebar">…</div>
</div>

很容易通过好的命名和清晰的结构看懂这些代码

接下来咱们抛开这些理论，讨论几个我们常见的结构,

恩，这个是新闻列表，平常工作中，你怎么写结构？

大家都不假思索的考虑用li来实现吧


<div class="module">
<h3>国际新闻每日排行</h3>
<ul>
<li><img src="http://www.vevb.com/uploads/allimg/130801/0U2555Y7_0.jpg" />

看到这个图，我们首先考虑的是程序循环，然后在脑海中构思用什么标签来搭建结构，我继续使用li，其实我很矛盾，从语义化讲的列表到底是个什么范畴，如果不用li，又该怎么写呢，我们先写写看

方式一：
<div class="hotUserList">
<ul>
<li><img src="1.pic" src="http://www.vevb.com/uploads/allimg/130801/0U2513a4_0.jpg" />

再回头看看上面的图片， 好像涉及到逻辑循环的，无论大小我们都先想到li，继而在li内部搭建它的结构，我们的出发点，和这么做的缘由是什么？现在想想大概有这么几个原因，使我们格外偏爱li。

缺点是什么，这个…… 我没找到耶

li只是语义化阵容中的一个类型，不能以偏概全，但多少可以说明一些问题，

作为一个页面重构工程师，不断对自己的代码进行完善精炼固然是好，但无论我们的技术实力有多么强大，作为一个工程师，不能只纠结在技术面上，还要考虑我们 做一个产品的初衷以及目标，服务于用户，所以在权衡代码和用户诉求时，还是要以大局为重，从用户角度出发，以产品需求为核心，考虑多方立场，实现在有效的 空间和时间范围内，达到利益最大化。盈利是根本！然后才是可持续发展，再然后才是考虑如何优化，就像之前读过的一些观点，说到技术型人才在做事情的时候，很容易钻牛角尖，很容易在问题的一个点上深入，而不太会考虑全局，这是作为工程师应该掌握的一个度