html5 新增语义标签

一份模板：

<body>

  <header>

    <hgroup>

      <h1>Page title</h1>

      <h2>Page subtitle</h2>

    </hgroup>

  </header>

  <nav>

   <ul>

     Navigation...

   </ul>

  </nav>

  <section>

   <article>

     <header>

       <h1>Title</h1>

     </header>

     <section>

       Content...

     </section>

   </article>

   <article>

     <header>

       <h1>Title</h1>

     </header>

     <section>

       Content...

     </section>

   </article>

  </section>

  <aside>

   Top links...

  </aside>

  <figure>

    <img src="..."/>

    <figcaption>Chart 1.1</figcaption>

  </figure>

  <footer>

   Copyright ©

   <time datetime="2010-11-08">2010</time>.

  </footer>

</body>

来自：http://slides.html5rocks.com/#semantic-tags-1

html5有丰富的语义化标签，在没有html5以前，你可能会这样写:

<html>

<head></head>

<body>

<div id="header">

</div>

<div id="nav">

</div>

<div id="content">

     <div id="article">

     </div>

     <div id="sidebar">

     </div>

</div>

<div id="footer">

</div>

</body>

</html>

Just looking at this HTML you can clearly see the different sections and just reading it you can clearly understand what each div will be used for thanks to the ID tags.

But how does the search engines know what these are for?

This is where HTML5 comes into it's own, below is the same structure but in HTML5.

<!doctype html>

<html>

<head></head>

<body>

<header>

</header>

<nav>

</nav>

<section>

     <article>

     </article>

     <aside>

     </aside>

</section>

<footer>

</footer>

</body>

</html>

Now again you can see exactly what these sections are and what content they are going to hold, but as these are defined tags the search engines will know what the sections are.

Semantic Tags

The main change with HTML5 is to create more semantic tags so they will explain what sort of content is going to be put into these tags.

Header

<header>

</header>

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required.

It will contain the header for the page and/or section therefore header can appear in multiple places on the page. Can also be an ideal place for logos, search forms or a table of contents for the page and/or section.

Nav

<nav>

</nav>

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

Therefore an ideal place for a nav tag to go will be in a header or footer. A header will normally hold links which help navigate around the site, also a footer will normally hold important links for the website.

Section

<section>

</section>

Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.

Section is the most generic of the structural tags, a section is defined as the thematic grouping of content. A section will typically content it's own header and content, which can be used separate to the page.

An example of a section would be a tabbed page or numbered sections of a page.

In typical web design you can separate the content of the website into different sections, introductions, features, news, contact etc. These example will be perfect candidates for section.

Aside

<aside>

</aside>

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Normally used for content which is related to the main content but can be independently moved, this is ideally used for quotes or a sidebar. They are linked to the page but can also be used independently.

Article

<article>

</article>

The article element consists of self-contained content in a document, page, application, or site.

The content of the article is intended to be independently distributed or reused elsewhere.

This is ideally used for page content, a forum post or a blog post. It can be separated from the page and still hold value. This area of the page can then be syndicated.

Footer

<footer>

</footer>

The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Footers will normally appear at the end of a page but like headers you can have multiple footers per page as they are used to define the end of a section.

HGroup

<hgroup>

</hgroup>

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

（说明：

hgroup已经在html5.1中淘汰！

）

转自：http://www.paulund.co.uk/what-is-html5

HTML5 增加了很多语义化的标签，hgroup 就是其中一个，它用来表明标题的集合。如果有主标题、副标题，可以使用这个来包裹一下，一般比较常见的就是网站的标题和网站描述：

但是这样做并不是太必要，而且还有一些麻烦。一般来说，很难有单纯的 hn 标题标签集合在一起，通常还包含一些其他内容，但是使用 hgroup 包裹的内容，必须是 hn 标题标签，否则不会通过 HTML5 验证。又有谁会为了这么一个增强语义性用处不大的标签专门去生成一堆 hn 标签？

然后好消息是，这个标签在最新的 HTML5.1 版中被废除了，以后可以不再用了。但是又面临了一些问题，如果我有类似这种 声明主标题和对应副标题说明 的需求，我应该怎样增强语义性？

W3 给了一些结构建议，查看原文请点击这里。下面引用原文然后用我自己的博客标题做一个例子来介绍用其他方法模拟 hgroup 的语义性

使用标点符号分割

最简单的方法就是使用标点符号分割主标题和副标题：

<h1 ><a name="toc-2"></a>潜行者m: 关注前端开发热爱简约设计。</h1>

这种类型比较适合于文章标题，很显然不适合网站标题。

使用 span 标签标注副标题说明

<h1>潜行者m

   <span>关注前端开发热爱简约设计。</span>

</h1>

这种方式比上面好一点，但是感觉还是怪怪的，但是结构比较简单，如果不怕麻烦，推荐下面一种方法。

使用 header 标签包裹标题和描述

header 也是 HTML5 新增的语义性标签，用来表示头部信息，一般不会被废弃。我们可以这样做：

<header>

<h1 ><a name="toc-5"></a>潜行者m</h1>

<p>关注前端开发热爱简约设计。</p>

</header>

强烈推荐这种写法，这样保证了语义性的同时，也保证了代码的整洁。

http://www.w3ctech.com/p/1087