html5里面新增加了一些标签，这些标签使得html更语义化，本文主要提到的标签有：section、article、header、nav、footer、hgroup、aside。将这些标签运用在青岛网站制作和设计中，将更加有利于网站的优化，和浏览体验。

section标签
<section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。它用来表现普通的文档内容或应用区块，通♓常由内容及其标题组成。但section元素标签并非一个普通的容器🌳元素，它表示一段专题性的内容，一般会带有标题。

当我们描述一件具体的事物的时候，通常鼓励使用article来代替section；当我们使用section时，仍然可以使用h1来作为标题，而不用担心它所处的位置，以及其它地方是否用到；当一个容器需要被直接定义样式🅺或通过脚本定义行为时，推荐使用div元素而非section。

article标签
<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论൩等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

nav标签
nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更♕加精确，同时对于屏幕阅读器等设备的支持也更好。

<nav>
 <ul>
 <li><a href="//bynetsys.com">加拿大预测网-在线预测</a></li>
 <li><a href="#">html+css</a></li>
 <li><a href="#">jQuery</a></li>
 <li><a href="#">SEO优化</a></li>
 <li><a href="#">wordpress教程</a></li>
 </ul>
</nav>
但并不是页面上的所有链接团体都需要放在nav标签内，它主要是由页面的主要导航块组成。例如，我们通常在网站的页脚里放一组链接，包括服务条款、网站介绍、版权声明等，这时，我们通常使用fo🐭oter，而不是nav。

一个页面可可以包ꦫ含多个nav标签，作为页面整体或者不同部分的导航。在下面的例子中，有两个nav标签，一个是网站的主体导航，另外一个是当前页面本身的辅助链接导航。

<h1>litush</h1>
<nav>
    <ul>
        <li><a href="/">加拿大预测网-在线预测</a></li>
 <li><a href="#">html+css</a></li>
 ...more...
    </ul>
</nav>
<article>
    <header>
 <h1>html5语义化标签之结构标签</h1>
 <p><span>发表于</span>2011-12-22</p>
    </header>
    <nav>
 <ul>
     <li><a href="#">子导航</a></li>
     <li><a href="#">子导航</a></li>
     ...more...
 </ul>
    </nav>
    <div>
  <section id="public">
     <h1>section里面仍然可以再用h1标签</h1>
     <p>...more...</p>
  </section>
  <section id="destroy">
     <h1>section里面仍然可以再用h1标签</h1>
     <p>...more...</p>
  </section>
 ...more... </div>
    <footer>
 <p><a href="#">关于我们</a> |
 <a href="#">友情链接</a> |
 <a href="#">杂七杂八</a></p>
    </footer>
</article>
<footer>
    <p><small>© copyright 2011 </small></p>
</footer>
nav标签本身并不要求包含一个列表，它还可以包含其它内容形式。

<nav>
    <h1>Navigation</h1>
    <p>You are on my home page. To the north lies <a href="/blog">
my blog</a>, from whence the sounds of battle can be heard. To the
east you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mou
 you can spy a little figure who appears to be me, despe
 scribbling a <a href="/school/thesis">thesis</a>.</p>
    <p>To the west are several exits. One fun-looking exit is la
<a href="//games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="//isp.example.net/">ISP™</a>.</p>
    <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one
 point you see a rat run quickly out of the page.</p>
</nav>
aside标签
aside标签用来装载非正文的🎉内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接ꦡ，侧边栏等等。

header标签
♔ <header>标签定义文档的页眉，通常是一些引𝔉导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单💟、<nav>导航等。

<header>
 <h1>力图数字科技</h1>
 <p>专注于web前端开发</p>
</header>
<article>
 <header>
  <h1>html5语义化标签之结构标签</h1>
  <p>article、section、hgroup、aside、nav...</p>
 </header>
 <p>...这里面包含很多东西...</p>
</article>
footer标签
footer标签定义section或document的页脚，包含了与页面🐭、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和<header>标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的ဣ页脚了。

hgroup标签
hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连꧅续的h系列的标签元素，则可以用hg𝓰roup将他们括起来。

 <hgroup>
  <h1>力图数字科技</h1>
 <h2>专注于web前端开发</h2>
 </hgroup>