Topics

At riskは避けるべきだったか。。。やっぱり。。。

このサイトでも使用しているHTML5で追加されたhgroupタグが、先月末に勧告候補から削除されました。
hgroupはそもそも勧告候補の中でも「at risk」とされていたので、削除の可能性はあったわけですが、次の理由から何となく使っていたんです。

セクション要素内で見出しをグループ化するときに、単独の見出しとマージンの取り方を変えるのにhgroup内に見出しがあるかどうかで、区別すればいいじゃん！

それぞれの見出しの後には後続する見出し以外の要素がある場合。

<section> 
<h1>大見出し</h1> 
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 
<h2>中見出し</h2> 
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 
・・・
<section>

大見出しの直下に中見出しがある場合は<hgrouup>で囲むとしてみる。

<section> 
<hgroup> 
<h1>大見出し</h1> 
<h2>中見出し</h2> 
</hgroup> 
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 
・・・ 
<h2>中見出し</h2> 
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 

<section>

で、

h1{margin-bottom:1.5em;}
h2{margin-bottom:1em;}
hgroup{margin-bottom:1em;}
hgroup h1{margin-bottom:.5em;}
hgroup h2{margin-bottom:.5em;}

上の例では、見出しがhgroupの中にない場合は、大見出し（h1）の下には1.5文字分のマージンが、中見出し（h2）の下には1文字分のマージンが後続要素に対して適用されます。
hgroupの中に見出しがあるパターンでは、h1、h2タグの下部マージンは0.5文字分と狭くなります。そして、hgroup自体には1文字分のマージンが設定されているため、設定したフォントサイズで1文字分が後続要素とのマージンとなります。

あまりお勧めできたものではないのです。

本来的なHTML5のアルゴリズムからすると、hgroup内の要素（h1～h6を格納可能）セットをグループ化してよりレベルの低い見出しを小見出しやサブタイトルとしを表現することになります。
一方、上記の使い方はある意味で、そうはなっていなくて、セクションの主に開始部分などで、「見出し見出し」と要素が連続する場合のデザイン調整みたいな使い方をしています。
文法的には問題ないですが、構文としては我ながらあまりよくありません。
つまり、前述の「セクション要素内で見出しをグループ化するときに、単独の見出しとマージンの取り方を変えるのにhgroup内に見出しがあるかどうかで、区別すればいいじゃん！」というのはよろしくないわけです。動機が不純なんですね。

文脈的にいうと、サブタイトルなどは<p>タグなどで代替えされうるからという考え方なんでしょうか？
または上位のセクション要素の中でheaderを使うということも考えられます。
ですが、headerの方がむしろhgroupよりも本来的な意味から遠ざかってしまいます。

不純な動機ではありましたが、セクション要素の中では、初出の見出しがそのセクションの見出しであり、初出の見出しのすぐ後に中見出しや小見出しが来ることがよくあるわけです。それを毎回class指定等で書き分けるのもどうかなと思いましたし、スクリプト等で後続のタグを解析してマージンの出し分けをするまでもなく、hgroupを使用することで解決するのは悪いアイディアではなかったとは思っていますが、こういうのって微妙ですね。

修正する？

もちろん、勧告から外れたところで、ブラウザがタグを理解しなくなるわけではないですが、当然ながら今後は使わないようにする必要があります。
このサイトに関しては、近日中に修正しようかと思っています。

次は、 追加勧告候補として追加されたmain要素について書きますね。