Hatena::Groupweb

メモ:classとid

メモ:classとid

このノートは

ヘッダやフッタ、サイドバーなどが

<div id="header">

などと、id属性でマークアップされることが多い事についての考察。マークアップの観点から掘り下げています。

疑問

header, footer, sidebar, containerなどの属性値

  • とりあえず、なんでidなのか
  • 属性の名称から考えて、classとしてそれらの属性値を与えるのが適切ではないか?
  • idは特定の部分に識別名をつけるためのものじゃないのか
  • "container"など、汎用的な名詞はidの属性値として適切であるのか

class, idの定義

HTML 4.01仕様書の7.5.2 Element identifiers: the id and class attributesにてそれぞれの定義がある。

id

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
*

「要素に名前を与える」とある。

The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values:

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The id attribute has several roles in HTML:

  • As a style sheet selector.
  • As a target anchor for hypertext links.
  • As a means to reference a particular element from a script.
  • As the name of a declared OBJECT element.
  • For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).
*

「要素に一意な識別子を与える」とある。

class

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
*

「部類名/種名を与える」とある。

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.
*

「一つ以上のクラス名を付した要素は、その/それらのクラスに属しているといえる」とある。

定義をふまえた上でまたメモ及び疑問

  • やはりidにheader, footerなどの種類を表す属性値をつけることには違和感を覚える
    • id="container"だけでは、何のコンテナか解らない
  • 「ここは『ヘッダ』って名前だから」と考えた上でのマークアップならばよし
    • 「『ヘッダ』というクラスに属する要素」と考える方がより自然な意味づけとならないか
  • 「classは役割、idは名前」という見解は仕様の拡大解釈とならないか
    • class, idの値はどちらも「文字列」でしかない
      • 文字列が示す言葉の意味にまで気を配る必要ってある?
      • Roleみたく意味をつけられる機構も出てきてはいるが、class/idにはそれがない
  • スキーマの制約ではなく、仕様書の文面解釈に寄るところがかなり大きい
    • 「idだと問題」「classが望ましい」などは言えない
  • そもそも、classとidって比べるようなものなのか
    • 仕様書で同セクションに纏められてはいる
      • 「classとid、どっち?」っていうレベルじゃないんじゃ?

マークアップ以外におけるid/classの違い

  • CSSの継承優先度が違う
    • idセレクタ(#のこと)はclassや他の属性セレクタより優先度が高い
      • 優先度を駆使しないといけないほどのスタイル定義が思いつかないけれど
      • そもそもこれを知ってる人はそこまで多くない気もする
  • JavaScriptなんかでidは便利
    • idであればgetElementByIdで特定の要素を取り出せる
      • getElementsByClassNameだと複数の要素になってしまう
  • ユーザスタイルシート
    • classでも良いが、特定の要素に対しスタイルを定義したい場合、idがあると便利
      • 広告消したりとか
      • per siteなスタイルにはCSS Signaturesとか
  • idはアンカーとして使える(リソース化できる)
    • 名前付けに敏感にならないといけないのではないか(→Cool URIs don't change
      • id属性値をtypoした場合、修正するとURI参照が変わってよろしくない(e.g. id="infomation"

どうしてidが多いのか

  • CSSの解説エントリや、本でidが使われていることが非常に多い
    • id="container"などはそこから?
    • 「本がそうなってるからidで」っていう流れでidが広まったんじゃないか
    • 「なんでidなのか」っていう理由を、マークアップの観点からきちんと持ってるひとって居なさそう
  • idの「値は一意でないといけない」という解説から曲解が生まれたおそれはないか
    • 「これ(ヘッダなど)は文書中にひとつしかない部分だから、classじゃなくidでマークアップだよね」みたいな
      • 「文書中一つしかない要素の役割付けは、idでするもの」という観念が生まれてはいないか

まとめ

  • validationの範囲ではないため、idを使うことは「間違い」ではない
  • ある要素がどのようなものであるかを表したい場合、まずclassでマークアップすると、要素の役割についてきちんと考えることができるのでは
    • 名前を与えて参照させたい場合や、スクリプトなど外からの利便性を求められる要素に対しては、別個id(名前)を与えるようにする
  • 「文書中にひとつしかないからidで」という考えは、良いマークアップフローを生み出さないのではないか
    • id属性は「一意な要素に名前をつける」ものではなく、「要素に一意な名前をつける」ものであることに注意してほしい
  • 考えなしのマークアップはclass/idに限らずよくない
  • きちんと考えた上で使い分け、または併用をしよう