最近、HTMLのヘッダーをIDで定義（id="header"）しているサイトが多いですが、なぜclassでなくIDで定義するのでしょうか？

質問

最近、CSSレイアウトを採用しているサイトの多くが、HTMLページのヘッダー部分やフッター部分をIDで定義（id="header"、id="footer"）しています。

私は、IDというと、例えば身近には、住所や電話番号、免許書番号や銀行の口座番号等の、多くの場合は連番を用いた固有な値を使用するイメージがあります。

ところがHTMLでは、IDの値にheaderやfooter、さらにはwrapperやcontainer等の、通常ならIDの値として相応しくないような一般的な名詞が頻繁に使用されています。

classの値であれば、そのような一般的な名詞もうなづけますし（というよりclassに固有な値は逆に奇妙かも）、スタイルシートを適用するだけなら、classだけでも十分可能だと思いますが、なぜIDを使用するのでしょうか？とても不思議です。

回答No.2

onigiri_2c · ベストアンサー

HTMLページのヘッダー部分やフッター部分をIDで定義（id="header"、id="footer"）していることについては、有識者の間でも議論の元になることがしばしばありますね。
確かに、headerやfooter、wrapper、containerの属性値が示唆する意味を考えると（大抵はdiv要素に付加され中のものをグループ化する目的でつけられていますよね）、idよりもclassのほうが妥当な気もします。

ただ、headerやfooter、wrapper、containerというものは１ページの中では1回しか使われることがないのが現状です。
このことを優先して「一回しか使われない＝固有値＝id属性」という考え方でコーディングする方が多いのではないでしょうか。

また、単純に「トップへ戻る」などのアンカーとしても使用できるのでid属性にしていることも考えられます。

headerやfooter、wrapper、containerがidかclassかというのは結局コーダーの考え方によるものが大きいのでどちらが正しいかと言うのは私には一概には言えません。
また、XHTML Role 属性というものがW3Cの草案で発表されたので、この先そのようなid属性・class属性は淘汰されていくかもしれないですね。

参考までに、
class属性とid属性に関する議論リンク集 - 徒委記
http://www.akatsukinishisu.net/wiki.cgi?class%C2%B0%C0%AD%A4%C8id%C2%B0%C0%AD%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0%A5%EA%A5%F3%A5%AF%BD%B8
web製作者がそれぞれのブログなどで「headerやfooter、wrapper、containerがidかclassか」について考察しているページのリンク集です。

XHTML Role 属性モジュール
http://standards.mitsue.co.jp/resources/w3c/TR/2007/WD-xhtml-role-20071004/
作成者が要素に役割を与えるための属性、Role 属性モジュールについてのW3C草案の邦訳です。

お礼

ご回答ありがとうございました。

確かにこれは、すんなり白黒はっきりつかない問題ですね。
私自身は、どちらかと言うとclassの方が正しいのではないかと思っておりますが、idの利便性も承知しております。

例えば、class="header"とした場合、あるコンテンツのボックスにヘッダーのような要素があった場合でも、class="header"とすると、前述のclassがカスケーディングされてしまうという問題が起こります。（問題というよりも、これが、CSSの最大の利点なのですが・・・。）

その点、id="header"とした場合、他のボックスでid="header"とすると、その時点でValidationエラーになるので、そのような問題はおこりません。

その代わり、classなら、例えばヘッダとメインコンテンツに、検索ボックスがある場合、
div.header div.search_box
div.main_content div.search_box
と振り分けて、同じクラス名（search_box）を使用できますが、
idの場合、同じid名は使用できないので、
div#header div#header_search_box
div#main_content div#main_content_search_box
と、なんともみっともないことになってしまいます。

で、↑の例を見て、
じゃあ、
div#header div.search_box
div#main_content div.search_box
とすればいいじゃん？と思う方もいますが、そうであれば、どこまでをidで定義し、どこからをclassで定義すればよいのでしょうか？
これは、idかclassか、と悩むのは、時間の無駄です。たとえ、そのようなガイドラインを設けても、結局、「あれ、これはid？class？」ということになると思います。

私が、classの方が正しいと思う理由は、ティム・バーナーズ＝リーが目指した「ユニバーサル」とは、コンピュータ技術者や有識者たちにとってのユニバーサルではなく、全人類にとってユニバーサルという、本当の意味のユニバーサルだと思います。
HTMLは、本来、idかclassかと悩まなければならないような難しい言語ではないはずです。
世の中のHTMLコーダー達が、勘違いして難しく考えすぎなのではないかと、懸念しております。

onigiriさんの言うとおり、Role 属性のようなものが一般化して
body > div.header
を理解できないブラウザ（今、もっともメジャーなブラウザ）が廃れれば、僕の疑問もなくなるかもしれません。

補足

ご回答いただきありがとうございます。

>HTMLページのヘッダー部分やフッター部分をIDで定義（id="header"、id="footer"）していることについては、有識者の間でも議論の元になることがしばしばありますね。

3年前に「なんでIDなんだ」みたいな発言をしたら単に変な人で終わってしまったので、そのような議論は非常に心強いです。今では、このような議論の余地を残したW3Cの説明に責任があるのではないかと思っていますが。

>このことを優先して「一回しか使われない＝固有値＝id属性」という考え方でコーディングする方が多いのではないでしょうか。

やはりそうなんでしょうか。であれば納得できません。そもそも一回しか使われないかどうかを判断する必要性に疑問を感じます。私は、むしろ、ニ回以上使われているものにIDを積極的に使用します。（すでに二回以上使われているので、一回しか使われないかどうか判断する必要はありません。）語弊があるかもしれませんので、以下に一例を。

<h2>その1. ああああああああああ</h2>
（略）
<h2>その2. ああああああああああ</h2>
（略）
<h2>その3. ああああああああああ</h2>
（略）
<h2>その4. ああああああああああ</h2>
（略）
<h2>その5. ああああああああああ</h2>
（略）

h2要素が二回以上使われており、任意のh2要素を識別できない。
よって、任意のh2要素を識別するために、IDを使用する。

<h2 id="H2_01">その1. ああああああああああ</h2>
（略）
<h2 id="H2_02">その2. ああああああああああ</h2>
（略）
<h2 id="H2_03">その3. ああああああああああ</h2>
（略）
<h2 id="H2_04">その4. ああああああああああ</h2>
（略）
<h2 id="H2_05">その5. ああああああああああ</h2>
（略）

要するに、ほぼ同様の要素が複数出現する際に、それらの中の一つを局所的に識別（identify）するために、IDが必要というイメージです。
値は固有でありますが、要素自体は固有でもなんでもありません。「固有」という言葉が混乱を招いている気もします。私のIDのイメージを言葉にすると「局所的」でしょうか。

>また、単純に「トップへ戻る」などのアンカーとしても使用できるのでid属性にしていることも考えられます。

であれば、全く問題ありません。

>headerやfooter、wrapper、containerがidかclassかというのは結局コーダーの考え方によるものが大きいのでどちらが正しいかと言うのは私には一概には言えません。

実は私も、id="header"は間違いで、class="header"が正しいとは思っていません。
私自信、月水金はclass派だけど、火木は「やっぱidかな」と思いますし、土日は「そんなことどーでもいいじゃん」感じです。（笑）

今のいちばんの疑問は、なぜこうも皆一様にid="header"なのかということです。そうも皆がこぞってid="header"を使用するのなら、なにか私も、「あー、そういうことか」と納得できるような理由があるのではないかと思ったから、この質問をいたしました。

※ちなみに私も、かつては、ヘッダーをIDで指定していました。皆がそうしていたし、何よりもシャープ（#）がピリオド（.）に比べて見やすかったからです。

>また、XHTML Role 属性というものがW3Cの草案で発表されたので、この先そのようなid属性・class属性は淘汰されていくかもしれないですね。

おっと、そのような意見を他人から耳にするのは初めてです！Role属性については最近知ったのですが、私も漠然と同様のことを考えていました。

回答No.1

benelli

"header"や"footer"は１画面にひとつしかない固有なものです。固有なものですからID属性にないとおかしいですよ。

まぁ言いたいことは分かりますが、現実的にはソースの読みやすさや簡単さが重要なのでID属性にはそのような値になります。IDがすべてA,B,Cとか簡略すると読む人や修正する人は混乱してしまいます。
プロが仕事としてHTMLを作る場合、セキュリティの問題などで指示がない限りは分かりやすさ優先であって連番なんて使用禁止です。別の人が修正するときにミスが起きやすくなりますから。

なお、class属性もID属性もCSSレイアウトのためだけに存在するわけではないので、classだけで十分だという考えはちと考慮不足です。class属性があってもID属性がなかったらJavaScriptも機能しません。
それに仮にCSSレイアウトのためだけであってもclass属性もID属性も両方とも活用しなくてはならない場面はとても多いのです。CSSの容量を減らしながらもあらゆるページに対応させる時などにもID属性が役立ちます。

ID属性って、実はclass属性よりも重要なんですよ。

補足

ご回答いただきありがとうございます。

>"header"や"footer"は１画面にひとつしかない固有なものです。固有なものですからID属性にないとおかしいですよ。

知人も同様のことを言っていました。また、以下のページにも、一画面にヘッダーが二つ以上になるわけないのでIDを使用する、とあります。
http://standards.mitsue.co.jp/archives/000139.html
「id属性とclass属性 | Web標準Blog | ミツエーリンクス」

しかし、W3Cの仕様書には、「IDの値は固有でなければならない」とありますが、どう読んでも「固有の要素はIDで指定しなければならない」とはならないように思えます。
http://www.w3.org/TR/REC-CSS2/selector.html#id-selectors

つまり「一つしか出てこないからID」という考え方は、「IDの値は一つだけ」の拡大解釈にすぎないのではないかと思うのです。

>まぁ言いたいことは分かりますが、現実的にはソースの読みやすさや簡単さが重要なのでID属性にはそのような値になります。IDがすべてA,B,Cとか簡略すると読む人や修正する人は混乱してしまいます。
>プロが仕事としてHTMLを作る場合、セキュリティの問題などで指示がない限りは分かりやすさ優先であって連番なんて使用禁止です。別の人が修正するときにミスが起きやすくなりますから。

私は、IDは、多くの場合、連番の方が分かりやすく、ミスもおきにくいと考えます。
また、IDのために、独自の名前を考えるのは、面倒な気がします。
以下、私がイメージするIDの使用例です。

・<li id="NEWS_20071015_01">
⇒どう使うか未定だが、本日のニュースとか

・<p id="When-should-I-use-a-class-and-when-should-I-use-an-ID">
⇒ブログの投稿にとか（パーマネントURLを持つ一覧ページの、
パーマネントページ内リンクとして使ったり）

・<div id="showHideBox02">
⇒JavaScriptのgetElementByIdメソッドで呼び出すためにとか

・<div id="PAGETOP">
⇒ページの最上部に戻るためのアンカーとしてとか

・<input id="question01_C">
⇒フォームにおける、label要素との紐付けのためにとか

特に、ページ内の見出しの全てにアンカーを張ったり、フォーム内で、label要素に紐付けするためにinput要素にIDを指定する場合、連番を付けてやる方が適当な気がします。
※神崎正英著の『ユニバーサルHTML/XHTML』での、ID属性の説明でも、<p id="note01">のような連番を使用していたと思います。（この場に本がないのでうろ覚えですが。）
http://www.kanzaki.com/book/html/

また、私は、上に挙げたIDの使用例と、id="header"という使用例に、あまりにも大きな隔たりを感じてしまいます。<input id="question01_C"> と <div id="header"> で使用されるidは、本当に同じidなのか、と。

但し、もちろん後にCSSで見た目を調整してやりたい部分には、連番でなく、その部分が何を意味するのかを分かりやすい名前で指定します。そして、その場合はID属性でなくclass属性を使用します。

>それに仮にCSSレイアウトのためだけであってもclass属性もID属性も両方とも活用しなくてはならない場面はとても多いのです。CSSの容量を減らしながらもあらゆるページに対応させる時などにもID属性が役立ちます。

ID属性を活用しなくてはならない場面とはどのような場面でしょうか？