关于HTML语义化的一些理解

当前位置 : 首页 > 网页制作 > CSS > 关于HTML语义化的一些理解

关于HTML语义化的一些理解

来源: 作者: 时间:2016-01-25 10:02
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上。其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上。
其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重。
所以我一直也没把这东西当回事过。
然而最近当我再次看到这个词时,我想我应该好好思考下这问题了。就写篇博客记录下。
 
 
一、什么是语义化?
在解释这个概念之前,应该先解释下“结构-表现-行为”。
如果说解耦合是代码的高境界,那么“结构-表现-行为”的原则就是前台的标杆。
随着前台代码的越来越庞大,各部分代码各司其职的作用就越来越重要了。
众所周知,前台代码是有HTML + CSS + JS来实现的。他们对应的就是负责“结构-表现-行为”。
 
HTML负责结构。
结构是什么?简单理解,结构就是HTML节点的层次、嵌套关系等。举个例子来说
<header>
      <h1></h1>
</header>
<section></section>
<footer></footer>
上面的代码展示了该文档结构为 header、section、footer是同级的。然后h1是header的直接子节点,换句话说就是他们之间也就一层的嵌套。
 
但是,有个问题,看下面的代码
<div>
     <span style="font-size:16px;font-weight:bold;"></span>
</div>
<div></div>
<div></div>
这段代码不也展现出了结构吗?而且显示效果而上面的没有区别(这里我假设H1默认是16px,bold的样式),那上面的代码和这段比起来的优势是什么呢?
 
优势,其实就在语义化。
第一段代码不仅展示了结构,而且告诉了我们,是头部、区域块、尾部同级,头部中有个大标题。而第二段代码,能体现出这些吗?
 
所以,给个结论就是 — 语义化就是让标签和其所包裹的内容的意思想吻合
 
 
 
二、为什么要语义化?
我归纳了3点,分开来说把
 
1.方便机器理解代码,利于SEO
还拿上面两段代码举例子,第二段代码,别说机器了,就是人也看不出它表达的意思啊。而第一段代码无论是人还是机器,都是可以去理解的。
搜索引擎爬虫理解了你的代码,你的网站排名自然有加分了。
 
2.代码更简洁,复用性更高。使用合适的标签,可以少些很多css或者js。
代码更简洁:这个显而易见了。第二段代码多了样式的定义,而第一段没有。
复用性更高:假如这段HTML结构有很多地方用,那么第一段的适用场景更多。比如第二段代码固定了16像素加粗,而第一段代码只是指明这是个h1,你不重写那么就用h1样式,你若重写了h1,那就用你的。
少写css:在代码简洁那里说了,就不重复了。
少写js:这个可以说说,比如看如下代码
复制代码
<!-- 语义化的form -->
<form>
    <input type="submit" />
</form>
 
<!-- 非语义化的form -->
<form>
    <a href="javascript:document.forms[0].submit()" >submit</a>
</form>
复制代码
非语义化form代码里面,用a标签和js实现提交功能。但是呢,一来多写了js代码。二来,在语义化的form里面可以回车提交,用a标签实现的无法回车提交。当然,你可以再多写很多js来实现完美模拟,但是这又有什么意思呢。
 
3.访问性更好
这个主要就是针对读屏器或者其他一些对CSS理解不好的。语义化的HTML可以做到脱离CSS还能看,而非语义化的就难了。
 
 
三、如何让自己代码语义化?
w3c的验证并不能验证你代码是否语义化,而且也没有任何工具可以测试你代码是否语义化。
这说明什么?这说明你无法通过像学习一门语言一样解决代码语义化的问题。
关于如何让自己代码语义化,我觉得有个方法可行
首先,你需要掌握常用的标签,包括标签代表的含义。可以参考这里
其次,在你写的时候,常常去想想,这么写是否满足了语义化的要求。
最后,经常看一些大公司的网站(特别是新站)、开源项目代码,我知道大家都会这么做,但每当你看他们css如何写的,js如何写的时候,请抽出一点点时间,看看他们html是如何写的,思考下为什么这么写。
这样,我相信慢慢的你的HTML代码语义化会越来越好。
总之,语义化HTML代码不是一个可以从不会到会的问题,而是一个不断改进的问题,不值得一次花大量精力去学习,但是需要每天积累一点来提高的技能。
Tag:
网友评论

<