HTML5 新标签让布局更有语义化

曾经，前端工程师经常会频繁的使用基于 table 的没有任何语义的布局。不过最终还是要感谢像 Jeffrey Zeldman 和 Eric Meyer 这样的思想革新者，聪明的前端工程师慢慢的接受了相对更语义化的 div 布局替代了 table 布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做 “div-soup” 综合症。也许你很熟悉下面的布局代码：

structure-div

尽管这有些勉强，但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代码化后依然过于臃肿（其实xHTML1.1也不过如此）。不过值得激动的是，HTML5 解决 “div-soup” 综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是 HTML5 新标签布局的解决方案：

structure-html5

尽管这有些勉强，但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代码化后依然过于臃肿（其实xHTML1.1也不过如此）。不过值得激动的是，HTML5 解决 “div-soup” 综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是 HTML5 新标签布局的解决方案：

 不过要在 IE 下使用这些语义化的标签这就需要 JS 来做兼容了。代码如下：

1	<!--[if lt IE 9]>

2	<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

3	<![endif]-->

然后仍然需要对 IE 下的这部分标签重置 CSS 样式，CSS代码如下：

 

1

2	header,nav,article,section,aside,footer,figure{display:block}

 这样就在 IE 下显示正常了。

html5 十个常用的布局新标签简介：

• <article> 标签定义外部的内容，可以是一篇新的文章。
• <aside> 标签定义 article 以外的内容，aside 的内容可用作文章的侧栏。
• <figcaption> 标签定义 figure 元素的标题。
• <figure> 标签用于对元素进行组合，使用 figcaption 元素为元素组添加标题。
• <footer> 标签定义 section 或 文档 的页脚。
• <header> 标签定义 文档 的页眉。
• <hgroup> 标签用于对 section 或 网页 的标题进行组合，使用 figcaption 元素为元素组添加标题。
• <nav> 标签定义 导航链接 的部分。
• <section> 标签定义文档中的节（ section、区段 ）。比如章节、页眉、页脚或文档中的其他部分。
• <time> 标签定义日期或时间，或者两者。

 

参考：http://www.w3school.com.cn/html5/html5_reference.asp