プログラミング・開発 > 見出し要素の出現順

hxxk.jp - Re: 小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編） でHTMLのマークアップについて書かれていて、 内容には概ね同意なんだが、h要素の使い方には少し疑問を感じたので （疑問を感じた部分は後に私の勘違いだと発覚しましたので、訂正します。参照：hxxk.jp - 今日のメモ 2006/05/16 - nulog, Quadrilateral space, Blog.37to.net, ソフトバンクモバイル） 、自分なりの考えを書くことにした。

一つ上の見出し要素に戻ってはならないのか？

hxxk.jp - Re: 小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）から引用

前後する見出しレベル

例えば、小粋空間: テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）の見出しだけを抜き出してアウトライン表示をすると、

• <h1>小粋空間 - a cheap joke and a play on words site</h1>
  • <h2>a cheap joke and a play on words site</h2>
    • <h3>2006年05月02日</h3>
  • <h2>テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）</h2>
    • <h3>Posted at May 2,2006 01:32 AM Category：[blog] Tag：[Template, HTML]</h3>

というように、見出しレベルが適切な関係になっていません。 例えば、 a cheap joke and a play on words site という h2 要素を無くして以降の見出しを 1 レベルずつ上げ、日付を h2 、記事タイトルを h3 、投稿者情報やカテゴリ・タグ情報を h4 ( あるいはこれはメタデータと考えて見出しを割り振らない ) というようにすると適切な関係になると思います。

この文章とhxxk.jpさんのソースを見る限り、 「h要素は上から順番に使い、一つ上の見出しレベルに戻ってはならない。」 例えば、「h3要素が出現した後は、h3要素以下の見出しレベルを使用するべき」だと 言及されている。

大きく間違っている訳ではないが、少し違和感を覚えた。 この使い方だと小見出しをつける時に困るからだ。

小見出しのつけ方

h要素を上から順番に使っていくとすれば、本文中に小見出しをつける時に困ることが出てくる。 例えば、

<h1>記事タイトル</h1>
<p>文章</p>

<h2>見出し</h2>
<p>文章</p>

<h3>小見出し</h3>
<p>文章</p>

上記のようにh要素を順番に使った場合、 小見出しにh3要素を使った時点でh2要素を使う事が出来なくなり、 h2要素で定義した見出しレベルに戻れなくなってしまう。

これを回避するのであれば、

<h1>記事タイトル</h1>
<p>文章</p>
<h2>見出し</h2>
<p>文章</p>
<dl>
   <dt>小見出し</dt>
   <dd><p>文章</p></dd>
</dl>

としてやればdt要素の語句に対して、dd要素で説明を行ってるので、論理構造自体に問題はないと思うが、 dl要素がリストを示している事から、長い文章をdd要素に入れるのは何となく気持ち悪く感じる。

私なりの見出し要素の使い方

以上の理由で私が小見出しをつける場合は、

<h1>記事タイトル</h1>
<p>文章</p>

<h2>見出し</h2>
<p>文章</p>
<h3>小見出し</h3>
<p>文章</p>

<h2>見出し</h2>
<p>文章</p>

とするようにしている。 マークアップとしてはあまり良くないのかも知れないが、 「小見出し」が見出しである以上h要素を使い、 dl要素は本来の使い方に沿って、箇条書きを説明つきで行う様な時の定義型リストとして使うようにしている。

W3Cによる見出し要素の使い方

「HTMLの仕様を定義してるW3Cはどうしてるんだ？」 と思って見てみると、

289.<h1>
290.<a id="N104B9" name="N104B9"> </a>WCAG 2.0 Guidelines</h1>
291.<p>This section is normative.</p>
292.<div class="div2"> <h2 class="principle">
293.<a id="perceivable" name="perceivable"> </a>Principle 1: Content must be perceivable.</h2>
294.
295.<div class="div3">
296.<h3 class="guideline">
297.<a id="text-equiv" name="text-equiv"> </a>    Guideline 1.1 Provide text alternatives for all non-text content</h3>
298.<div class="req"> <h4>
299.<a id="N104C8" name="N104C8"> </a>Level 1 Success Criteria for Guideline 1.1 </h4>
300.<div id="text-equiv-all" class="sc">
   

中略

346.<h3 class="guideline">
347.<a id="media-equiv" name="media-equiv"> </a>    Guideline 1.2 Provide synchronized alternatives for multimedia</h3>
348.<div class="req"> <h4>
349.
350.<a id="N10516" name="N10516"> </a>Level 1 Success Criteria for Guideline 1.2</h4>
351.<div id="media-equiv-captions" class="sc">
   

中略

561.<div class="div2"> <h2 class="principle">
562.<a id="operable" name="operable"> </a>Principle 2: Interface components in the content must be operable</h2>
563.<div class="div3">
564.<h3 class="guideline">
565.<a id="keyboard-operation" name="keyboard-operation"> </a>    Guideline 2.1 Make all functionality operable via a keyboard interface</h3>
566.<div class="req"> <h4>
567.<a id="N1061E" name="N1061E"> </a>Level 1 Success Criteria for Guideline 2.1</h4>
568.
569.<div id="keyboard-operation-keyboard-operable" class="sc">
   

h1、h2と定義し、h3要素を定義した後は、h3要素とh4要素を交互に定義しながら、 h2要素まで戻ったりしているので、それ程気にする必要は無いのかも知れない。

W3Cがこういう見出しの使い方をしてるなら、私の書き方もあながち間違ってないと言える。

見出し要素の使い方に関する議論

ISO-HTMLとXHTMLに関する議論リンク集 - 徒委記 を読んで、初めてISO-HTMLとXHTMLに関して議論されていたのを知った。
見出しの使い方も昔から議論がされているようで、宗教論争に近い印象を受けた。これについては、 h要素が及ぶ範囲が分かりにくく、入れ子にして階層構造を保てないHTMLの仕様が問題だという意見に同意する。

XHTML2.0ではh要素とsection要素で入れ子にして定義出来るようになるみたいなので、 不毛な論争は終わりそうな予感。

h要素をどう使うべきか？

サイバーガーデンの益子さんの所から引用

見出し（h1〜h6要素）をどう適切に構造化するかは、これまでもわりと議論されてきた。W3C仕様書はいずれも言葉足らずなので、ISO-HTML（ISO/IEC 15445:2000）とそのユーザーズガイド（User's Guide to ISO/IEC 15445:2000）がよく引き合いに出される。

拙著『Web標準の教科書』にも書いたが、ISO-HTMLの見出しに関する要件は、

• h1要素からはじめること
• 途中のレベルの見出しを飛ばさないこと

の2点にまとめることができる。

現状ではこれだけ守って、あとは個々で論理構造を考えて適切にマークアップしていけば 問題ないんじゃないかと思う。

一般ユーザ−にとってはh要素の出現順だとかはどうでもいいわけで、 音声ブラウザを使う方に論理構造が分かるようなマークアップをしていれば、問題ない。
ということで各々が論理構造を考えてマークアップし、実用的に問題がなければいいのではないだろうか？

自分自身を含めて、こういう細かい所にこだわるのは技術者やクリエーターの良い所でもあり、悪い所でもあるのかな。

• アーカイブページの性質とサイト全体で共通のナビゲーション
• ページ上部へ戻る
• 新規エントリー投稿時に再構築されるアーカイブ

Posted at 37to : commetns(3) : trackbacks(1)