(X)HTMLのid・classの名前付け

サイト制作している時に、ちょっと頭を悩ませるのがidとclassの存在。

CSSでデザインを適用する場合や、JavaScript(特にjQuery)で何らかの処理を加える場合には、このidやclassで対象となる要素を特定する必要があります。

idとclassには自由に名前を付けることができますが、複数人でサイト制作する場合や、サイトを制作する人と管理する人が別々の場合には、名前の付け方をあらかじめ決めておきたいものです。

そこで、名前を付ける際に参考となるページと、そのサンプルソースを書いてみました。

idとclassの名前を付ける際に参考となるページ。それはW3Cの「XHTML Vocabulary」です。

このページには、XHTMLで利用される様々なボキャブラリー(語彙)とその意味が一覧となっており、大きく分けて2つの分類から成り立っています。

  • XHTML Metainformation Vocabulary(XHTMLのメタ情報を示すボキャブラリー)
  • XHTML Role Vocabulary(XHTMLの役割を示すボキャブラリー)

このボキャブラリーを使ったサンプルソースがこれ。

<div id="banner">
  <h1 id="top"></h1>
</div>
<div id="navigation">
  <ul class="chapter"></ul>
  <ul class="help"></ul>
  <form id="search"></form>
</div>
<div id="main">
  <h2 class="heading"></h2>
  <p class="scrollbar"><a href="#top"></a></p>
</div>
<div id="complementary">
  <h2 class="heading"></h2>
</div>
<div id="contentinfo">
  <ul class="appendix"></ul>
  <p id="copyright"></p>
</div>

どの部分が、どんな意味をもっているのかは「XHTML Vocabulary」を見れば大体分かると思います。

さすがに、このボキャブラリーだけで全てのid・classがまかなえるという訳ではありませんが、参照先を明示できるのは便利だと思います。