HTML5で追加された「主題と副題（見出し<h1>〜<h6>）をグループ化」する<hgroup>タグがW3Cの仕様から削除され、Validator（バリデーター）でエラーになったことを機にマークアップを変更しました。

サイト制作をする際にHTML5でマークアップするようになってから暫く立ちますが、最近制作したサイトを久しぶりにW3CのMarkup Validationに通した所、1件のエラーを指摘されました。

Validatorのエラー内容は、<hgroup>でのマークアップ

指摘された内容を要訳すると、

• <hgroup>は、<header>の子要素として許可されていません
• <hgroup>要素は廃止されました

調べてみると、HTML5で追加された<hgroup>は2013年4月に勧告候補から削除され、HTML 5.1 の仕様からも当然削除とのことでした。

見出しをグループ化する際に使用する<hgroup>は、HTML5でのページ内容のアウトライン（階層構造）を明確に行う為に便利な要素でしたので、マークアップに使用しているサイトも多いと思います。

ページ内容のアウトラインがどのようになっているかは、HTML 5 Outlinerで簡単に確認することができます。

<hgroup>を使用したままでもサイトの表示には問題ありませんが、作業自体は簡単ですので以下変更内容になります。

HTML5 : <hgroup>のマークアップを変更

<hgroup>を使用している場合は、大体が以下のようなマークアップがされていると思います。
WordPressデフォルトテーマの「Twenty Eleven」や「Twenty Twelve」のサイトタイトルが記載されている箇所でもこのようになっています。

<header>
	<hgroup>
		<h1>大見出し（タイトル）</h1>
		<h2>中見出し（サブタイトル）</h2>
	</hgroup>
</header>

変更点

• <hgroup>タグを<div>タグに変更するか、不要なら削除
• <h2>タグを<p>タグに変更

<header>
	<div>
		<h1>大見出し（タイトル）</h1>
		<p>中見出し（サブタイトル）</p>
	</div>
</header>

もしくは、

<header>
	<h1>大見出し（タイトル）</h1>
	<p>中見出し（サブタイトル）</p>
</header>

一見、<hgroup>だけを変更すれば良さそうにも思えますが、見出しのグループ化を指定していた<hgroup>を外した状態でそのまま<h2>タグを使うと、ページ内容のアウトライン（階層構造）が変わってしまうので注意してください。

以上、「HTML5の<hgroup>がW3Cの仕様から削除されたのでマークアップを変更」でした。