HTML 5での<hgroup>要素について。
- 平成22年 3月 8日 公開
- テーマ
HTML 5で新たに導入される予定の<menu>要素についてのメモです。
などを書いております。
- 平成22年 3月 8日現在の仕様草案を基にしているため、今後の変更も予想されます。
<hgroup>要素とは。
<hgroup>要素とは、HTML 5にて導入予定の新要素で、見出し(<h○>要素)の集まりです。
文書全体から見ると、<hgroup>要素の内容となる<h○>要素一つ一つが独立した見出しとはされず、それらを纏めた<hgroup>要素全体で一つの見出しと見なされます(※1)。
また、<hgroup>要素の等級は、内容となる見出しの中で最も高い等級となります。
内容となる見出しの等級差は、見出し内での相対的な等級差でしかなくなります。
<hgroup>要素のマークアップ例。
例えば、以下のような<hgroup>要素があったとします。
<hgroup><h1>○○のウェブサイト作成入門</h1><h2 class="subTitile">〜HTML. CSS, JAVAスクリプトなど〜</h2></hgroup>
この場合、HTML 5に対応したユーザエージェントは、内容となっている双方の見出しを纏めて一つの見出しと見なします。
また、この<hgroup>要素は、内容となっている見出しで最も高い等級の見出しが<h1>要素となっているため、等級としては<h1>要素と等価となります。
内容としては、<h1>要素に較べて、サブタイトルの見出しとなる<h2>要素は相対的に下位の見出しとなりますが、文書全体から見たら第一等級見出しの一部となります。
<hgroup>導入で得られる利点。
<hgroup>要素は今までになかった概念なので、それが本当に必要なのか疑問に感じる方もいらっしゃるかも知れません。
しかし、<hgroup>要素を導入する事で、今までのHTML 4/XHTML 1での問題点が解消されるので酢。
-
制作者が過去に書いた文書でもこの問題を取り上げておりますのでご一読いただけたら幸いです。
今までのHTML/XHTMLでの問題点。
今までのHTML 4.01やXHTML 1.x或いはISO-HTMLでは、サブタイトルを伴う見出しについて、これが正解と思われるような方法が存在しませんでした。
例えば、先ほどの例では、
と言う見出し本体○○のウェブサイト作成入門
と言うサブタイトルの見出し〜HTML. CSS, JAVAスクリプトなど〜
とありますが、これらは二つで一つの見出しと見るべきである一方、それぞれが一つのブロックと見るべきでもあります。
マークアップ案その一：サブタイトルを<h2>要素とする。
メインの見出しもサブタイトルの見出しもそれぞれが一つのブロックであると言う考えを持つのであれば、以下のように二つの見出しをそれぞれマークアップする事が考えられます。
<h1>○○のウェブサイト作成入門</h1><h2 class="subTitile">〜HTML. CSS, JAVAスクリプトなど〜</h2>
しかし、そうすると他のサブタイトルを伴わない文書との兼ね合いが問題になります。
この見出しが書かれた文書の場合、直下のセクションへの見出しは当然<h3>要素となる筈ですが、他のサブタイトル見出し(ここでは<h2>要素)を持たない文書では、直下のセクションへの見出しは<h2>要素としなければなりません。
そうすると、サブタイトルのある文書と層でない文書で、CSSのプロパティ定義が異なってしまう事になり不便を来たしてしまいます。
マークアップ案その二：サブタイトルをクラスを与えた<h1>要素とする。
そこで、
<h1>○○のウェブサイト作成入門</h1><h1 class="subTitile">〜HTML. CSS, JAVAスクリプトなど〜</h1>
とする事が考えられますが、これも問題があります。
- CSSが使える環境なら、サブタイトル見出しに適切なスタイルを与えられますが、そうでない環境ではおかしくならないか？
-
サブタイトル見出しの内容全体を<small>要素とする事で何とかなるかも知れませんが、Lynxのようなテキストブラウザだとやはりおかしな感じになる恐れが排除し切れません。
- 文書全体から見て、二つの見出しは別物と見なされないか？
-
ISO-HTMLでは間違いなくそれぞれは別物とみなされます。
何故なら、ISO-HTMLでは、これらの二つの見出しはそれぞれ別のセクションを暗示すると見なすからです。
具体的には、
- サブタイトルとなる<h1>要素直前までのセクションが初めの<h1>要素に依るセクション
- サブタイトルとなる<h1>要素以降がこの二番目の<h1>要素に依るセクション
となります。
- つまり始めのセクションは<h1>要素以外の内容がないセクションとなります。
他の言語の場合にはセクションの概念がないと言えばそれまでですが、やはり構造としては疑問が残ります。
マークアップ案その三：二つの見出しを<div>要素でグループ化する。
結局、これらは二つで一つの見出しとなるようにマークアップする必要があると言う事になります。
最も簡単な方法は、<div>要素でグループ化する事です。
<div class="group_of_headings"><h1>○○のウェブサイト作成入門</h1><h1 class="subTitile">〜HTML. CSS, JAVAスクリプトなど〜</h1></div>
しかし、<div>要素でグループ化しても意味は無いとする考えもありますし(※2)、そもそも<div>要素が文書全体から見て一つの見出しとなる訳でもありません。
マークアップ案その四：二つの見出しを強引に一つの見出しとしてマークアップする。
そうすると、以下のように、一つの見出し要素に押し込む事しか方法がなくなってしまいます。
- 因みにこの方法は制作者がHTML 4.01/XHTML 1.xでやっている方法です。
<h1>○○のウェブサイト作成入門<br /><small class="subTitile">〜HTML. CSS, JAVAスクリプトなど〜</small></h1>
ここで、サブタイトル部分を<small>要素とし、その直前に<br>要素を置いているのはCSSに対応しない環境を考慮してものです。
これはこれで二つの見出しが独立したブロックとなっていないのが疑問を呼ぶかも知れません。
結局、どれもこれも一長一短となり、これだと思われるようなマークアップは、従来のHTML 4/XHTML 1には存在しないと言う事になるのです。
HTML 5なら問題ありません。
しかし、HTML 5には、<hgroup>要素がありますので、問題は解消されます。
この場合、サブタイトル部分の見出しはメインの見出しより低い見出しと見なして一等級下げて<h2>要素としてマークアップします。
その結果が先ほどの例となるのですが、文書全体から見たら、これらは二つで一つの第一等級見出しとする事となるので、そちらの面も問題がなくなります。
<hgroup>要素がある場合の下位セクションの見出し。
<hgroup>要素で見出しをグループ化した場合、当該見出しを持つ文書或いはセクションに於いて、その直下セクションの見出しはどうすべきでしょうか。
これは<hgroup>要素の等級の考え方を見れば明らかですが、<hgroup>要素内で最も高い等級から一段下げたものとすれば良いのです。
例えば、以下のような<hgroup>要素があったとします。
<hgroup><h1>制作者のお気に入り。</h1><h2>堀北真希ちゃんについて。</h2></hgroup>
この場合この<hgroup>要素は内容の中で最も高い等級の見出しは<h1>要素となるため、従ってこの<hgroup>要素も<h1>要素と同じ等級の見出し、すなわち第一等級見出しとなります。
従って、直下のセクションに与える見出しは、これより一つ下の第二等級、すなわち<h2>要素とすれば良いのです。
<hgroup>要素で纏める場合とそうでない場合。
さて、<hgroup>要素が定義された事で、複数の見出しを<hgroup>要素として纏めた場合と、そうでない場合については、意味が大きく変わる事になります。
<hgroup>要素としてマークアップされた場合。
例えば、文書に以下のような見出しがあったとします。
<hgroup><h1>制作者のお気に入り。</h1><h2>堀北真希ちゃんについて。</h2></hgroup>
この場合、文書全体から見れば二つで一つの見出しとなるのですから、<h2>要素となっている
はサブタイトルとして位置付けられていると見なせます。堀北真希ちゃんについて。
このあとこの見出しの付いた文書或いはセクションに新たな<h2>要素があったとしても、堀北真希ちゃんのことから外れたものではないと考えられます。
例えば、上記の見出しが<article>要素の見出しだとしたら、以下のように堀北真希ちゃんの話題ばかりが並ぶ事が考えられるでしょう。
<article><hgroup><h1>制作者のお気に入り。</h1><h2>堀北真希ちゃんについて。</h2></hgroup>…<h2>堀北真希ちゃんの魅力。</h2>…<h2>制作者にとっての堀北真希ちゃんのベストシーン。</h2>… …</article>
つまり、この見出しのある文書或いはセクションは、主に堀北真希ちゃんの事のみを書いた文書或いはセクションであると考えられます。
<hgroup>要素としてマークアップされていない場合。
一方、以下のような見出しだったらどうでしょう。
<h1>制作者のお気に入り。</h1><h2>堀北真希ちゃんについて。</h2>
この場合、二つの見出しは纏められていないので、別々の見出しと考えられます。
セクション構造がマークアップされていませんが、この後に、別の
の事を話題にする(別の女優か或いは架空のキャラクタか、はたまた人間ではなくアイテムの話なのかははともかく)際に新たに<h2>要素が現われる可能性が生じます。お気に入り
例えば、上記の見出しが<article>要素の見出しだとしたら、以下のように堀北真希ちゃん以外の話題が並ぶ事が考えられるでしょう。
<article><h1>制作者のお気に入り。</h1><h2>堀北真希ちゃんについて。</h2>…<h2>上戸彩ちゃんについて。</h2>…<h2>鉄道での旅について。</h2>… …</article>
つまり、この見出しの付いた文書或いはセクションは、堀北真希ちゃんを初めとする
を挙げた文書あるいはセクションと言う事になります。制作者のお気に入り
結論。
<hgroup>があるかないかで文書或いはセクションの想定される内容が大きく変わる事になります。
加えて、<section>要素などのセクショニング内容要素としてのマークアップもきっちり行えば、更にわかりやすく内容を構造化出来るでしょう。
- しばしば、ストリクトなHTMLを志向する向きからは、「文書を構造化しろ」と言われますが、それがなんの役に立つんだと思った方も多いかも知れません。しかし、こうやって文書の各セクションがどのような内容であるかを分かり易くするように見出しを与えて構造化すれば、閲覧者の方も見たいところをスムーズに見られるようになる事が期待出来ると言う利点が生じます。