WEB标准之标签语义化

WEB标准之标签语义化

今天创意灵犀来跟大家讨论一下WEB标准中的语义化。WEB标准中非常重要的一点就是表现与内容相分离。模块化、语义化、优雅退化等概念业已成为考核一名前端人员对WEB标准理解的重要条目。而良好的语义,不仅可以使后期的维护工作变得轻松简洁,更重要的是它对SEO的重大作用!

创意灵犀也是经过不少的探索与理解,站在前辈的肩膀上,来把语义化的概念与大家一起分享。

什么是“语义化”(Semantic)

       “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。具体而言,借用BI论坛网友通俗的解释,“语义化意思就是不要把你女朋友当做一般的朋友看待”,下面是粗浅的XML形式实例:

错误的写法:

<city>市北区</city>

<area>青岛</area>

正确的写法:

<city>青岛</city>

<area>市北区</area>

然而,通过CSS控制,我们很容易就能将“青岛”展示地跟“市北区”一样,只关注表现层的话,标签视乎只是一个“钩子(hook)”,提供给CSS和JS做处理,那为什么我们还要强调“语义化”呢,下面会详细谈到。

语义化的意义

1.  搜索引擎

对于搜索引擎的优化,很多前辈都已经做了丰富的解释,关于Hx的权重,隐藏文本等等,在此便不再班门弄斧。联系到前端的工作,我们所推崇的“语义化”不就是让计算机读懂我们的内容吗?

2. 用户体验

作为前端工作者,我们也需要考虑到用户的网速可能过慢(也许他正在用迅雷BT呢)导致无法加载CSS的情况,还有手机用户的情况,选择合适的标签成本很低,只要补充点HTML的基础知识就可以了

3. 开发效率

富含语义的网页结构对前期开发和后期修补bug都有显著作用,具体而言,像下面一段简单的产品列表代码。
通过“语义化”的标签,丰富了产品列表内的“钩子(hook)”,通过在父层添加id和class命名,便能控制产品列表内的全局表现,对于样式的修改,在理想状态下能避免通过后台开发人员改变网页结构的情况,节省人力成本,但回归现实情况,面对产品和老板的各种需求,想完全通过只修改CSS便能改变样式还是不现实的,面对大大小小的需求和bug,最好的方式还是在前期开发阶段为页面合理地预留“钩子”,方便后期修改使用,此时丰富的语义标签就显得相当实用了。
对团队协作而言,充满语义的ID、Class命名能让团队里的所有人员对结构一目了然,试想一个class为red的标签因为需求的改变而换成蓝色,就能理解为什么要语义命名了。

4.行业标准

一千个人有一千个哈姆雷特,同样,一千个前端也能写出一千个表现一致但结构不同的页面,这正是页面重构中的现状,通过CSS我们能随意地摆弄页面的所有元素,但最基本的HTML结构却鲜有人关注,一方面原因是HTML标签语义上的不足, HTML5新增的标签在一定程度上解决了这部分问题,而进一步的原因,我想,还是前端工作者对HTML基础的漠视,像鬼哥所说的,“外行看门道,内行看热闹”,“如果你想在这个行业内有所建树,专业化是必须的。也就是说如果你不考虑自己的发展,也就不用讨论“语义化”的问题了。”

“语义化”的目标在于实现统一标准未来的互联网“一定是开放的互联网,不会像现在这样数据无法畅通无阻,存在大量的信息孤岛和信息盲点”,微格式正是一个很好的实践,开放的接口,共享的内容,下面会详细谈到。

结束语

“语义化”的实践非常简单,可以说是前端最基础的部分,但由于种种原因,或被误解,或被忽视,没有得到应有的重视,写这篇文章,旨在梳理自己过去一个阶段的学习积累,希望能带给所有读者对WEB标准的一点思考。