いかにdivタグを使わずに意味に則ったタグをコーディングで使えるかが、マークアップタスクを行う上で一つのテーマだと思います。
その中で、「日付」のマークアップになんとなくdivタグやspanタグを使っているパターンは結構あるのではないかと。
本記事は、日付のマークアップにはぜひtimeタグを使っていこうというテーマでお送りします。
time要素とdatatime属性
コーポレートサイト等でよくある、以下のようなニュース記事一覧セクションのマークアップを考えてみます。
一旦サンプルとして、こんなマークアップをしてみます↓
<ul class="news"> <li> <a href="/hoge1"> <span>2023年1月11日</span> <p>ニュース記事です。</p> </a> </li> <li> <a href="/hoge2"> <span>2022年12月9日</span> <p>ニュース記事なんです。</p> </a> </li> </ul>日付をspanタグで表現している上記のようなコードだと、最善のマークアップをしているとは言い難いわけです。
該当箇所にフォーカスしてマークアップし直してみると、以下のような具合になります。
<a href="/hoge1">
<time datetime="2023-01-11">2023年1月11日</time>
<p>ニュース記事です。</p>
</a>our code... */spanタグだった部分をそのままtimeタグに置き換えていることに加えて、ポイントはtimeタグ内に記述したdatatime属性ですね。
timeタグ内にテキストとして記されている”2023年1月11日”はコンピューターは日付のフォーマットであると認識してくれないため、日付であることを伝えるべく、datatime属性にて補足の必要があるわけです。
例えば”2023.1.11″や”20230111″はコンピュータも日付として認識してくれると期待してしまいそうなものですが、年月日に関してはハイフン繋ぎのフォーマットでしか理解してくれないので、大体の日付表記時には、このdatatime属性での補完が必要になるかと思います。
日付の表記にはtime要素を積極的に使っていこう
日付の表記をtime要素以外のタグでマークアップしたところで、表示に不具合が出るわけでもSEO上の順位が大きく下がるわけでもないと思いますが、こういった細かいセマンティックにこだわってこそ、希少価値の高いマークアッパーになれると考えています。
日付の意味合いにズバリ適した要素が用意されている以上、積極的にtime要素を使ってコーディングしていきたいですね。