浅析HTML标签语义化

最近天气大好...整个人都感觉神清气爽的。难得跟朋友出去溜达溜达，最后话题还是谈到了html+css上面了，大家都不是什么高手，也就算是交流意见，算不得什么点拨。他把他的Pad给我让我看他写的代码，我发现了一个问题。过分的使用div标签，一眼看过去，全都是div块，其实我很多地方都看到说，div是一个无语义标签。个人觉得DIV用来布点局什么的就行了，广泛使用会降低浏览器对你的页面的解析。所以我们最后谈到了怎么样解决html里面标签的语义问题。心有所想，于是胡乱的逛了一圈回来开始研究html语义化，什么是html的语义化？这样做对你的什么好处？

那什么是语义化呢？

我问过一个前端大牛，他就这么给我说的？所谓语义化，就是让你的代码简单说来就是让机器可以读懂内容。那么，一般的标签机器也能读懂啊？为什么非要语义化呢？其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但是我们发现渐渐的机器也需要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档。我对语义化的理解就是我们发布的语义信息能跟好的让我们人看懂、听懂的同时，机器也能很好的理解。

<header>
        <h1>一级标题</h1>
</header>
    <strong ></strong>
    <footer></footer>

上面的例子向我们很形象的展示了头部、区域块、尾部。只要是会点英文的童鞋都了解；

但是，有个问题，看下面的代码

<div>
<span style="font-size:16px;font-weight:bold;">一级标题</span>
</div>
<div style="font-weight:bold"></div>
<div></div>

这段代码还不是一样实现了第一段代码一样的效果?那么上面的代码和这段比起来的优势何在？

其实，从效果上面说，没有区别。优势其实就在于语义化

第一段代码给我们展示了头、尾和中间的块。一目了然，第二段代码您能从中挖掘出这些信息？

那么遵循语义化有什么好处呢？

良好的语义HTML标记有助于提升你的网站对访客的易用性.不仅仅在你搜索到的好处之内，语义化的代码具有更好的亲和力，更主要的是逐渐使网页标准化，这个也许是以后工作时候应聘是遵循的标准之一了吧！

我们知道，近几年才流行起来的HTML里面也是新加了一些新的标签，像<footer><header>之类的。这很直观的说明了我们的html正在朝着语义化结构体系发展。这正是我们应该追求和遵循的标准。一来利于搜索引擎爬虫理解了你的代码，你的网站排名自然有加分了。再者就是代码更简洁，复用性更高。我用一个最简单的例子：

  <p><b>卸载幻想;终将成为前端大牛的男人</b></p>

  <p style="font-weight: bold">卸载幻想;终将成为前端大牛的男人</p>

这个代码毋庸置疑的大家都能看懂， 这个显而易见了，第二段代码是要比第一段代码要简洁些，只是这里代码只有那么一丢丢，效果不明显而已.那我们再打个比方：

语义化的代码：

<form>
    <input type="submit" />
</form>

和非语义化的代码：

<form>
    <a href="javascript:document.forms[0].submit()" >submit</a>
</form>

这两段代码就很明确的体现了语义化的优势所在。非语义化的代码我们需要用a标签和JS语句来实现提交功能。这样一来就多写了代码，浪费了效率和可读性。二来还语义化标签的提交可以用回车来实现，而非语义化则不能实现这个功能。

下面我们应该来实现让我们自己的代码语义化了。

想要我们的代码语义化，肯定得进行一番恶补。W3C的离线电子书里面有这些标签：这里是入口

再者我们在写代码的时候多寻思自己的代码这样写是否满足了语义化的要求？关于语义化的要求，请上百度搜索...

而且我们可以多了解那些大型的互联网网站和开源性网站的时候多研究研究别人的语义化是怎么写的，要学会站在巨人的肩膀上。

最后向大家分享一下别人总结出来的标签：

 

图片来自：http://www.biaodianfu.com/semantic-html.html

html语义化这个不是一朝一夕就能很完美的实现的。这个是需要一点一滴的积累的。so，也别太死钻这块，所不定某天你发现自己已经很熟练的运用了也不一定。