浅谈web语义化 - 猴子猿

在前端的编程道路上，我曾经听别人对我说过什么编写前端时，要注意html的结构语义化哦。我当时直接采取的是无视。。。

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

哎，想想当时自己有多小白菜。。。

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

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

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

　　1、 css：

SEO

　　2、 b标签：SEO

　　3、 strong标签：SEO

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

1、2种写法只是以加粗的形式显示内容，无法被搜索引擎知道，而第三种，strong标签是有语义的，它表示强调。所以如果你是的本意是想强调，那选择第三种写法才是符合语义的。而如果，你只是想显示效果，那就随便咯。

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

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

在很久以前，我对html5中的什么header、nav呲之以鼻，想想是多么单纯。当时，我去面试的时候，别人问我，了解html5吗。我说了解过。他说，那你谈谈对header、nav这些标签的理解。我当时二笔的说，其实跟div差不多，就是框框而已。哎，无知的少年呢。。。

下面列举几个语义标签：

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

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

睡觉咯，晚安，everyon~