22: Generic containers --- the div and span element

OperaWSC HTML

http://dev.opera.com/articles/view/22-generic-containers-8212-the-div-and/

Semantically neutral

HTML には2つ意味を持たない element がある。HTML の仕様によれば

The div and span elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to
documents.

div と id elements は、id や class attributes と組み合わせることに
よって、document に汎用的な構造を与える仕組みを提供する。

これらはいくつかのコンテンツを一纏めにし、追加の情報を与えたりスタイルや動きのきっかけとすることができる。しかし、これら自信がコンテンツに意味を与えるものではない。

Inline versus block

復習: block elements とは document の構造を知らせる助けとなる elements。
div element（"division" の略）は block level の汎用コンテナ。いくつかの他の block level elements、inline elements やどの block level elements にも合わないテキストを一纏めにできるが、これは最後の手段。
span element は inline level の汎用コンテナ。他の inline elements やテキストに使う。
両者の違いは、その中身となるのが block level elements なのか inline elements なのかという点。

これらはいくつかのものを「一纏めにする」。もし div や span elements の中身がたった1つの block level element や inline element なら、それは必要ない。

More exploration of grouping content

あちこちのページを見ていると、ありがちな class や id を持った div element を見つけるだろう。headr, footer, content, sidebar とか。
INFO: class や id は意味/役割のある名前にすること。
これらの一部分は作ってるときにも後から見たときにもページの構造をわかりやすくする。

Extra information

span element によって、attribute として追加の情報を持たせることができる。
英語の文章中に突然フランス語が現れる例:

<p>A screen reader will read the French word <span lang="fr">chat</span>
(cat) as chat (to talk informally) unless it is properly marked up.</p>

Hooks for javascript, as well as CSS

CSS と同様に javascript から使うためにも、これらの elements は使える。
特定の element を javascript から見つけてごにょごにょするには、id を設定しておいて関数 getElementById で取ってくる。

"div-itis"

div や span elements を使うとスタイルを適用しやすいが、これは最後の手段。必要最小限にすること。

Inappropriate semantics

ありがちな間違い。

Generic "paragraphs"

テキストはなんでも p element に突っ込みたくなるが、これは間違い。
他に適切な element が無ければ、バラバラなテキストは div や span elements とするのが正しい。

Presentational elements

web 上で時々見かける腐ったアドバイスに、span を使うべきところに見た目だけの短い elements（b や i など）を使うというのがある。理由として

  • こっちの方が短いので、回線にやさしい
  • 見た目だけの問題なんだから、この場合はそれでいい

1つ目は事実だが、ほとんど誤差（よほど大量に使っていない限り）。最近だと web サーバが圧縮する方がずっと効果がある。
2つ目は HTML における "見た目だけ" の意味をわかっていない。見た目だけの elements はその内容がどう見えるべきかを説明するのであって、見た目を変えるきっかけとなるわけではない。

テキストの一部に CSS や javascript を適用する必要があり、適当な意味のある element がないのなら、唯一正しいのは span element だ。

Exercise questions

What is the difference between div and span?

中身が block level elements か inline elements か

Name 2 main uses of these elements on web pages.
Have a look at the source code of one of the pages...

パス