HTML5 标签 hgroup 已经被废除

HTML5 增加了很多语义化的标签,hgroup 就是其中一个,它用来表明标题的集合。如果有主标题、副标题,可以使用这个来包裹一下,一般比较常见的就是网站的标题和网站描述:网站标题和副标题常用 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>
<p>关注前端开发热爱简约设计。</p>
</header>

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