HTML・CSS:見出しをまとめて1つのグループにする、hgroupタグ(HTML5では廃止されている)

hgroupタグとは

hgroupタグは、見出しに副題を付ける効果があります。実際にやってみましょう。

hgroupタグの見出しだよ

副題~いちもんじはカルボナーラ派~

↑のコードの中身はこうなっています。↓

<hgroup>
<h2>
hgroupタグの見出しだよ
</h2>
<h3>
副題~いちもんじはカルボナーラ派~
</h3>
</hgroup>

主題は<h2>タグで、副題は<h3>タグで括りました。この副題の部分、<p>タグでも大丈夫そうです。↓

hgroupタグの見出しだよ

副題~いちもんじはカルボナーラ派~

<hgroup>
<h2>
hgroupタグの見出しだよ
</h2>
<p>
副題~いちもんじはカルボナーラ派~
</p>
</hgroup>

副題の大きさというか太さというか、見た目がちょっと違いますが、ブロック的にはまとまっているので副題としてみなされているものだと思われます。

今では廃止されている

ここまで調べといてなんなんですが、この<hgroup>タグ、今は廃止されています。昔のものは対応していたので今はとりあえずいいんですが、これから先は上手く表示されないみたいな不具合が起こってくると思われます。なので、副題を付けたいときには<div>タグとかで無理くり括ってあげるみたいなことになるんじゃないでしょうか。そのうち研究します(多分永遠にしない)。

タイトルとURLをコピーしました