html5语义化标签

html5语义化标签

在工作上虽然大多数都是移动端的webapp，但是用到的html5语义化标签还是不多，大部分还是以div这个容器为主，今天就来整理一下那些html5新增的容器标签。

1、header，主要包括hgroup和h1-h6，可以是网页的头部，也可以是不同段落的头部。

<header>
    <hgroup>
        <h1>标题</h1>
        <h2>副标题</h2>
    </hgroup>
</header>

2、nav，主要代表页面的导航部分。

<nav>
    <ul>
        <li>temp1</li>
        <li>temp2</li>
        <li>temp3</li>
    </ul>
</nav>

3、section，代表文档中的段，会带标题。

<section>
    <h1>section</h1>
    <article>
        <h2>section使用</h2>
        <p>内容</p>
    </article>
</section>

4、article，代表一个文档或者页面，很容易跟section混淆。通常会带有footer

<article>
    <header>
        <h1>标题</h1>        
    </header>
    <p>内容</p>
    <footer>
        <p>版权</p>
    </footer>
</article>

5、footer，代表网页或section的页脚。

<footer>
    <p>版权信息</p>
</footer>

这里介绍典型的h5新标签；