Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき﹁このマークアップで正しいのだろうか﹂と悩むことがあると思います。

そんなマークアップについて考えるイベント﹁MarkupCafe﹂がhtml5jマークアップ部の主催のもと開催されました。﹁MarkupCafe﹂では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。

本記事では﹁MarkupCafe﹂で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。

※html5jは、HTML5などのWebプラットフォーム技術を使った﹁ものづくり﹂に関わる、すべての人々を応援する非営利・中立のコミュニティです。

1.フッターの要素が持つそれぞれの意味は？

最初のお題として出されたのはページ最下部によくある、フッター部分のデザインからのマークアップです。お題で使われた画像には、筆者が印象から決めたパーツの構成がわかるようにキャプションをつけています。筆者はAからFの6つのパーツに分解してマークアップを考えました。パーツをいくつかピックアップして、参加者のマークアップを見ていきます。

パンくずリスト？ナビゲーション？

意見が分かれるところだと思いますが、Aのパーツはパンくずリストにもナビゲーションにもとれるパーツです。実際に各チームのマークアップは、大きく分類してリストを使うか、使わないかに二分されました。

お問い合せの部分だけをaddress要素にするチームもあれば、Microdataを使った上で電話番号とメールアドレスを分けてaddress要素を使う、住所も含めてaddress要素にする、といったようにaddress要素の使い方はバラバラになりました。

address要素は特に誤った使われ方をされる要素の一つですが、仕様をざっくりと意訳すると”そのドキュメントの問い合わせを受ける人に関する情報に用いる”とされています。このお題の場合、ドキュメントの問い合わせ先として適していそうなのは電話番号とメールアドレスの2種類だと捉え、所在地の情報は適していないと考えることができます。 要素の名前がもっていそうな意味からマークアップするのではなく、仕様に基づいて正しい使い方をすることが良いマークアップのためには必要です。

2.パンくずリストに正解はあるのか

次のお題に出されたのはパンくずリストです。先のお題の中にもパンくずリストとして扱える要素がありましたが、このお題では明確にパンくずリストとしてマークアップします。

ほとんどのチームが要素にメタデータを付与して、細かく意味付けをしていました。パンくずリストというシンプルなお題なだけに、同じようなマークアップになるのではと思いましたが、それぞれのマークアップからは様々な部分に思考を巡らせたのが見えてきます。

メタデータはだれのため？

このマークアップでは、Microdataで各要素にメタデータで意味付けをしています。

Microdataを使った理由としては、Googleなどの検索エンジンに対して優位なマークアップにしたいといった意図からです。

ここではol要素を使っていますが、パンくずリストを順序ありリストとするか順序なしリストとするか、この点だけを取っても意見が分かれると思います。

これからはRDFaがくるかも

このマークアップではMicrodataではなくRDFa Liteで意味付けをしています。

これは「パンくずリストはリストではない」という解釈からでした。階層構造を表すためにリスト要素を使うのが本当に正しいのかどうか、非常に考えさせられるマークアップです。

意味付けだけに囚われることなかれ

このマークアップは、メタデータを使わず非常に簡素なマークアップです。

同じようにリスト要素を使っている他のチームと比べるとnav要素を使っていません。これはnav要素の”重要なナビゲーションブロックからなるセクションだけがnav要素に適している”という仕様を意識し、パンくずリストはそこまで重要ではないと判断してのものでした。

また、nav要素を使わなかったもう一つの理由として﹁スクリーンリーダなどでアクセスしたときに重要なリンクを見失わないように﹂という意図も込められています。セマンティクスを与えてマシンが意味を理解できるようにすることも大事ですが、その先を考える必要もあるのかもしれません。

Microdata VS RDFa、決着か？

MicrodataとRDFaはどちらもメタデータを付与して意味づけを行うための仕様ですが、Microdataが7月にW3C HTML WGによってHTML5.0の勧告候補から削除されてしまいました。(詳しい理由と顛末は白石編集長の記事でふれていますのでそちらをご覧ください) Microdataがこの先どう落ち着くのか、先にふれたRDFa 1.1が勧告されたという点からもこれからの動向に要注目です。

3.求人情報は独立した記事か

最後のお題は、よくある求人情報のデザインからのマークアップです。このお題では4つのパーツに分解して考えました。中でもAの”求人情報全体”については特に意見が分かれ、多くの議論が交わされました。

tableの出番？いやいやdlでしょ

Dの求人内容の部分は、table要素とdl要素とでマークアップが分かれました。

この2つのマークアップはaside要素を使っているという違いこそあるものの、文書構造的にはとても似ています。article要素をどこで使えばいいか悩んだときは、﹁RSSとして配信されたときに単独の記事として成り立つかどうかを意識すると良い﹂と言われていますが、それも見る人や状況によって違ってきます。article要素とsection要素のどちらを使うかは、前後の文章構造によっても変わりますが、主観による部分が大きいのではないでしょうか。構造の解釈は一緒なのに意味の解釈は違うものになる、マークアップの奥深さが垣間見えます。

MarkupCafeから見えたもの

今回筆者が参加したMarkupCafeでは一つのマークアップについて、30分間考える時間がありました。自分自身でマークアップに向き合えたのもよい体験でしたが、同じデザインから自分と違うマークアップをした理由を直接聞ける機会はなかなかないと思います。解釈の仕方でマークアップが変わる、というのを実感できたイベントでした。

この記事で紹介したマークアップや要素の使い方も、すべて考え方の一つでしかありません。答えを決めることはできないかもしれませんが、良いマークアップを作っていくことはできるはずです。

最後に﹁MarkupCafe﹂主催の村岡正和氏の言葉を引用して、記事を締めくくりたいと思います。

﹁HTMLのマークアップには決まった答えがありません。 どんなウェブページを作りたいか。アクセスした人になにを伝えたいか。どういう気持で伝えたいか。 それがページごとに違うから、それぞれのページにそれぞれのマークアップがあるのです﹂

 ＜MarkupCafe Tokyo Vol.2 開催のお知らせ＞10月19日︵土︶13:00～17:00に﹁MarkupCafe Tokyo Vol.2﹂を開催します。 プロのWebデザイナーから初心者まで、みんなで気軽に会話しながらイマドキのHTMLマークアップの知識を深めましょう！ 詳細はこちらから。