语义化标签的实战意义

我收集到一些观点，大家姑且先听上一听，有人说：“没必要考虑语义化，只要我写的代码浏览器运行后没问题就行，反正领导根本不关心这些”“语义化是w3c推广的，我是很想语义化我的代码，但总是用不明白”“这个不好说，语义化再好有啥用，关键是有好的项目，客户才是金主！”“除了专业人士，谁会去看我们的代码是不是语义化的”不仅仅有页面重构人员的声音，也听一听工程师、设计师、还有项目管理人员，他们是怎么看“语义化”这件事的

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

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

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

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

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

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

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

语义化存在的意义

• 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，比如h1~h6、strong用于不同权重的标题；隐藏文本等等
• 提升用户体验 例如title、alt用于解释名词或解释图片信息、例如label标签的活用；
• 代码可读、便于维护、提高开发效率、快速达成共识，

例如

<div class= " wrapper "><div class= " main">&hellip;</div><div class= " sidebar">…</div></div>

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

• 行业机构对语义化标签的扩展和浏览器厂商在技术上的支持力度逐渐提升，例如web标准化组织刚刚开始推广的html5，其中新增了许多语义化的标签，例如header、aside、nav、section等等，在Chrome、Opera、safari、Firefox等浏览器中均得到很好支持。

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

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

大家都不假思索的考虑用li来实现吧<div class="module"><h3>国际新闻每日排行</h3><ul><li><img alt=”hotTop1” src=”1.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li><li><img alt=”hotTop2” src=” 2.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li>……</ul></div>在web标准中，ul ol li被赋予有序或无序列表的语义，可实际使用时，使用范围似乎被大家扩展了不少，看下面这几个图，li中的元素逐渐增多。

<div class="module"><h3>时政要闻</h3><ul><li><span>03:50</span><img alt=”listDot” src=”dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li><li><span>03:50</span><img alt=” listDot” src=” dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li>……</ul></div>

Major Stylespan{float:right;}

在这个例子中，出现了更多的元素，我们依然使用li，就解决了它。

我们继续看图写代码……

（我们只书写红框里菜单栏这部分代码）<div class=”nav”><a href=”” title =””>业界动态</a><a href=”” title =””>业界动态</a><a href=”” title =””>业界动态</a><a href=”” title =””>……</a></div>

Major Stylea{float:left;}

这种方法代码量少，Dom节点深度小，在大页面下加载也会快一些，这种写法较适用于不需要扩展的模块, 而且我们没有用到li

另一种写法：<div class=”nav”><ul><li><a href=”” title=””>业界动态</a></li><li><a href=”” title =””>业界动态</a></li><li><a href=”” title =””>业界动态</a></li><li>…</li></ul></div>

Major Styleli{float:left;}

这种方法在代码量上略显臃肿，优点是扩展性好，增加了代码可读性。

可是这是列表吗？这么用对不对不清楚，好像我们一直都是用li的，难道不对吗？显示没有问题呀。不做解答，我们先继续看图写代码

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

方式一：<div class="hotUserList"><ul><li><img src="1.pic" alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li><li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li><li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li><li>…</li></ul></div>

Major Styleli{float:left;}

方式二：<div class=“hotUserList”><div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div><div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div><div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div><div class=“rowlist”>…</div></div>

Major Style. rowlist {float:left;}

这样写没有什么不标准的问题，但是纵观上面使用li的代码，比较之下，总觉得div的不够美观，完美主义者们总是精益求精的希望自己的代码很精致很漂亮，这个全div的，的确没有上面那个li来的漂亮。

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

• HTML结构清晰
• 代码可读性较好
• 易于扩展
• 简化逻辑循环次数
• 块元素和行内元素均可被嵌套在li内，符合标准

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

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

作为一个页面重构工程师，不断对自己的代码进行完善精炼固然是好，但无论我们的技术实力有多么强大，作为一个工程师，不能只纠结在技术面上，还要考虑我们 做一个产品的初衷以及目标，服务于用户，所以在权衡代码和用户