之前我们一直码代码用的最多的布局标签就是<div>标签了，<div>标签的id属性是自由命名的，如果id的名称与网页架构无关，这就会造成别人很难去判断你写的网页的架构了，而过多的<div>会让代码看起来很凌乱、不易阅读。

而HTML5新的结构标签带来了网页布局的改变，提升了对搜索引擎的友好度。现在，越来越多的用户和程序设计者不再频繁使用<div>标签了，而是更多地利用HTML5新的结构标签。

下面来看一个简单的HTML5入门例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<header>
			<hgroup>
				<h1>我的旅行</h1>
				<h4>读书让我们获取知识，旅行让我们感受生活！</h4>
			</hgroup>
			<nav>
				<ul>
					<li><a href="#">关于旅行</a></li>
					<li><a href="#">爱旅行</a></li>
					<li><a href="#">爱分享</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</nav>
		</header>
		<article>
			<section>
				<h2>旅途</h2>
				<p>旅行真正的快乐不在于目的地，而在于它的过程。</p>
				<p>人生就是一次充满未知的旅行，在乎的是沿途的风景，在乎的是看风景的心情，旅行不会因为美丽的风景终止。享受每一刻的感觉，欣赏每一处的风景，这就是人生。</p>
			</section>
			<aside>
				<figure><img src="img/t.jpg" alt="" /></figure>
			</aside>
		</article>
	</body>
</html>

HTML 5 中的新标签

① <header> 标签：定义文档的页眉（介绍信息）。

② <hgroup> 标签：用于对网页或区段（section）的标题进行组合。

③ <nav> 标签：定义导航链接的部分。

④  <article> 标签：定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

⑤ <section> 标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

⑥ <aside> 标签：定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。

⑦ <figure> 标签：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

网页预览如下图：

html5实例 html5案例教程_HTML5