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;
}

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