見出しタグを使用し、副題を作成することができるhgroupタグをご存じですか？副題によって読者の理解を補助できる便利なタグですが、実はHTML5からは廃止されてしまいました。
まだ現段階では実装でき、多くのブラウザでサポートされていますが、とても安定的な状態ではありません。
今回は、hgroupタグの
・基本的な使い方
・hgroupタグの装飾方法
・hgroupタグを使用しない副見出しの作成方法
について説明します。
目次
hgroupタグとは
hgroupタグの読み方
hgroup：エイチグループ
hgroupタグの説明
hgroupタグはh1やh2など、見出しを表すタグを一つにまとめるタグで、見出しタグをhgroupタグで囲うようにして使用します。これにより、主題に加え副題を作成できるのです。
hgroupタグで利用できる属性
hgroupタグでは全要素で使用可能な、グループ属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 5 |
| Edge | 12 |
| Firefox | 4 |
| nternet Explorer | 9 |
| Opera | 11.1 |
| Safari | 5 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 2.2 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 11.1 |
| iOS版Safari | 4.2 |
| Samsung Internet | 完全対応 |
hgroupタグの基本的な使い方
hgroupタグの使い方
まずはhgroupタグの書き方を見ていきましょう。先頭にhgroupタグを書き、その中にh1タグとh2タグを書きます。見出しタグを書き終えたら、hgroupタグで閉じます。
See the Pen
hgroupタグの書き方 by rabbittyu (@rabbittyu)
on CodePen.
通常ではWebページの作成時は、見出しタグを1つずつ使用していきますが、hgroupタグを使用することで「副見出し」を付けることができます。実際に簡易的なサイトを作成したので、それを見ながら確認していきましょう。
See the Pen
hgroup 使い方 by rabbittyu (@rabbittyu)
on CodePen.
hgroupタグの中でh1タグとh2タグを使用したため、h1タグの副題をh2タグで作成することができました。hgroupタグはこのようにして、副題を作成するために使用します。
またCSSでhgroupタグを指定して装飾することで、主題と副題に枠線を引くことができました。もちろんh1タグh2タグへの装飾も有効なので、それぞれへの装飾はh1タグとh2タグを指定して行います。
ここではh1タグの先頭に地球アイコンを加え、h2タグは背景色と左枠線のみを設定しました。
hgroupタグを使用せずに副題を作成する方法
hgroupタグはまだ実装できる段階ではありますが、HTML5の仕様書からは廃止されているため注意が必要です。ここではhgroupタグの代替方法を2つご紹介します。
pタグを使用して副題を書く
この方法は、まずh1タグで通常通り主題を付け、副題をpタグで付ける方法です。pタグだと文字が小さくなってしまうため、CSSでfont-size: 20px(文字サイズ20px)とfont-weight: bolder(文字の種類:太字)を適用しています。
またhgroupタグのように主題と副題を一緒に扱うために、h1タグとpタグをdivタグで囲みました。
See the Pen
hgroup代替 by rabbittyu (@rabbittyu)
on CodePen.
brタグとspanタグを使用して副題を書く
この方法は主題をh1タグで付けた後、brタグで改行し、spanタグの中に副題を書く方法です。全てh1タグで囲っているため、副題の部分のみspanタグを指定してCSSを適用します。
CSSでは文字サイズのみ20pxになるように変更しています。
See the Pen
hgroup代替2 by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回は副題を付けることができるhgroupタグについてご紹介しました。とても便利なタグなので、HTML5で廃止されてしまったのが残念です。
現在はまだ実装できる段階ですが、安定的な状態とは言えないため、後半でご紹介した代替方法を利用しましょう。
参考文献：
MDN web docks <hgroup>
HTML Living Standard
あなたが見逃しているかもしれないHTML5で廃止された5つの要素・属性
