5月16日（土⁠）⁠，恵比寿スバルビル会議室にてWeb Directions Eastの「実践 CSS3 & HTML5 with Microformats ワークショップ」が開催されました。本稿では，当日の模様をお届けします。

スピーカーは，本ワークショップの事前レポートにも掲載した，John Allsopp（ジョン・アルソップ）氏。

翻訳は長谷川恭久氏，Oli Studholme（オリ・スタッドホルム）氏が担当しました。

「異なるブラウザでしっかりとした見た目を保ちつつ，最新のテクノロジーを使うテクニックを実践する」という概要のワークショップでしたが，参加者からは節目節目に技術的な質問だけでなくジョン氏の考え方に対する質問も多く上がり，非常にインタラクティブな内容のワークショップとなりました。

テキストを解析してまとめる

ページを作成する際に，ジョン氏はまず，プレーンなテキスト文章をベースにどこが何にあたるのかを解析し，それをひとつひとつの情報の塊にしていく作業から行います。ジョン氏曰く，「⁠サイトの構造化はレゴブロックを組み立てるようなもの」とのことです。

そしてその情報の塊に対して名前をつけていきます。ここではマークアップの前に一般的な名前をつけてもいいでしょう。お問合せなどありがちなコンテンツだけではなく，そのサイトオリジナルの情報にもきちんと名前をつけていきます。ここで重要なのは「テキストの情報をそれぞれにグループ分けする作業に集中すること」だと述べていました。

実際にみなさんが行っている仕事では，すでにデザインがあってそれに対してマークアップを行うというのが通常のプロセスではないでしょうか。

これに対してジョン氏は，「⁠デザインからマークアップを考えるのではなく，コンテンツからマークアップを考えてそれに対して装飾を行うというプロセスがよいのではないか」と提案しました。

実際にこういったプロセスの方が，コンテンツのために見に来る利用者のためになると考えており，このプロセスがジョン氏の理想であるとのことです。

実際にマークアップする

こうして整理されたテキスト（情報の塊）を，HTMLとして書き直していきます。その際，以下の2点が重要であることを示しました。

• ピュアなHTMLのタグを使う。
• それ以外で表現できないものに関してはMicroformatsなどのパターン化されているものを使用する。

クラス名については，先ほど解析した際につけた名前をそのまま使用するパターンが多いそうです。この時点では，すべてに対してマークアップをするわけではなく，細かい部分に関しては別にしておおまかにブロックを組みます。

HTMLとはコンテンツの意味を示すためのものです。そのため，「⁠まずは見た目のことを気にせずに書いてみましょう」ということも語っていました。

HTML5の代表的なタグ

続けて，HTML5の代表的なタグが解説されました。なお，以下で紹介するタグは仕様として完全に固まったものではありませんので正式な勧告時には仕様や意味付けが変更になる可能性があります。

header要素

• 通常ロゴやタイトルが含まれる。
• header要素には，かならずh1要素などの見出し要素をいれなければならない。
• header要素には，header要素，section，footer要素などを入れることができない。

footer要素

• 利用規約や著作権情報（コピーライト）が含まれる。
• footer要素には，footer要素は入れてはいけない。

section要素

• 一番よく使用されると思われるタグ。ひとつのグループ，ひとつのテーマで括った情報をsection要素で囲む。その際に，考慮したいことは「そのsection要素が何のテーマかを分かりやすくするためにセクション開始後，h2要素などの見出し要素を入れる（h1要素にしなければならないわけではない⁠）⁠」とのこと。

写真4　section要素を解説

article要素

• ブロックのように独立した記事をグループ分けしたいとき使用する。
• section要素との違いは，以下のとおり。
  • section要素：単純な情報のグループとして分ける。
  • article要素：その部分の情報だけが独立しても意味を持っているものに対して適用する。
• 「ひとつの情報として抜き出しても情報として成立する場合はarticle要素を利用する」ことが仕様となっているため，捕らえ方や感覚は人によって違うという問題が起きている。section要素とarticle要素は情報をグループとして分けるということでは同じだが意味が異なってくる。
• ※ジョン氏は「検索エンジンがインデックスするページの中で情報を抜き出す際に独立した情報なのか，それともただの構造としてのタグなのかを判断するのに適切なのではないか」と考えているそうです。全部section要素をarticle要素にしても問題はありませんが，article要素は，そのページでどの部分が重要かを表すタグになります。つまり，以下のように考えればよいのではないでしょうか。
  • 情報としてarticle要素 　＝　セマンテックな意味がある
  • 構造としてsection要素　＝　セマンテックな意味がない（従来のdiv要素と同じ）

nav要素

• ページ内のナビゲーションを示す。
• もし特殊なブラウザがnav要素の中身を解析して特殊なナビゲーションとして別の見せ方を行うことができるようになれば，アクセシビリティとして有効になる。
• また，検索エンジンがインデックスする際にnav要素からサイトの構造を解析することもありえる。