浅谈web语义化

在前端的编程道路上，是否听过html的结构语义化？

是否觉得自己前端嘛，只要做出炫酷的效果，编写出牛逼的JavaScript代码就ok啦。div+css所向无敌，干嘛要用其他标签呢。

是啊，正如上面所说，div+css的确能实现一切效果，用户体验也棒棒哒。

但，请明白div是没有语义的，我们是能看懂，但是搜索引擎呢？我们呈现出来的网页是需要计算机连接互联网传达给别人，而负责中转的计算机不可能像人一样去看网页的内容，所以我们需要语义化。

例如我想加粗一个字体，我们可以有以下几种写法

　　1、  css：<div style=”font-weight:bold;”>SEO</div>

　　2、  b标签：<b>SEO</b>

　　3、  strong标签：<strong>SEO</strong>

其实，就效果而言，大家都差不多。然而，它们的意义是不一样的。

1、2种写法只是以加粗的形式显示内容，无法被搜索引擎知道，而第三种，strong标签是有语义的，它表示强调。

所以，如果你的本意是想强调，那选择第三种写法才是符合语义的。而如果，你只是想显示效果，那就随便咯。

其实，web语义化不仅能让搜索引擎理解，开发人员也是一样。

倘若我们才拿到一段html代码，在不运行它的情况下，是不是我们一开始是懵逼的，不知道这些代码的寓意，然而，如果我们是采用语义化编写代码，文档结构就明朗多啦。

在很久以前，我也对html5中的什么header、nav呲之以鼻，想想是多么单纯。

下面列举几个语义标签：

html标签	语义
title	网页标题
h1~h6	大纲级别标题
caption	表格标题，指定表格描述
legend	表单元素<fieldset>标题，表单描述
p	段落
ul	无序列表
ol	有序列表
dl	自定义列表
em	局部强调，段落内强调
strong	全文强调，更加强烈的强调

今天上班维护别人的bug，好累。

睡觉咯，晚安，everyon~