HTML5 标签 hgroup 已经被废除

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

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

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

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

使用标点符号分割

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

<h1>潜行者m: 关注前端开发热爱简约设计。</h1>

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

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

<h1>潜行者m
   <span>关注前端开发热爱简约设计。</span>
</h1>

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

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

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

<header>
<h1>潜行者m</h1>
关注前端开发热爱简约设计。

</header>

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