HTML5中的新结构标签

发表于 | 分类于 |
示例图

传统
常规使用div+语义class

HTML5
HTML5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>my page</title>
    </head>
    <body>
        <header>header</header>
        <nav>nav</nav>
        <article>
            <section>section</section>
        </article>
        <aside>aside</aside>
        <footer>footer</footer>
    </body>
</html>
section

定义文档中的节。它用来表现普通的文档内容或应用区块。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

1
2
3
4
5
6
7
8
9
<section>
    <h1>section是什么？</h1>
    <h2>一个新章节</h2>
    <article>
        <h2>关于section</h2>
        <p>section的介绍</p>
        ...
    </article>
</section>
article

特殊的 section 标签，它比 section 具有更明确的语义，它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候，通常鼓励使用 article 来代替 section 。

article 会有标题部分（通常包含在header内），也可以包含 footer。

article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。

1
2
3
4
5
6
7
8
9
10
<article>
    <header>
        <hgroup>
            <h1>这是一篇介绍HTML 5结构标签的文章</h1>
            <h2>HTML 5的革新</h2>
        </hgroup>
        <time datetime="2011-03-20">2011.03.20</time>
    </header>
    <p>文章内容详情</p>
</article>

可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其他部分，是html代码在语义化方面更加精确，同事对于屏幕阅读器等设备的支持也更好。

1
2
3
4
5
6
7
<nav>
    <ul>
        <li>厚德IT</li>
        <li>FlyDragon</li>
        <li>J飞龙天惊</li>
    </ul>
</nav>
aside

aside 标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面传达的信息。例如广告，成组的链接，侧边栏等等。

1
2
3
4
<aside>
    <h1>作者简介</h1>
    <p>厚德IT</p>
</aside>

header 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页的头部，也可以写在网页的内容里面。

通常header 标签至少包含一个标记（h1 - h6 ），还可以包括hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

1
2
3
4
5
6
<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

footer 标签定义section 或document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。它和header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer ，那么它就相当于该区段的页脚了。

1
2
3
4
5
6
<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

hgroup

hgroup 标签是对网页或区段section 的标题元素（h1 - h6 ）进行组合。例如，在一区段中你又连续的h系列的标签元素，则可以用hgroup 将他们括起来。

1
2
3
4
<hgroup>
    <h1>这是一篇介绍HTML 5结构标签的文章</h1>
    <h2>HTML 5的革新</h2>
</hgroup>

fivure

用于对元素进行组合。多用于图片于图片描述组合。

1
2
3
4
<figure>
    <img src="img.gif" alt="figure标签"  title="figure标签" />
    <figcaption>这儿是图片的描述信息</figcaption>
</figure>