〈h1>网站副标题

〈/hgroup>

header使用注意:

∙可以是“网页”或任意“section”的头部部分;

∙没有个数限制。

∙如果hgroup或h1—h6自己就能工作的很好，那就不要用header。

2、footer元素

footer元素代表“网页”或“section"的页脚,通常含有该节的一些基本信息，譬如：

作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签,类别等一些其他类似信息。

〈footer>

COPYRIGHT＠小北

〈/footer〉

footer使用注意：

∙可以是“网页”或任意“section”的底部部分；

∙没有个数限制，除了包裹的内容不一样，其他跟header类似。

3、hgroup元素

hgroup元素代表“网页"或“section"的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

HTML5〈/h2〉

hgroup使用注意：

∙如果只需要一个h1—h6标签就不用hgroup

∙如果有连续多个h1—h6标签就用hgroup

∙如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

4、nav元素

nav元素代表页面的导航链接区域。

用于定义页面的主要导航部分.

• HTML5
• CSS3〈/li〉

  〈li>JavaScript

应用位置譬如：

侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上nav只能用在页面主要导航部分上。

页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款,版权页等，这些footer元素就能够用了。

nav使用注意：

用在整个页面主要导航部分上，不合适就不要用nav元素；

5、aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

（特殊的section）

在article元素之外使用作为页面或站点全局的附属信息部分.最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

〈article>

〈p〉内容

〈h1〉作者简介

〈/article〉

aside使用总结：

∙aside在article内表示主要内容的附属信息，

∙在article之外则可做侧边栏，没有article与之对应，最好不用。

∙如果是广告，其他日志链接或者其他分类导航也可以用

6、section元素

section元素代表文档中的“节”或“段"，“段"可以是指一篇文章里按照主题的分段；“节"可以是指一个页面里的分组。

section通常还带标题,虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。

如下：

〈h1〉section是啥？

〈/h1〉

〈article〉

〈p>section的介绍〈/p〉

〈p〉关于其他section的介绍

〈/article〉

〈/section>

section使用注意：

一张页面可以用section划分为简介、文章条目和联系信息.不过在文章内页，最好用article。

section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。

∙表示文档中的节或者段;

∙article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

7、article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。

譬如论坛的帖子，博客上的文章，一篇用户的评论,一个互动的widget小工具。

（特殊的section）

除了它的内容,article会有一个标题（通常会在header里），会有一个footer页脚.我们举几个例子介绍一下article，好更好区分article、section、div

〈article〉

〈p>文章内容..

〈footer〉

html5jscss网所属，作者：

小北〈/small〉

〈/article>

一篇简单文章的article示例代码

上例是最简单的article标签使用情况,如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论，如下：

〈article>

一篇文章

2014/10/03〈/p>

〈/header〉

.〈/p>

〈article〉

〈h3>评论者:

XXX

10-08：

00”>～1hourago〈/time〉〈/p>

〈p>哈哈哈〈/p>

〈/article〉

〈header>

XXX

〈p>〈timepubdatedatetime=”2012—10—03T19:

10-08:

00">~1hourago

哈？

哈?

哈？

〈/article〉

〈/article〉

〈/article〉

文章里的评论，一个article嵌套article来表示的实例

article内部嵌套article，有可能是评论或其他跟文章有关联的内容.那article内部嵌套section一般是什么情况呢.如下：

〈article〉

〈h1〉前端技术

〈p>前端技术有那些

〈section>

〈h2>CSS

〈p>样式。

。

〈/p>

〈/section>

〈p〉脚本〈/p〉

〈/section〉

因为文章内section部分虽然也是独立的部分，但是它门只能算是组成整体的一部分,从属关系，article是大主体,section是构成这个大主体的一部分。

本网站的全部文章都是article嵌套一个个section章节,这样能让浏览器更容易区分各个章节所包括的内容。

那section内部嵌套article又有哪些情况呢，如下

〈section〉

介绍:

网站制作成员配备〈/h1〉

〈article〉

〈h2>设计师〈/h2>

。

。

〈h2〉程序员

〈p〉后台写程序的.。

〈article>

〈h2〉前端工程师〈/h2>

〈p〉给楼上两位打杂的..〈/p〉

〈/section>

article使用注意：

∙自身独立的情况下：

用article

∙是相关内容：

用section

∙没有语义的:

用div

8、HTML5其他结构元素标签

HTML5节元素标签包括bodyarticlenavasidesectionheaderfooterhgroup,还有h1—h6address。

∙address代表区块容器,必须是作为联系信息出现，邮编地址、邮件地址等等，一般出现在footer。

∙h1-h6因为hgroup，section和article的出现,h1-h6定义也发生了变化，允许一张页面出现多个h1.

在构造语义化和结构化的标签时的选择要慎重。

也就是说不应该滥用超