HTML5新语义化标签

标签介绍

• header — 页眉
• main — 主体
• nav — 导航
• article — 独立的内容
• section — 一个区域，跟div的功能和语义是一样的
• aside — 辅助信息的内容
• footer — 页脚
• figure — 描述图像或视频
• figuretion — 描述图像或视频的标题部分
• hgroup — 标题组合

普通的标签

缺点
1.不利于SEO搜索引擎对页面内容的抓取
2.文档结构定义不明确

于是HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签

基本结构

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
     <section>
       ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等
<hgroup> 标签用于对网页或区段（section）的标题进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）
<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）
<nav>    定义主体模块或者导航链接的集合，一般用在整个页面主要导航部分上，不合适就不要用nav元素
<article>  是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，
可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有
标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签
有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
<aside>  与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
<section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。
一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>一张页面可以用section划分
为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为
样式展示和脚本的便利，可以用div。
<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于描述图像或视频。
<figcaption>  多用于描述图像或视频的标题部分。