2008年1月18日金曜日

HTML要素の選択

HTMLには div, p, ul, ol, dl など・・・いくつか要素がありますが、
これを 表示形式で選択 するのではなく、意味で分けよう!
・・・というお話をば。

初めてHTMLを触り始めたときは、どうしても表示形式で選択してしまいがちかとおもうんですが、表示形式はcssであとで自由に変えることができるので、意味で分けるのが(たぶん)いいと思うんですよ。

で、私が理解している範囲での選択方法を書いてみます。
#もっといい方法や考え方があったら教えてください。。

まず前提。
細かなレイアウトは後で考えて、cssで指定する。
です。

・・・ただ、
divなどで区切った、まとまり単位の記述順番は、表示順番を意識して記述します。
#cssでレイアウトするときに、絶対値指定でなくて flowを使う場合は
#順番が大事なので。


●意味のあるまとまりは div で囲っておく
マージンやらボーダーをつけるという理由ではなく、要素のまとまりはdivで区切って id を付けておくといいと思います。
そうすれば、cssから 表示位置、中の要素のスタイル もある程度触りやすいです。


●class と id
HTMLで使用できる要素には class と id 属性が指定できます。
id は 固有の情報 (同じページ内に同じIDがあったらダメ)
class は 種類の情報
にする。

意味的に種類で分けれるようなものがあれば、classで分類分けしておくのがお勧め。たとえば、 リンク(a要素) でも 内部リンク と 外部リンクがあるので、外部リンクには class="outer-link" を付けておくとか。


●文章の中の1文は p で囲む
文章と文章との間に、もう少しスペースを入れたい・・・なんて時に brタグを複数書くのは問題外ですよね。
そんな時は、p のマージンで後で指定できるので、HTMLのデータは触らない!
文章のまとまり(複数のp)は divで括ってまとめます。
(文章のタイトルもある場合には一緒にdivの中に入れておく)

●項目の羅列であるリストの選択
・順序が意味ある場合は ol
・順序が意味ない場合には ul
・KEY と 値の組み合わせの場合には dl
cssを使うと、ol も ul と全く同じ表示にできちゃったりしますが、ここは、意味で分けた方がよいだろうな。と。
最終的なレイアウトを 横並び にしたい場合でも ol, ulでOK。CSSで触れますので。

●TABLEはマトリックスを表示するときに使う
難しいのが、TABLEを使用する局面。(私だけかしら。。)
難しい理由として、TABLEって、データの意味っつーよりも、View表現方法の一つだからと思います。

Version1Version2
ver1.0-01ver2.0-01
ver1.0-02ver2.0-02

ってテーブルの内容の意味って
dl を使うと
Version1
ver1.0-01
ver1.0-02
Version2
ver2.0-01
ver2.0-02

って表現できると思います。
この例の場合、dl の方がHTMLソース的には簡潔で見やすくなります。
そういう意味では、dl の方が意味的には合っているのかも。。?
ですが、dl を tableと同じ表現になるようにcssを書くのはちょっと注意が必要かと。
思い通りなものにしようとすると幅(width)を明示的に指定しないとダメ・・・のような気がします。
・・・ただ、これはいい方法があるかもしれないので、必要であれば探してみてください(汗)

dlで表現が難しいのは マトリックスとしてのデータ。
Version1Version2
WindowsXP対応あり対応あり
WindowsVista対応なし対応あり

・・・こんな感じのデータ。
これは素直にtableを使えばいいんじゃないかな って思います。


・・・こんな所で、どうでしょうか。

レイアウト情報を出来るだけHTMLソースから排除して、意味でタグを記述するようにすると、HTMLソースが綺麗になって見やすく・・・メンテし易くなりますよ。
お試しあれ。
• • •