Re: 第6回MLCマークアップ部開催レポート

投稿: 2015年6月23日

勤務先で第6回MLCマークアップ部(www.mitsue.co.jp)が行われたようです（私は参加していません）。

それに対してmomdoさんがtime要素は難しい(momdo.hatenablog.jp)という返信記事を書かれました。time要素の使い方についてはご指摘のとおりで、誤った利用法にならないよう仕様をよく確認して使いたいところですね。

さて、Aグループとmomdoさんのマークアップを拝見させていただき個人的に気になったのは、<div> や <td> ではスタイルシートを設定したり、スクリプトで何らかの処理を行う場合に目的の箇所を特定するのが難しいという点です。

Aグループのマークアップ（部分）

<ul>
    <li>
        <time datetime="2015-XX-XX">2015.XX.XX</time>
        <div>お知らせ</div>
        <div><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></div>
    </li>

momdoさんのマークアップ（部分）

<table role="presentation" id="mod_news">
    <tbody>
        <tr>
            <td>2015.XX.XX</td>
            <td><span>お知らせ</span></td>
            <td><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
        </tr>

たとえばニュースの内容部分を特定する場合、CSSセレクタは ul > li > div:nth-child(2) や #mod_news > tbody > tr > td:nth-child(3) などとするしかありませんが、要素の位置に依存した書き方は将来列数が変動する可能性を考えると好ましくありません。

div と span は要素そのものに意味はないので、クラス名やIDなどの属性を何も付けないという使い方は私はしません。td要素も、今回のニュースモジュールのようにそれぞれの列が違った意味を持つ場合はクラスを設定します。

それと同一日付に複数のニュースがある場合について、それぞれ工夫を凝らしたマークアップをされていますが、テーブルを使うならtbody要素で区切ればいいのではと思いました。

というわけで、（テーブルを使うという条件での）私のマークアップ例を。

<table class="mod_news" role="presentation">
  <tbody>
    <tr>
      <td class="date">2015.XX.XX</td>
      <td class="type"><span class="icon">お知らせ</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="date">2015.XX.XX</td>
      <td class="type"><span class="icon">その他</span></td>
      <td class="content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="date" rowspan="2">2015.XX.XX</td>
      <td class="type"><span class="icon">IR情報</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
    <tr>
      <td class="type"><span class="icon">製品情報</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
  </tbody>
</table>

もし、CMSなどプログラムで動的にHTMLを生成するなら、日付にはtime要素を使ってもいいでしょう。さらに、最新日付 = ページの更新日であることが保証されていると仮定して（schema.org も使っている前提）、itemprop="datePublished" を付けてみました。

<table class="mod_news" role="presentation">
  <tbody>
    <tr>
      <td class="date"><time datetime="2015-XX-XX" itemprop="datePublished">2015.XX.XX</time></td>
      <td class="type"><span class="icon">お知らせ</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="date"><time datetime="2015-XX-XX">2015.XX.XX</time></td>
      <td class="type"><span class="icon">その他</span></td>
      <td class="content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="date" rowspan="2"><time datetime="2015-XX-XX">2015.XX.XX</time></td>
      <td class="type"><span class="icon">IR情報</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
    <tr>
      <td class="type"><span class="icon">製品情報</span></td>
      <td class="content"><a href="dummy">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td>
    </tr>
  </tbody>
</table>