html5分组的标签,HTML5新的结构和内容分组标签

HTML5主要带来了两大变化，一是新增了大量功能强大的API，二是引入了新的语义标签。本文简单了解下这些新的语义标签中的结构标签和内容分组标签。结构标签

header标签代表一组简介或者导航性的内容。其位置表现在页面(Page)或节点(Section)的头部。

通常header标签用于包含页面标题(h1-h6、hgroup)，但这不是必须的，header标签也可以用于包含节点的内容列表导航(比如目录)、搜索表单以及相关的Logo图标等。

下面是一个header的例子：

CSSer

关注web前端技术

上面的代码中有hgroup的使用，hgroup的目的是将不同层级的标题(h1-h6)封装成一组。如果要定义一个页面的大纲(outlines)，使用hgroup非常合适，如定义本文的大纲层级：

HTML5新的结构标签

结构标签

header

hgroup

footer

nav

aside

section和article

address

内容分组

figure和figurecaption

footer标签代表了其父层节点或者根标签节点内容的底部，一个典型的footer包含节点内容的发布者、相关文档链接、版权信息和类似文档内容。内容的作者和编辑者有专门对应的标签

，address可以放在footer标签内部。

footer标签通常被放在一个节点的底部，但也可以被放置在另外的地方。

nav定义了网站或者页面内部的导航链接。通常一个页面内不会有太多的nav标签，即并不是所有分组的链接都要放在nav内，仅页面内的主导航部分需要使用它。如果在文章页面，除了网站的主导航外，还可以使用nav为文章的章节做一个快捷链接导航。

aside标签用于表现与页面主内容有关联的内容集合，这部分内容相对独立，但又与主内容有关。nav标签可以用来定义侧边栏、广告内容、分组导航以及其它与主内容相对独立的内容。

和

section标签定义一个文档或应用的一节，表现为一个区域分组(可以认为是页面中的一个模块)，每一个section通常都会有相应的标题。section标签可以用来表现文章的章节、不同的tab页。网站的首页应该被划分为不同的节，如介绍、新闻和联系信息等。

如果需要通过script脚本进行交互，则不必使用section标签，应该用div代替。section标签使用的基本规则是，它可以明确的表达页面文档的大纲结构而不是参与页面交互功能。

article定义文档、页面、网站或应用的一个独立内容块。比如论坛帖子、杂志或新闻文章、blog日志、用户评论和交互的小工具等。

article内可以放置section标签来表现该内容块的章节信息。

address标签为其所在的article或body标签提供联系信息，如果在body内，则该联系信息应用于整个文档。address标签内只能放与其所在节点内容有相关性的联系信息，而不是放什么都可以。也不能在address内放与联系信息无关的内容，如下面的使用是错误的：

Last Modified: 1999/12/24 23:37:50

内容分组

和

figure用于组合标签。通常被用作插图、图标、照片和代码清单的组合。如果要为该组合指定标题，请使用figurecaption标签。示例：

CSSer测试版