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

因为痛，所以叫青春
写给独自站在人生路口的你

上面代码中用

替换

(参见            HTML5语义元素的使用    )，这样做不会改变页面在浏览器中的效果，但是，但却会影响浏览器或其他工具为页面生成的文档摘要(只会关注顶级标题(也就是这里的

),其它标题会显示在浏览器中，但不会列入文档摘要，这样的结果才是合理的)。

用

添加插图

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

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

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

青春, 之所以艰难，是因为孤单。

童年时，……

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

/*为插图应用样式*/
.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;
}
以下就是添加插图及应用样式页面的外观：

用