見出し要素に関する議論 - 徒委記を読んで思ったことを書きとめておきます。それから、話を転じて、HTML5のheadingheader要素などの話もメモしておきます。
要所、要所にて僕のはてブの発言の
- ブクマ 僕もh1でサイト名はありだと思うんだけど。全ページ統一しておけば、スクリーンリーダーなどでhn要素を引っ張り出して、トップページに戻るのが簡単そうな気がする。
- ブクマ 僕としてはh1要素をトップページへの回帰リンクとして張っておき、全ページに配置しておくのがWebデザインの標準であると思うからです。そっちのほうが閲覧者にとっては使いやすいデザインだとは思うんですけど。
が取り上げられているようです。他意は特になく、これはちょくちょく思っていることなので、皆さんの意見を聞けてよかったと思っています。ありがとうございます。
ここから話を蒸し返す必要もないので、少し話題を変えて。
僕自身はこのブクマの発言で、
個人的には、このへんをXHTML2やHTML5が解決してくれると嬉しいと思う。header要素とかに、音声ブラウザが直接スキップできる実装とか。
と書いています。でも、この発言に自分で「本当にそうなのか？」と思い、ちょっとHTML5の仕様書を見てみました。header要素で押さえておくべきポイントは以下かと思います（間違えていたら、指摘して下さい）。
- ブロックレベル要素である。
- 1つ以上のブロックレベル要素を含み、子孫要素にはhn要素を1つ以上入れる。
- header要素、footer要素、section要素などのsectioning elementは含んではならない。
- h1要素と同じrankを持つ。
ということのようです。
このrankとは、hn要素のところに、
These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
というふうに書かれていて、更にheadingheader要素には、
The rank of a header element is the same as for an h1 element (the highest rank).
と書かれており、どうやらh1要素と同じランクをheadingheader要素は持つことになるのかもしれません。
更に仕様書を読んで思ったこと。仕様書にはこのheadingheader要素の使い方の例をいくつか上げています。例えば、
- for example it would be reasonable for the header to include version history information.
- document summaries, outlines
のような感じです。この文書の最新バージョンやサマリー、アウトラインを用いるために使ったらいいんじゃないの？ということのようです。
何が言いたいのかというと、僕はてっきりheadingheader要素だと言うからには、ロゴやら何やらを入れる箇所だと無意識のうちに思ってしまっていました。つまりはよくロゴをマークアップするような、
<div id="header"> ロゴ </div>
こういったマークアップの代わりにheader要素を使うべきものだと考えていたのですが、どうやら使いどころは違うようです。むしろ、その文書の重要度を考えた上で、どの要素に対してどのhn要素を割り当てられるのかをより明確にしたという感じでしょうか。もちろん、サイトの案件次第ではロゴを全てh1要素として使う場合もあるでしょうから、
<header> <h1>サイト名</h1> <h2>サイトの説明文</h2> </header>
というようなよくブログのテンプレで使われるようなマークアップもありなのだとは思うのですけれど。
ただ、h1要素は文書のタイトル：メモランダムに書かれている、
昔は「ページ右上か左上にトップページへリンクするロゴを貼る」というのが慣習になっていたのだが、いつの間にかh1要素をサイト名にしてトップページへリンクするのがスタンダードになっていた。
ということは全く露知らず、「h1=ロゴ」というような固定観念を持ってしまっていたことにはつくづく反省すべきだなーと思っていたりするのです。めちゃくちゃくな駄文で申し訳ないのですが、そんなことを思いました。
