html5中为了便于设计者的网站布局新添加了一些标签，本文主要讲解这些标签的实际应用方法。
大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局，这是种非常高效的方法，可以将整体的布局分拆成为各个部分的布局。在html5中我们可以省去更多的时间对盒子的属性进行设置。下面两图是对传统方法与HTML5布局方法的对比，可以看出，两种方法都能实现我们的设计思想。
<header>，<footer>:header常用于网站头部的制作，footer常用于网站尾部的制作。
<header> <h1>Yoko‘s Kitchen</h1> <nav> <ul> <li><a href="" class="current">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav> </header>
<footer>
© 2011 Yoko‘s Kitchen
</footer>
网站的头部基本都会包含导航，导航的设计在HTML5中由<nav>（navigation：导航）标签完成。上面的代码中nav就位于header中。
<artical>:这就是我们网站的主体部分了，用于作为放置网站主要元素的容器，虽然也的是artical，但是他真的是容器不是文章，官方介绍：the artical elements can acts as a container for any section of a page that could stand alone and potentially syndicated。
<aside>:这就是我们网站的侧边栏了，比如常见网站的侧边导航栏。
<section>:其中文意思是模块，其标签内的元素应该是具有相同的功能的，比如音乐，电影，图书各个模块。
<a>:HTML5允许将一整块元素变为链接，意思是<a>标签内部可以再包含其他元素。这个常常被而恶意网站利用，用户点击的是关闭按钮，却打开了另外的一个恶意网站。
<a href="introduction.html"> <article> <figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </hgroup> <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p> </article> </a>
<figure>:figure提出的主要原因是在传统的html语言中我们对内容的补充说明需要利用其它标签，而figure与figcaption搭配使用可以增加代码的可读性（没错就是只有这个功能）
<figure> <img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> </figure>
这些新的元素在旧版本浏览器中会被当做行内元素，所以为了保证页面的正常显示，可以加入以下代码：
css：
header, section, footer, aside, nav, article, figure
{
display: block;}
html：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/
trunk/html5.js"></script>
<![endif]-->
HTML的主要有点是能够让开发者更加语义化的开发页面，比如在HTML之前各个开发者对header都可能会按自己的习惯命名，而HTML5将头部都统一的命名为了<header>,避免了开发者之间代码的复杂性。
原文：http://www.cnblogs.com/lflj/p/6291076.html