1、经常使用标签
<header>、<footer>、<nav>、<aside>、<hgroup>、<section>、<article>、<main>算法
2、标签简介
<header>
<header>标签表明页面或片断的头部，一般包含页面（或片断）的标题、介绍信息或一组导航。chrome
一个页面里能够有多个<header>标签。ide
<header>标签不能包含在<footer>、<address>和其余<header>标签中。工具
示例场景：测试
注意事项：
切勿过分使用<header>，<header>包含的是头部的一组信息，若头部只有标题，直接将标题“裸”出来就好了，没必穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq807bg0ruy4yZsdDtoZWFkZXImZ3Q7oaM8YnIgLz5CQUQ6PGJyIC8+PGltZyBzcmM9"http://www.it165.net/uploadfile/files/2014/0627/20140627174851205.jpg" alt="\" />spa
GOOD:.net
<footer>
<footer>标签表明页面或片断的尾部（“脚”），一般包含该页面（或片断）的一些基本信息，如做者、版权、相关文档的连接、联系信息等。orm
一个页面里能够有多个<footer>标签。seo
示例场景：ci
<nav>
<nav>标签表明页面的导航区域，一般包含一组导航连接。
一个页面中能够有多个nav元素，做为页面总体或者不一样部分的导航。
并不是页面上全部的连接组都须要包含于<nav>中——只有那些由主要的导航连接组成的部分才适用。好比<footer>中的连接组一般就不需穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq3xdTaJmx0O25hdiZndDvW0KOs1rG909PDJmx0O2Zvb3RlciZndDuw/LqsvLS/yaGjPC9wPgo8cD4mbHQ7bmF2Jmd0O7bUzt7Vz7Ctt8ezo9PQ08OjrL/J0tTWsb3TzPi5/S/M+LW9wbS906OotbHIu6Osx7DM4crHtPOyv7fWstDVz9PDu6fS0b6tyrnTw9ans9ZINbXExsHEu9TEtsHG98HLo6mhozwvcD4KPHA+yr7A/bOhvrCjujwvcD4KPHA+PGltZyBzcmM9"http://www.it165.net/uploadfile/files/2014/0627/20140627174852208.jpg" alt="\" />
<aside>
<aside>标签表明一个页面区域，包含和页面主要内容相关，但又能够单独存在的那些内容。一般表现为侧边栏、广告等。
示例场景：
<hgroup>
当一个标题有多个层级时，<hgroup>用于将不一样层级的标题（h3到h6）归组，以便实现子标题、题头标语等。
<hgroup>“包装”的标题元素在h5大纲中只显示一级标题。
请勿滥用<hgroup>，若只有一级标题，直接用hn便可。
<hgroup>是独立的，无需刻意用<header>包裹。
示例场景：
<section>
<section>标签用于对文章或页面上的内容进行分块，一般由同一主题的内容及其标题组成。
请勿滥用<section>，若一块内容仅在视觉上是一个总体，语义上并不是一个主题，用div便可。
示例场景：
<article>
<article>标签表明页面中独立的、完整的、能够独自被外部引用的内容。一般为一篇论坛帖子、评论、文章、新闻、协议内容等，也能够是一个交互性的小部件，或者其余任何独立的内容项目。
一个<article>元素一般有它本身的标题。
示例场景：
<main>
<main>标签表明页面的主内容区。
<main>中的内容须是这个页面独有的，而不能是会同时出如今其余页面中的（像侧边、导航等公共内容）。
一个页面中只能有一个<main>。
<main>不能在<article>、<aside>、<header>、<footer>、<nav>的里面，即<main>的级别不能低于这些标签。
示例场景：
3、h5大纲
查看方式
chrome下“工具——>扩展程序——>HTML5 Outliner——>启用”，启用后chrome右上角会出现下图所示的图标，点击便可。
本地文件不能用上述工具查看，可将代码粘至在线工具HTML 5 Outliner中进行查看。
注意事项
一、建议为每个<nav>、<aside>、<article>、<section>都添加标题，一方面为了语义化，另外一方面，若没有标题，h5大纲中会显示“Untitled XXX”，如图：
视觉上不须要显示的标题能够经过样式隐藏。
二、h5中<nav>、<aside>、<article>、<section>元素都是独立的，会建立一个新的“节”，也就是文档大纲中一个新的节点。在h5中，每一个节均可以有本身的<h3>元素。
上述节点能够有本身的<h3>元素，并且也应该从<h3>开始，否则默认显示会有问题，如图：
此为chrome下的测试结果，初步猜想多是页面解析时在独立节点<section>内找不到其（两个<h4>标题“经常使用标签”和“标签简介”）相应的一级标题<h3>，计算样式时就按原h4大纲的方式处理了。
三、用开发人员工具能够看出，h5算法会自动为<body>和<nav>、<aside>、<article>、<section>元素添加id，而元素<header>、<footer>和<main>没有，这说明这三个元素没有建立独立的“节”。如图：
四、默认展示上，“节”的层级越多，其内部的hn字号越小，如图：
4、思考题
一、跟据h5的新规定，<header>能够出现屡次，那么究竟什么状况下才适合用多<header>呢？<header>过多会不会引起其余问题，好比被seo屏蔽？面对多个header，读屏软件又会怎么处理呢？
二、对于内容关联度比较高的模块，咱们能够用<section>划分，好比本文中的“经常使用标签”、“标签简介”、“h5大纲”、“思考题”几个模块就是用<section>包裹的，同时，咱们也能够用原来的方式——文档标题用<h3>，这几个模块的标题用<h4>来实现。这两种方式生成的h5大纲是同样的，从语义上来讲也都是合理的，那么，究竟何时用<section>划分模块，何时用hn递减方式划分模块合适呢？二者直接能否找到一个可量化的分界点？
三、本文讨论了这么多，那么，咱们为何要锱铢必较地去探讨每一个标签怎么用，用错了会怎样？咱们又为何要遵循h5大纲，大纲不良又会怎样？如你们所知，良好的结构和大纲会使页面语义化，这对于无障碍（主要是读屏软件）和seo都是颇有帮助的，除此以外，还有么其余更多更深的意义呢？标签虽易，用好不易，且用且深思……