見出しは<h○>要素で明示すると言うのは、HTML入門篇内のコンテンツで解説しました。ここでは見出しのつけ方について、解説しておきましょう。
見出しの大小関係に従って第一等級から順に等級を当てればいいのですが、その解釈が分かれる場合もあるのです。
例えば、文書の一番始めにこのような見出しがあったとしましょう。
W3C・ワールド・ワイド・ウェブ・コンソーシアム …(１) 〜 ウェブの潜在能力を最大限に引き出すために 〜 …(２)
このような見出しの場合、実は二通りの考え方があります。つまり、単純に大小関係で決めるやり方と文書中の位置付けによって決めるやり方の二つがあります。
この場合、単純に大小関係に基いて等級を決めれば良いと言うことになります。
ここでは(１)の「W3C・ワールド・ワイド・ウェブ・コンソーシアム」が一番大きな見出しとなり、(２)の「〜 ウェブの潜在能力を最大限に引き出すために 〜」はサブタイトルなので大小関係で言えば「(１) > (２)」ということになります。すなわち、以下のようにマークアップします。
<h1>W3C・ワールド・ワイド・ウェブ・コンソーシアム</h1><h2>〜 ウェブの潜在能力を最大限に引き出すために 〜</h2>
この場合、見出しそのものの大きさではなく、見出しが与えられている文書中のブロックの等級に従うという考え方になります。
具体的にはまず文書全体を第一等級のブロックとし、それを適宜分割したブロックを第二等級のブロック、さらにそれらを適宜分割した第三等級ブロック…というように等級を付けて行きます。そして、それぞれにブロックの等級と同じ等級の見出しを附けていくと言う考え方です。
もっと分り易い言い方をすれば、文書全体への見出しは第一等級見出し、各章には第二等級、各節には第三等級…というようにつけていくという考え方です。
問題の見出しの場合、どちらも文書全体に掛かっている見出しであることは明白です。つまりどちらも同じ第一等級の見出しと言うことになります。
ただ、(１)の「W3C・ワールド・ワイド・ウェブ・コンソーシアム」に対して(２)の「〜 ウェブの潜在能力を最大限に引き出すために 〜」はサブタイトルとなるため、表示上はやや小さめにした方がいいのですが、それはCSSを使えば済むだけの話し。つまり、小さめに表示するクラスを与えておけばいいのです。
結局、以下のようにマークアップする事になります。
アイドルをモデルにしたオリジナルキャラクタを用いたイラストの一例とそれを組み込んだアニメーション動画<h1>W3C・ワールド・ワイド・ウェブ・コンソーシアム</h1>
<h1 class="subTitle">〜 ウェブの潜在能力を最大限に引き出すために 〜</h1>CSSに対応していない旧式のグラフィカルなウェブブラウザの事も考えるなら<small>要素を併用しても良いでしょう。
すなわち、以下のようにマークアップする事も考えられます。
<h1>W3C・ワールド・ワイド・ウェブ・コンソーシアム</h1>
<h1 class="subTitle"><small>〜 ウェブの潜在能力を最大限に引き出すために 〜</small></h1>制作者は「単純に見出しの大小関係で等級を決めるやり方」には元々疑問を持っていました。
そのため、HTML文書を制作し始めた頃から「文書中の位置付けで大小関係を決めるやり方」を採っています。
では「単純な大小関係で見出しの等級を決めるやり方」に、どのような問題があるのでしょうか。
それは、CSSの利用に際して、障害が生じ得る事です。
CSSのスタイル定義ファイルは、複数のHTML文書で共通に使い廻すことが出来ると言うのが最大の利点の筈です。
しかし、単純な大小関係に従って見出しを付けると、例えばある文書のトップの見出し(<h1>要素)のサブタイトルを<h2>要素にしてしまうと、CSSスタイル定義ファイルをサイト内の全文書で使うことが出来なくなってしまいます。
その理由は以下の通りです。
トップの見出しのサブタイトルを<h2>要素とした文書では、その下の見出しは当然<h3>要素としなければなりません。
すなわち、このようになります。
<h1>良質なウェブの作り方</h1> <h2>〜より多くの方々に見てもらえる為に〜</h2><h3>目次</h3>…
しかし、同じサイトでもサブタイトルを与えていない別の文書ではトップの見出しの次の見出しは単純な大小関係に従えば当然以下のように<h2>要素となります。
<h1>正しいHTML</h1>
<h2>目次</h2>
…こうなってしまうと、CSSのスタイル定義ファイルを二種類の文書に共通に使うことが出来なくなってしまいます。
かと言って、他のサブタイトルを付けた文書に合せてわざわざ<h3>要素に統一しなければならない必然性はありません。
つまり、単純に大小関係だけで見出しの等級を決めてしまうと、自由なサイト作りに支障が出てしまう可能性があるのです。
このため、文書中の位置付けによって等級を決めると言う方法が合理的と言えるのです。
この記事の趣旨からは外れますが、よく考えて見たら、この例に於ける二つの見出しは二つで一つの見出しとすべきで無いでしょうか。
つまり、二つを合わせて単一の<h1>要素とすべきでは無いかとも考えられます。
(２)の「〜 ウェブの潜在能力を最大限に引き出すために 〜」の部分がサブタイトルである事を明らかにするには、(好ましくないと言う意見もあるかも知れませんが)<small>要素でマークアップすればいいのではないでしょうか。
つまり、以下のようにマークアップしても良さそうだと思うのです。
<h1>W3C・ワールド・ワイド・ウェブ・コンソーシアム<small class="slogan">〜 ウェブの潜在能力を最大限に引き出すために 〜</small></h1>
<small>と言うのを見た目に小さいと言う意味ではなく意味付けが小さいと解釈するのです。勿論、表示上も本題より小さくすべきであるからこそ<small>要素で問題はない筈です。class="slogan"」などのようなclass属性も与えておきましょう。更に言えば、このようにインラインにされたサブタイトルも、CSSを使えばブロックレヴェル要素のように表示させたりすることも充分可能です。
つまり、CSSで以下のようにすればいい訳です。
h1 small.slogan {display: block;font-size:○%;}
尚、非CSS環境向けに、<small>要素の前に<br>要素を入れて改行させても良さそうですが、そこまでする必要も無いでしょう。
もう一つ問題にしておきたいのは、第一等級見出し・<h1>要素と題名・<title>要素との関係です。
よく、<title>要素と<h1>要素は内容が同じでなければいけない
とか、<title>要素と<h1>要素は内容が同じではいけない
という意見を見ますが、結論から言えばどちらも正しくありません。
なぜなら、題名と見出しは全く別の概念であり、従って双方の内容は互いに無関係であり、同じでなければならないとか異なっていなければならないと言う必然性は無いからです。
<title>要素はブラウザのクライアント領域には表示されません。そのため、この要素を軽視する者も少なく無いようです。しかしその一方で、<title>要素はHTMLにおいては唯一の必須要素となっております。クライアント領域に表示されないからと言って、決して不要な要素という訳では無いのです。
検索エンジンはしばしば検索結果一覧を<title>要素の内容を列挙する事で案内します。利用者もその列挙された<title>要素の内容で、自分が望む文書かどうかを判断する事になります。つまり、<title>要素は本文には出てこないものではありますが、本棚に並べられている文書の内容を手に取らずして知るための唯一の手がかりとなる背表紙のようなものと思えばいいでしょう。
そして、<title>要素が背表紙のような役割を果たすなら、<h1>要素は表紙や本文第一ページ目の見出しのような役目を果たすと言うことになります。そうするとこの二つの要素は内容が同じである必要があると思うかも知れませんが、本文ではもう少し端折ったり詳しく書いたりと言ったことも有効になるかも知れません。ですから、二つの要素の内容は必ずしも一致する必要は無いと言えます。
また制作者は<h1>要素は仕様上は必ずしも必須要素とは定義されていないものの、準必須の要素と位置付けております。
