html5结构标签

HTML5网页标准结构

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为HTML5的出现消失了，这就是我们平时说的“语义”

html5的网页标准结构

结构标签

1. header

header标签定义一个页面或一个区域的头部

header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo

<header>
    <h1>某某网站</h1>
</header>

2. article

article标签定义一篇文章

article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论等

3. nav

<article>
    <h1>一篇文章标题</h1>
    <p>文章的内容</p>
</article>

nav标签定义导航链接

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分

<nav>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
</nav>

4. section

section标签定义一个区域

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

<section>
    section标签
</section>

5. aside

aside标签定义侧边栏

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

<article>
    <h1>一篇文章标题</h1>
    <p>文章的内容</p>
    <aside>
        <h2>作者</h2>
        <p>作者简介</p>
    </aside>
</article>

6. main

main 标签规定文档的主要内容

main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单

在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<aside>、<footer>、<header> 或 <nav>

<main>
    <h1>网站主题</h1>
    <p>网页内容</p>
    <article>网页文章1</article>
    <article>网页文章2</article>
</main>

7. footer

footer标签页脚

footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
    <p>页脚</p>
</footer>