XHTMLのマークアップでどうしても許せないというか、気になるやり方をよく見かける。
企業サイトではトップページに最新ニュースの一覧が表示されていることがよくあるが、その部分がかなりの確率でこのように書かれている。
<dl id="news"> <dt>2009.06.02<dt> <dd><a href="~">ニュースのタイトル</a></dd> <dt>2009.06.01<dt> <dd><a href="~">ニュースのタイトル</a></dd> </dl>
要は定義リストを使っているわけだが、これが「正しいコーディングである」と誰かが提唱しているのだろうか、ほんとによく見るんですが、定義リストの本来の意味からは大きく外れているのが気になるんです。
DTDではdl要素について「definition lists – dt for term, dd for its definition」と注釈があります。この文面通りに受け取れば、上記のコーディングは2006年6月1日についての解説がリンク先にあるということになってしまうが、もちろんそのようなことはないはず。
では、どのようにコーディングすればよいのか。僕がもう少しましだと思うのはこういうマークアップです。
<div id="news"> <span class="updated">2009.06.02</span> <span class="title"><a href="~">ニュースのタイトル</a></span> <span class="updated">2009.06.01</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div>
数字は更新日時のことで、文字部分はタイトルであるということが明白ですね。
でもまだ問題があります。どこからどこまでがひと固まりであるのかはっきりしません。
さらに修正してみましょう。
<div id="news"> <div class="entry"> <span class="updated">2009.06.02</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div> <div class="entry"> <span class="updated">2009.06.01</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div> </div>
最初のコーディングとだいぶ変わりましたね。そして、RSSやAtomのフィードのソースにかなり近づいたと思いませんか？ XHTMLはXMLでもあるので、同じXMLであるRSSと似ているというのは、個人的には「より正しいマークアップである」と思います。
さらにもうひと工夫すれば、機械的にもこの部分が新着記事であると理解できるようになります。そのうちMicroformatsという考え方についてご紹介したいと思ってます！
DTDだけ見ても分からない事が仕様書には書かれています。DTDではなく仕様書を読むと疑問が解けるのではないかと思います。
現行のXHTML1.0、XHTML1.1はいずれもHTML4（HTML4.01）のXML版という位置づけですが、HTML4の仕様書にはこのように書かれています。
http://www.w3.org/TR/html401/struct/lists.html
> Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list:
…
> Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/lists.html
> 定義リストは、DL要素で生成され、一般的には一連の用語/定義の組で構成される。とはいえ他の応用法もあり得る。そこで、製品の宣伝に定義リストを使う場合もあるであろう。
…
> DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。
このように、仕様書ではDL/DT/DDによるリストについて、用語の定義以外にの利用法が考えられるという事が示されており、また、具体例として「商品説明（見出しとそれに続くテキストのペア）」「会話（話者と発言内容のペア）」が挙げられています。
「other applications」が具体的に何を指すのか（どんな使い方ならOKで、どんな使い方ならNGなのか）が定義されていない以上は、「用語の定義に使うのだけが正しく、それ以外は間違い」とは言えないと考えられます。
ところでDIV/SPANについては、このような意味合いは全く定義されていません。class属性を取っ払って見た限りでは、後半で示された例は、列挙された項目であるとも、語句同士がペアになっているとも解釈のしようがありません。
以上の事から、この例のような場合であれば、
* DL/DT/DDでHTMLのレベルで（語句同士がペアであるという）意味づけを行い、
* その上でMicroformatsによりさらに詳細な意味づけを行う。
というのが、HTMLのレベルでもMicroformartsのレベルでも「仕様上問題の無い形で、可能な限り最も詳しく情報を提供する方法」ではないかと自分は考えております。
コメントありがとうございます！！！
Microformatsについては勉強し始めたばかりなので、また教えていただければ嬉しいです。
商品説明に定義リストは自分も使いますねー。でも日付とタイトルの組み合わせはちょっと？と思います。まぁ間違いである！とは言わないんですが、気になるんですよ。人間にとって分かりにくい。でもMicroformats Wikiのサンプルでも結構定義リストは使われているので、議論の結果ＯＫということになれば使おうかなと思います。
Webデザイナーにも、機械にも分かりやすいコーディングが「より正しい」マークアップではないかなぁと思って勉強中です。
HTML5になると日付や更新履歴のマークアップがしやすくなりますね！
そうですね。Web制作の実態に即した要素が増えるので楽しみです。
それまではdiv、spanで代替して、将来実装される要素名をclassに入れておくのがいいんじゃないかなと思ってるんです。
無理に既存の要素を使わなくても…
私的に先にある通り、定義リスト+class属性で代替えする方が、まだいい気もします。無理にdivやspan要素を使わなくても…
個人的ですがdivやspanだらけのHTMLをWebデザイナーが好むと思えなくて…かえって見づらい気がしますし。非視覚系UAでアクセス時も分かりづらくなりそう
コメントありがとうございます。！
そしてすみません、誤解を与える書き方をしてしまったようですが、「定義リストを使うべきか否か」はそんなに重要とは思ってないです。定義リスト+classでもいいと思います。
個人的によくないと思うのはあくまで「classなしの定義リスト」でコーディングしちゃうことです。これはW3Cの勧告がどうこう云々とは関係なく、制作の現場で困ってることなんです。また次の記事で書こうと思ってますので、ご意見いただければ嬉しいです！
最終的に出した答えのdivとspanのみの無意味タグのみものが、
XMLに近い云々以前に一番xHTML準拠してないと思うのですが・・・
えーっと文法違反してますか…？すみません…
あと、続き的なものをこちらに書いてます。消化不良な感じで申し訳ないのですが…。
http://www.umbrellaprocess.com/archives/152
この記事、何気なく書いたのですが、よくアクセスされていて、各所で批判されている様です。
が、divとspanに意味的なクラス名をつけるコーディングが「無意味」で、クラス名無しのdlでのコーディングの方が「意味がある」という意見が、個人的には理解できません。
というか、定義リストって、連想配列みたいなものでしょう？キーと値のセットですよね。記事の日付がキーで、記事のタイトルが値だと言うのはどうも気持ち悪い。「日付」がキーで、「6月1日」が値だというコーディングなら納得いくんだけど…思い込みですかね…
まぁどちらにせよ、HTML5になったらarticleでコーディングすることになるでしょう。
umbrella_processさん、こんにちは。
umbrella_processさんのHTMLに対する厳しさを感じますーっ。
僕も、コンピューターの事を思うあまりにHTMLの邑楽かさがイラっと感じることがあります。でも、XHTML2.0ではなく、HTML5が受け入れられる(かはわかりませんが)という時代の流れで考えれば、今度は針が逆に軽くふれて、コンピューターも『人間』も読み書きできる簡単なルールが受け入れられていくんじゃないかなぁ。
という前置きで、
たぶん、umbrella_processさんはHTMLの各要素の意味・用途を厳しく独立化しすぎてしまっているんじゃないかなぁと思います…。そわそわ
例えば、HTMLで日付をマークアップする際も、日付は段落ではないのでPでは無い。日付を表現できる要素は存在しないので、div class=”date” が正しいHTMLとなる。
というのと同じようなことだと思うのですが、この場合、HTMLに”日付”を印す要素がない場合は、リストや段落を”日付”の上位の概念としてマークアップする。という考え方でないと、HTMLでは文書は全部divとclassになっちゃうと思います。
>divとspanに意味的なクラス名をつけるコーディングが「無意味」で、クラス名無しのdlでのコーディングの方が「意味がある」という意見が、個人的には理解できません。
コンピューターからの視点では、class属性の値は単なる文字列で、マークアップされているデータの意味とは結びついていません。
値には意味がないので、コンピューターからは扱えないんです。
class属性は、HTMLでは表現し切れない分類・区分をつけるて、人間はその文字列に超個人的に意味をくっつけて、主にCSSやJSで使っています。だから、コンピューターのことを思うなら、divやclassで人間しか扱えない文字列をあてるよりも、「段落があるよ(ぼそ)」ぐらい教えてあげられるマークアップのほうが正しいというか「優しい!」
>連想配列みたいなものでしょう？キーと値のセットですよね。記事の日付がキーで、記事のタイトルが値だと言うのはどうも気持ち悪い。
HTMLの説明の難しいところはここなんですよー
正しいマークアップなんてのはなくて、マークアップした人がどう情報を捉え、表現しようとしているのかで要素は変わるんです。
扱う値が日付とタイトルだから連想配列は正しい使い方じゃない。とならないのと同じで、それはケースバイケースでしょ。ということなんじゃないかな?
>コンピューターも『人間』も読み書きできる簡単なルールが受け入れられていく
まさに、コレ！って思います。
コンピュータが理解できる範囲が狭すぎるのでいろいろおかしくなるんですよね。
実際仕事ではやっぱりDIVは避けてDLやPを使ってコーディングしてますけど、違和感がありますね。せめて要素で悩まないよう、class名をつけるようにしましょう！って、思います。
あと、Googleはclass名の中身も理解しだしてるので、そういう意味でもclass名はつけておくに越したことはありません。microformatsが世界共通とは、まだ言えない状況ですが。