[HTML知识体系]语义化标签概论

1.什么是语义化

语义化（Semantic）在HTML5中被大量提起，就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思，可是至今我看了好多代码，HTML5新增的语义化标签的使用率还是挺低的，但是毕竟是一个趋势，要想使用好必须要很清楚的了解各个标签的真正语义。

2.H5中页面布局常见语义标签

一张图足以了解：

需要注意的就是 article ：

article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

3.谈一谈比较常见的标签i,b,em,strong在H5中的新语义

• <i> <b> – 原本只是倾斜和加粗，只是一种表象的元素，没有任何语义，现在被赋予了新的语义，解释起来很麻烦，google上有一段不错：

They are tags you should use when you need to draw attention to a part of prose, or to offset normal prose, without conveying emphasis (em), importance (for strong), or relevance (for mark). b is for key words, product names, actionable words, etc., while i is for technical terms, thoughts, phrases, etc.

意思就是这俩是备胎，当em和strong都不用的时候就可以考虑这俩了，然后两个人运用的场景有些区别，一个是关键字一个是科技词汇等。

• <em> <strong> - 和H4中基本是一样的，只是强调的程度进一步是加强，都是主胎！

4.参考资料

• stackoverflow
• w3school
• 张鑫旭blog