【入門編】timeタグによる期間の指定 – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。

HTMLを書いているとき、「この日付、どう書くのが一番親切なんだろう？」と悩んだことはありませんか？ただのテキストとして画面に表示させるだけなら簡単ですが、検索エンジンやブラウザに「これは日付ですよ！」と正しく伝えるには、ちょっとしたコツがいります。

今回は、そんな時に頼りになる``タグ、そして意外と知られていない「期間（Duration）」の表現方法について、一緒に紐解いていきましょう。

—

まず、``タグの役割をイメージしてみてください。

例えば、あなたが友人から「今度の土曜の14時に待ち合わせね！」とメールをもらったとします。人間なら「あ、この週末のことだな」とすぐに分かりますよね。でも、コンピューターにとっては、ただの「文字列」に過ぎません。

``タグは、「ここからここまでは、人間が見るための情報だけど、実はコンピューターのための重要な日付データですよ」と教えてあげるための、いわば丁寧な「ラベル」なんです。

一番シンプルな使い方はこんな感じです。

公開日：2023年10月25日

`datetime`という属性の中に、コンピューターが世界共通で理解できる形式（YYYY-MM-DD）で日付を書くのがポイントです。これだけで、ブラウザや検索エンジンは「ああ、これは2023年10月25日のことだな！」と即座に理解できるようになります。

—

さて、ここからが今回の本題です。「昨日から今日まで」とか「3時間かかります」といった期間（Duration）を表現したいとき、どうすればいいでしょうか？

例えば、料理のレシピサイトで「調理時間：30分」と書く場合を想像してみてください。ただ「30分」と書くだけでも伝わりますが、``タグを使うと、こんなにスマートになります。

この料理の調理時間は、

30分
です！

ちょっと不思議な記号ですよね。「P」はPeriod（期間）、「T」はTime（時間）を意味するルールになっています。

最初は「なんだか暗号みたいで難しそう…」と感じるかもしれません。でも大丈夫。全部を覚える必要はありません。必要な時に「duration time format」と検索して、カンニングペーパーのように使えばいいんです。現場のプロだって、いつもそうしていますから！

—

なぜわざわざこんなタグを使うのか。それは、「Webサイトを誰にとっても使いやすくするため」です。

例えば、視覚障害のある方がスクリーンリーダー（画面読み上げソフト）を使っているとき、ただのテキストよりも``タグで囲まれている方が、機械が「これは時間に関する情報だ」と適切に判断して読み上げてくれることがあります。

また、カレンダーアプリと連携させたり、検索結果に「調理時間：30分」とリッチな情報を出したりと、この小さなマークアップが、未来の便利な体験に繋がっていくんです。

—

``タグのルールをまとめると、たったこれだけです。

1. `datetime`属性でコンピューターに本当の時間を教える
2. 期間を示すときは「PT〜」のルールを借りる
3. 人間には読みやすい日本語で表示する

「完璧に書かなきゃ！」と気負う必要はありません。まずは今度、ブログやWebページで日付を書くときに、そっと``タグで囲ってみてください。それだけで、あなたの書いたHTMLは、ぐっと「プロ仕様」に近づきます。

何か分からないことがあったら、いつでも戻ってきてくださいね。一緒に、もっと素敵なWebサイトを作っていきましょう！