HTML5 追加された data 要素について

HTML5 では 2011-10-29 の Editor's Draft から time 要素が削除され、data 要素が追加されたようです。この要素が span 要素でダメな理由も、time 要素のときと同様に私にはさっぱり理解できないですが、一応仕様書くらい読んでおくことにします。ED にリンクしておきますが、低スペックマシンで開くと酷い目にあうので注意が必要。

data 要素は、value 属性でその内容の機械で読み取れる形式とあわせてその内容を表しています。value 属性は必須で、その値は、機械で読み取れる形式で要素の内容を表したものでなければいけません。

Microformats またはこの仕様で定義されている microdata 属性と組み合わせることで、要素はデータプロセッサのための機械で読み取れる形式の値、そしてウェブブラウザのレンダリングの目的のための人間が読める形式の値のどちらも提供することができます。この場合 value 属性で使用されるフォーマットは、使用中の Microformat または microdata vocabulary によって決まります。

例えば削除された time 要素のように特定のフォーマット以外で日付をマークアップする場合はこのような感じになります。ED にある例そのままです。

<p>We stopped talking at <data value="2006-09-24T05:00-07:00">5am the next morning</data>.</p>

またページ内のスクリプトと組み合わせて使用することができます。このような場合に使用されるフォーマットは、スクリプトのニーズによって異なります。data-* 属性はこのような状況で便利です。

これについてもソースの例を見てみましょう。こちらは内容はそのままですがちょっと整形してます。

<table class="sortable">
  <!-- class used by script to find tables to which to add sorting controls -->
  <thead>
    <tr>
      <th>Game</th>
      <th>Corporations</th>
      <th>Map Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1830</td>
      <td><data value="8">Eight</data></td>
      <td><data value="93">19+74 hexes (93 total)</data></td>
    </tr>
    <tr>
      <td>1856</td>
      <td><data value="11">Eleven</data></td>
      <td><data value="99">12+87 hexes (99 total)</data></td>
    </tr>
    <tr>
      <td>1870</td>
      <td><data value="10">Ten</data></td>
      <td> <data value="149">4+145 hexes (149 total)</data></td>
    </tr>
  </tbody>
</table>

ソートのための数値に data 要素を使っているみたいですね。ある程度フォーマットが決まってればわざわざマークアップする必要もなさそうですけど、あればあったで便利な要素かもしれないですね。手動でマークアップしない状況となると、コストを考えたらとても微妙だけど。

ところで、最後の例では機械が読み取れる形式の場合にはわざわざ data 要素で冗長なマークアップはしてないんですよね。となると例えば次のようなソース。

<article itemscope itemtype="http://schema.org/BlogPosting">
  <dl>
    <dt>公開日</dt>
    <dd><time datetime="2011-10-30" itemprop="datePublished">2011-10-30</time></dd>
  </dl>
</article>

これは time 要素がなくなると、そのまま置き換える感じだとこうなる。time 要素というものが提案されていたことを知っているとうっかり書いてしまいそうな記述。

<article itemscope itemtype="http://schema.org/BlogPosting">
  <dl>
    <dt>公開日</dt>
    <dd><data value="2011-10-30" itemprop="datePublished">2011-10-30</data></dd>
  </dl>
</article>

でもこれはわざわざ data 要素を使う意味がないからこのように記述するのが普通の感覚だよね。

<article itemscope itemtype="http://schema.org/BlogPosting">
  <dl>
    <dt>公開日</dt>
    <dd itemprop="datePublished">2011-10-30</dd>
  </dl>
</article>

time 要素はまた戻されるようです。詳しくは 復活した time 要素をご覧ください。

Comment

コメントはありません。

Comment Form

コメント本文以外の入力項目は任意です。メールアドレスは公開されません。

Trackback & Pingback