作者：myprelude@github
原文链接： https://myprelude.github.io
转载请注明出处，保留原文链接和作者信息。

何为语义化

语义化是前端独有的词语；是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。 其实说白了语义化就是让人和机器都明白我们的HTML代码。

语义化的好处

• 便于搜索引擎理解并抓取我们的页面（有利于SEO）。
• 让html更具有结构层次，便于我们后期的维护、开发和理解。
• 这也是为了迎合技术的发展趋势（HTML5）。
• 面试时侃侃而谈的谈资。
• ……

如何语义化

说到语义化我们最多想到的是HTML5的新标签如：header footer nav section main article aside 等等；其实在还没有使用HTML5时候就有一些语义化的标签了如： H1…H5 b em center u ui dl 等等。语义化的HTML就是将这些标签元素合理的组合使用，类似于乐高的玩具,将这些标签拼接成一个页面（如文章开始的图片）。

我相信对于HTML5的新标签的使用大家都会，这里我通过我个人的角度来看语义化。

1）a标签、image标签的语义化

类似于a标签或者image标签，一般我们都是写成：

<a href="xxx"></a>  甚至有人直接作为一个简单的元素标签<a>不能点击</a>
<img src="xxx" />

但是这些标签还有一些本身自带的属性：alt rel title

<a href="xxx" rel="链接和本页面之间的关系">\</a>
<img src="xxx" title="这是一个图片" alt="显示的是一个图片"/>

开发看到这个后大概也就知道这个链接的意义了；更重要的是搜索引擎也能知道它爬取的链接是什么了。

2）class/id语义化

页面中我们有很多class id；经常看到class=’todo’ id=’centent’ 开发在拿到时一般都很懵逼；如果是class=’header-main’ id=’header-content’ 第一时间就知道这个是头部的class 和 id，从而定位到具体的位置。

3）使用浏览器预设样式的标签

尽量使用如 strong b em

总结

语义化没有一个唯一的规范和标准；我们要做到的是让开发者和机器都能很快的认出代码。