1 header元素
header元素是一种具有引号和导航作用的结构元素，通常用来放置整个页面或者页面内的一个内容区块
的标题，但是也可以包含其他内容，例如数据表格、搜索表单或者相关logo图片
举例代码如下：header既可以作为整个页面的标题，也可以作为article内容块中的一个局部标题块
<body><header><h1>h1 title</h1></header><article><header><h2> h2 title</h2></header></article>
</body>
2 footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块
的脚注信息，如作者、相关阅读链接以及版权信息等内容
使用举例代码：
<body><footer><ul><li><a href="www.baidu.com">百度一下</a><a href="www.baidu.com">百度一下</a><a href="www.baidu.com">百度一下</a></li></ul></footer>
</body>
3 hgroup元素
hgroup元素时将标题以及子标题进行分组的元素，hgroup元素通常会将h1-h6元素进行分组，比如一个内容区块的标题以及子元素算一组
举例代码如下：
<body><article><header><hgroup><h1>h1 title</h1><h2>h2 title</h2></hgroup></header></article>
</body>
4 address元素
address元素用例在文档中呈现联系信息，包括文档作者或者文档维护者的名字、网站链接、电子邮箱、
真是地址、电话号码等信息，address应该不只用来呈现电子邮箱或真是地址，还用来展示跟文档
相关的联系人的所有者的联系信息
举例代码如下：
<body><address><a href="#">author:xxx</a><a href="#">author:xxx</a></address>
</body>
5 HTML5的结构编排规则
-
显式编排内容区域块
显式编排是指明确使用section等元素创建文档结构，在每个区域块使用标题如h1-h6
或者hgroup等 -
隐式编排内容区域块
隐式编排是指不明确使用section的元素创建文档结构，而是根据网页需求使用各级的h1-h6或者
hgroup把各级内容区域块自动创建出来 -
标题分级
根据标题的等级，如果新出现的标题级别比之前的级别低，则生成下级标题区域块，如果新出现的标题级别
比之前的级别同一级或者更高级别，则生成新的区域块 -
不同区域块可以使用相同级别的标题
下面是一个完整的实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><header><h1> h1 title in header</h1><nav><ul><li><a href="www.baidu.com">baidu</a><a href="www.baidu.com">baidu</a></li></ul></nav></header><article><hgroup><h1>h1 title in article</h1><h2>h2 title in article</h2></hgroup><p>article context</p><section><div><article><h1> h1 title in article.section.article</h1><p>ctx in article.section.article</p></article></div></section></article><footer><small>version owner...</small></footer>
</body>
</html>
原文链接