HTML5元素<hgroup>和<figure>及<aside>的使用

<hgroup>标注副标题

在 HTML5语义元素的使用 中已经让<header>物尽其用了，其实，HTML5还增加了两个与标题有关的元素：一个是<header>，另一个是<hgroup>,下面看看两个元素的规范做法：

1. 如果有一个普通的标题，它本身不包含任何特殊的内容，那使用一个带编号的标题元素(<h2>、<h3>、<3>)就可以了：

<h2>因为痛，所以叫青春</h2>

2. 如果除了主标题，还有一个主标题，那可以把这两个标题包装在一个<hgroup>元素中，但是，这里边除了编号的标题元素(<h2>、<h3>、<3>)外，其它任何元素也不要放：

<hgroup>
<h2>因为痛，所以叫青春</h2>
<h3>写给独自站在人生路口的你</h3>
</hgroup>

 3.如果除了主标题和主标题，还有其它内容(比如内容摘要、发表日期、作者署名、图片和小标题)，应该把他们放在<hgroup>的后面，再把他们整体放在<header>元素中：

<header>
<hgroup>
<h2>因为痛，所以叫青春</h2>
<h3>写给独自站在人生路口的你</h3>
</hgroup>
<pclass="Byline">[韩]金兰都</p>
</header>

上面代码中用<h3>替换<p>(参见            HTML5语义元素的使用    )，这样做不会改变页面在浏览器中的效果，但是，但却会影响浏览器或其他工具为页面生成的文档摘要(只会关注顶级标题(也就是这里的<h2>),其它标题会显示在浏览器中，但不会列入文档摘要，这样的结果才是合理的)。

用<figure>添加插图

插图与图片的概念不完全一样，HTML5建议把插图想象成一本书的附件，即是说，插图虽独立于文本，但在文本中会提到它。

一般来说，插图应该是浮动的，即应该把插图放在相关文本旁边的一个比较近的位置上(而不是把它们锁定在特定的词或元素旁边)，而且，插图通常还会有与之相伴的浮动图题。

下面给            HTML5语义元素的使用 文章中添加插图：

<p><spanclass="LeadIn">青春</span>, 之所以艰难，是因为孤单。</p>
<figureclass="FloatFigure">
<imgsrc="youth.jpeg"alt="Our youth">
<figcaption>是谁偷走了我们的青春?</figcaption>
</figure>
<p> 童年时，……</p>

当然，只有这些标记是不够的，必须有相应的样式规则，才能把插图定位到适当的位置(添加外边距、控制图题文本的格式等)，以下是样式规则：

/*为插图应用样式*/ 
.FloatFigure {  
      float: left;  
      margin-left: 0px;  
      margin-top: 0px;  
      margin-right: 20px;  
      margin-bottom: 0px;  
}   

记得为图题也要应用样式规则：

/*为图题应用样式*/ 
.FloatFigure figcaption { 
  max-width: 200px; 
  font-size: small; 
  font-style: italic; 
  margin-bottom: 5px; 
} 
以下就是添加插图及应用样式页面的外观：

用<aside>添加附注

新的<aside>元素表示与它周围的文本没有密切关系的内容。使用附注可以介绍另外一个话题，或者对主文档提出的某个观点进行解释，也可以用<aside>来盛放广告、相关的内容链接，以起到引起读者的注意力。

使用<div>元素也可以创造这种效果，但用<aside>元素包装同样的内容，可以让标记更富有意义，如下：

<h3>只有你，独自站在人生边上</h3>
<aside class="PullQuote">
<img src="quotes_start.png" alt="Quote">
青春，痛并快乐着。但是，自己选择的路，就是跪着，也要走完。
<img src="quotes_end.png" alt="End quote">
</aside>
<p>这是个对话已绝，共鸣已亡的时代。</p>

以下是为附注添加的样式：

.PullQuote {
  float: right;
  max-width: 300px;
  border-top: thin black solid;
  border-bottom: thick black solid;
  font-size: 30px;
  line-height: 130%;
  font-style: italic;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 15px;
  margin-bottom: 10px;
}
.PullQuote img {
  vertical-align: bottom;
}

如此，便可以看到下面的附注的效果：