HTML中结构化标签的使用

H5中新添加的结构标签种类常用
main标签

article标签

section标签

aside标签

nav标签

header标签

footer标签

为什么用这些结构标签

H5中新添加的结构标签种类（常用）

main标签

main标签表示页面的主要显示内容，页面有且只有一个，不应该被任何其他结构标签包含

<main>
<h1>main 标签使用</h1>
<p>有效的使用main标签</p>
</main>

article标签

article标签表示页面中独立的与上下文没有任何关系的内容区域，可以结合h＊、p、section等标签进行使用；该标签可以被嵌套使用

<main>
<article>
<h1>有效使用h5新标签</h1>
<header>
<p><span>date：2016／11／11</span><p>
</header>
<section>
<h2>方法一</h2>
<p>......</p>
<p>......</p>
</section>
</article>
</main>

section标签

section可以用来表示内容分组，可以被放在main，article等标签中；

<main>
<section>
<p>...</p>
<section>
<section>
<p>...</p>
</section>
<article>
<section>
</section>
</article>
</main>

aside标签

aside标签顾名思义，就是表示相关的信息，可以用来表示侧边栏，tips等内容

<main>
<article>
<h1>...</h1>
<aside>
<p>相关内容</p>
</aside>
</article>
</main>

nav标签

nav元素主要用来表示页面导航。

<nav>
<a href="1.html">1</a>
<a href="2.html">2</a>
</nav>

header标签

header标签，主要用来表示一些页面的元素数据信息，例如页面的来源等。

footer标签

footer标签，主要用来表示一些页面的元素数据信息。

为什么用这些结构标签

让整个网站的结构更加的层次话，例如各个终端的解析

迫使开发人员在页面开发的过程中多点时间进行页面结构的思考

SEO更加的友好

页面可读性更强，后期维护更加容易