HTML5 增加了很多語義化的標簽，hgroup 就是其中一個，它用來表明標題的集合。如果有主標題、副標題，可以使用這個來包裹一下，一般比較常見的就是網(wǎng)站的標題和網(wǎng)站描述：

但是這樣做并不是太必要，而且還有一些麻煩。一般來說，很難有單純的 hn 標題標簽集合在一起，通常還包含一些其他內(nèi)容，但是使用 hgroup 包裹的內(nèi)容，必須是 hn 標題標簽，否則不會通過 HTML5 驗證。又有誰會為了這麼一個增強語義性用處不大的標簽專門去生成一堆 hn 標簽？

然后好消息是，這個標簽在最新的 HTML5.1 版中被廢除了，以后可以不再用了。但是又面臨了一些問題，如果我有類似這種 聲明主標題和對應(yīng)副標題說明的需求，我應(yīng)該怎樣增強語義性？

W3C給了一些結(jié)構(gòu)建議，下面引用原文然后用我自己的博客標題做一個例子來介紹用其他方法模擬 hgroup 的語義性，使用標點符號分割。

最簡單的方法就是使用標點符號分割主標題和副標題：

<h1>潛行者m: 關(guān)注前端開發(fā)熱愛簡約設(shè)計。</h1>

這種類型比較適合于文章標題，很顯然不適合網(wǎng)站標題。

使用 span 標簽標注副標題說明

<h1>潛行者m
<span>關(guān)注前端開發(fā)熱愛簡約設(shè)計。</span>
</h1>
這種方式比上面好一點，但是感覺還是怪怪的，但是結(jié)構(gòu)比較簡單，如果不怕麻煩，推薦下面一種方法。
使用 header 標簽包裹標題和描述

header 也是 HTML5 新增的語義性標簽，用來表示頭部信息，一般不會被廢棄。我們可以這樣做：

<header>
<h1>潛行者m</h1>
<p>關(guān)注前端開發(fā)熱愛簡約設(shè)計。</p>
</header>
強烈推薦這種寫法，這樣保證了語義性的同時，也保證了代碼的整潔。