HTML5 布局标签

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站,相对HTML4，HTML5新增的带有语义化的标签可以代替div进行页面布局（与html5.js结合起来时可以放心使用 ），语义化标签有相对应的结构，这样我们就不用一层嵌套一层的使用div啦。抛开IE浏览器兼容性这个最大的阻碍，前端工程师应该跟随HTML5时代的召唤熟悉HTML5布局标签，并在将来的开发中灵活和适当的运用。

下面介绍下几个最常用的元素：

1.<header>，<footer>

代表页面的头部和底部。但不仅仅就只是传统意义上我们所认为的页面头部和底部，事实上，它们可以被更加灵活的在页面各个部分定义页头以下其它内容的介绍 。

header元素是一种具有引导和导航作用的辅助元素。通常，header元素可以包含一个区块的标题(如h1至h6)，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。同一个页面中，每一个内容区块都可以有自己的<header>元素，footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息，如作者、相关阅读链接以及版权信息等。

总之，header与footer都可以在页面中出现多次。

2.<nav>

nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。

一个页面中可以拥有多个<nav>元素，作为页面整体或不同部分的导航。但并不是所有的链接组都要被放进<nav>元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用<footer>元素是最恰当的，而不需要<nav>元素。

3.<section><article>

section与article对初学者来说，很容易搞混，因为他们都是代表一个独立的、完整的相关内容块.

<section>元素的作用就是分段,将相似的页面结构进行分段，section和article可以互相嵌套，也就是说他们没有上下级关系，<article>是文章，文章就是一段完整的独立的内容.

4.<aside>

aside字面理解为“旁边”,是跟主内容相关，但是又可以独立的内容 ，可以是广告、引用、侧边栏等等,一般放在页面的右侧。

5.<figure>

用作文档中插图的图像显示和对图片的文字描述模块。

虽然目前使用HTML5布局还有太多阻碍（桌面浏览器多被IE霸占着），但我认为，HTML5的标准化还是值得坚持的，现在像是一个过渡期，过渡期的阵痛在所难免，但之后我们一定会尝到它的甜头。