THE HAM MEDIA BLOG

正しいXHTMLマークアップとは？ | umbrella_process blog

第２回コーディング勉強会(SaCSS vol.2)でも取り上げた話題の日付と内容のような部分のマークアップ方法。

これは一番だ！はよくわからないですが、divとかspanのみでコーディングするのはいかがなものだろうと思ったのでエントリー。

定義リスト

■よろしくないと言っていたソース

取り上げたサイトで紹介していた、よろしくないといっていたマークアップは下記の通り。

<dl id="news">
<dt>2009.06.02<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01<dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

自分の場合、も、先日の勉強会でもこの方法で作成しています。（勉強会では複雑な例もあげましたが…）
え！？ダメなの！？なんて思ってびっくりしそうになったのですが、よくよく考えたらダメじゃないですよね。

それについては、下記エントリー参照。

定義リストで日付+タイトルをマークアップ

時々お世話になっているZoorasiaさんのブログ。自分はZoorasiaさんの考えと同じです。

日付に紐付けされる内容はタイトルと考えると、定義リストでも問題はない。

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>

え？div？

定理リストの代わりに使われていたのは、なんどdivでした。divでマークアップする人も確かにいますが…divもspanも使いすぎな印象。

divにMicroformatsというclassで意味づけという考えなのだろうと思われますが…Microformatsというかclassにとらわれすぎなんじゃないでしょうか。また、divは構造上、グルーピングをするタグであって、そのタグ自体に意味はないです。（下記リンク参照）

divタグの意味と使い方 - Webtech Walker

同様にspanもです。divがブロックに対して、spanがインライン版のそれに該当する。これに意味のありそうなclassをつけても、要素の分類をしているだけで、構造上の意味とは別になります。

結局なにが一番なのかなんてことはわかりませんが、その後に書かれていたエントリーをみても、Microformatsとかclassにとらわれすぎかなという印象。個々人の考え方だとは思うけど、自分にとってその方法はベターではあると思いますがベストではないと思う。

結局のところ、どんな用途で、別ページにも使うのかどうかや、今後変更はありえるのか、複数行になりうることはあるのか、などなど、それらの点も含めてマークアップでき、対応可能であり、且つ、構造を考えてのことならいいと思う。僕としては構造どおり且つ、できるだけシンプルにしたいなーという意見です。

余談

そういえばMicroformatsといえば、IE8のWebSlicesという機能で使われる。今後耳にしそうな形式ではある。問題は必要性と普及するかどうかだと思う。WebSlices自体は面白そうな取り組みではあると思うが、それ自体普及するかどうかは今後の動向をしっかりみていく必要はありそうだ。