最近在读亚当的《Web前端开发修炼之道》，有很多东西值得前面路上的朋友学习。结合自己的日常编码经验，我会陆续和大家分享一些从书本上学到的，自己总结的前端技巧。
语义Html似乎是一个过时的问题。Google，有很多关于语义的文章。为什么要语义化标签？我也这么认为：Html的每个标签都有其特定的含义，语义化意味着我们要在适当的地方使用适当的标签，使人和机器(机器可以理解为浏览器和搜索引擎)一目了然。如果我的解释不够清楚，请谷歌一下。
如何在合适的位置使用合适的标签？
这是一个简单的理解逻辑。比如h1~h6标签用于标题类；Ul用于无序列表；Ol用于收费清单；Dl用于定义列表；Em，强标签是用来强调的…说白了，Html标签的每一个英文解释都决定了它的语义(我会放一个常用Html标签的英文解释对照表，供本文后面参考)。
什么是让人和机器都能一目了然？
检查一个Html页面是否语义化的最好方法是删除页面的Css链接，看看页面的结构是否有序，页面是否仍然可读。为什么可以这么说？众所周知，浏览器是有默认样式的(建议使用Chrome的Web Developer Tools for Chrome插件或者Firefox的Web Developer插件)。例如，h1~h6的默认样式为粗体/字号依次递减，上下边距。ul、ol和dl都有默认项目符号。Strong默认有加粗的样式…所以，在同一个页面上语义好的Html，即使去掉页面上的Css，依然可以表现的很好。
还有一点就是好的语义编码对搜索引擎更友好。搜索蜘蛛不知道你的Css，但它可以识别Html标签。
下面是一个简单的例子：
！-没有语义化-
div id='header '
div class=' h1 ' Think先生的博客/div
Div class='h2 '一个专注于Web前端技术，热爱Php，崇尚简单生活的普通人。/div
/div
！-语义化之后-
div id='header '
H1Mr。Think的博客/h1
H2专注Web前端技术，热爱Php，崇尚简约生活。/h2
/div
通过上面简单的例子和没有任何Css定义的渲染，是时候理解两者之间的区别了。如果你正在学习Html5，它的页眉、页脚、侧边栏、文章和其他元素都是新的语义标签。
语义Html编码是迈向高质量前端开发的一步。也就是说，为了更好地遵循网络标准，您可以在删除样式后保持页面的有序。关于语义学更详细的介绍，可以自己谷歌一下，或者看亚当的《Web前端开发修炼之道》第三章。
附： 标签语义中英文对照表
