ドットコーダーセッション3 に参加した

2010/8/28(土)に「ドットコーダーセッション3」が行われた(告知ページ)。

HTML5 についてワークショップ形式で学ぶということで、おもしろそうなので参加してきた。

形式としては、4人づつチームに分かれて、印刷物として渡されたお題となるページを HTML5 でいい感じにマークアップした。お題は通販サイトの商品の詳細ページになっていて、かなり実践的なページになっていた。

僕のチームではまずはじめに紙のお題ページに「ここは ul だろ」とかみたいな感じで、どんな要素を使うかをざっと決めた。で、その後はざくざくコーディングしていった。

書いていく途中で「ここは nav 使った方がいいだろ」みたいにいろんな意見が出てきて、一人で考えるよりも理解が深まったし、より適切なマークアップができたと思う。

今回のワークショップの中で、特に勉強になった HTML 要素を挙げておく。あと、HTML5タグリファレンスの要素の紹介ページにもリンクを張っておく。

一般的な文章のセクション(区分)を表す要素。例えば、今回のお題は商品詳細ページが「商品紹介の本文」「動画紹介」「お客様の声」「お問い合わせ」と4つに分かれてたので、それぞれを section で表した。

こんな感じで明示的に文章の階層構造を定義しておくと、ブラウザ側で「次のセクションに移動するショートカット」を作れるようになったり、いろいろ活用できる。

主要なナビゲーション(つまりリンク)となる部分を表す要素。今回の場合は、サイト全体のグローバルナビゲーションと、パンくずリストに使った。

独立した部分を表す要素。ページ全体からその部分だけを取り出して意味がある場合に使う。今回の場合は、ページの中の商品詳細に関する部分をまとめてこの要素の中に入れた。RSS 配信なんかで商品詳細の部分だけを表示する、みたいな使い方を想定している。

本文に対して補足的な部分を表す要素。その部分を削除しても意味が通じる場合に使う。今回の場合は、表示している商品に対する「その他のおすすめ商品」、サイドバーのバナー一覧に使った。

本文から参照される図、コードなどを表す要素。なので、画像をなんでもかんでもこれで囲めばいい、ってもんでもない。今回の場合で言うと、商品紹介の本文に対してその商品の写真があったので、そこを figure 要素で表した。

免責条項、著作権表記とかを表す要素。文章の中での重要度を下げるものでも、文字サイズを小さくするものでもない。まぎらわしい。

HTML5 の基本については HTML5についてのおさらい - W3G Blog Studies が参考になる。今回も section, article とかの「セクショニング・コンテンツ」について読んでふむふむしながら書いた。

というか、著者の上田さんも来てて、最後に解説してくれた。上田さんありがとう !