【HTML Living Standard】time属性値の使い方
time属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
timeオブジェクトは、日付や時刻といった特定の時点を表現するためのHTML要素であり、その情報の意味を機械が解釈しやすい形式で提供するためのオブジェクトです。この要素を使用することで、人間が読みやすい形式で日時を表示すると同時に、コンピューターが処理可能な標準化された形式で情報を埋め込むことができます。例えば、ウェブページに「2023年10月26日」と表示しつつ、内部的には「2023-10-26」というISO 8601形式で日付を記述するといった使い方をします。
time要素は、ブログ記事の公開日時、イベントの開催時刻、会議の予約日時など、コンテンツ内の日時情報にセマンティックな意味を与える際に特に有用です。テキストコンテンツとしての時間情報をマークアップすることで、検索エンジンがコンテンツの関連性を判断したり、ユーザーエージェントがその情報をカレンダーアプリと連携させたりする可能性が広がります。
特に重要なのがdatetime属性です。この属性には、ISO 8601標準に準拠した機械可読な日付または時刻の値を指定します。これにより、例えばタイムゾーンを考慮した日時表示の変更や、特定の期間で情報をフィルタリングする際の正確なデータ処理が可能になります。datetime属性は必須ではありませんが、time要素の最大の利点を引き出すために、可能な限り使用することが強く推奨されます。システムエンジニアとして、ウェブコンテンツのセマンティクスを理解し、適切にマークアップすることは、アクセシビリティや相互運用性の高いウェブアプリケーションを構築する上で非常に大切なスキルとなります。
構文(syntax)
1<time datetime="2023-10-27T10:00:00Z">2023年10月27日 午前10時 (UTC)</time>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML timeタグで日時を表現する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title><time>タグのサンプル</title> 7</head> 8<body> 9 <h1><time>タグの使用例</h1> 10 11 <p> 12 <!-- 特定の日付を表現します。datetime属性にはISO 8601形式で記述します。 --> 13 このイベントは<time datetime="2023-10-27">2023年10月27日</time>に開催されます。 14 </p> 15 16 <p> 17 <!-- 特定の時刻を表現します。 --> 18 お店は毎日<time datetime="09:00">午前9時</time>に開店し、<time datetime="20:00">午後8時</time>に閉店します。 19 </p> 20 21 <p> 22 <!-- 特定の日付と時刻を結合して表現します。 --> 23 会議は<time datetime="2023-11-15T14:30">11月15日 午後2時30分</time>に開始予定です。 24 </p> 25 26 <p> 27 <!-- 特定の年を表現します。 --> 28 ウェブが一般に公開されたのはおよそ<time datetime="1991">1991年</time>です。 29 </p> 30 31 <p> 32 <!-- 特定の月を表現します。 --> 33 日本には<time datetime="--01">1月</time>に正月があります。 34 </p> 35</body> 36</html>
HTMLの<time>タグは、ウェブページ上で日付や時刻の情報を明確に表現するために使用される要素です。このタグの主な目的は、人間が読みやすい形式で日付や時刻を表示しつつ、同時に検索エンジンやブラウザ、支援技術などの機械が正確に理解できる標準的な形式（ISO 8601）を提供することにあります。
この要素には、プログラミング言語の関数における引数や戻り値のような直接的な概念はありませんが、datetimeという重要な属性を通じて情報を伝達します。datetime属性には、国際標準であるISO 8601形式で日付や時刻の情報を記述します。この属性の値はウェブページ上では直接表示されませんが、機械がその情報を正確に解釈するために利用されます。例えば、「2023年10月27日」というテキストを<time datetime="2023-10-27">2023年10月27日</time>と記述することで、人間には読みやすい形式で表示しつつ、機械には正確な日付を伝えることができます。
サンプルコードでは、特定の日付（2023-10-27）、時刻（09:00や20:00）、日付と時刻の組み合わせ（2023-11-15T14:30）、特定の年（1991）、そして特定の月（--01）といった、様々な形式で日付や時刻を表現する例が示されています。このように、<time>タグとdatetime属性を組み合わせることで、ウェブコンテンツにおける日付や時刻の情報の正確性と利便性を向上させることができます。機械が理解できる形式で情報を提供することで、カレンダーへの追加機能や検索結果の改善など、ユーザー体験の向上にも貢献します。
<time>タグは、日付や時刻を意味的にマークアップするHTML要素です。表示されるテキストとdatetime属性の内容は、同じ日時を指すようにしてください。特に、datetime属性には、検索エンジンや補助技術が正確に理解できるよう、ISO 8601形式（例: YYYY-MM-DD、HH:MM、YYYY-MM-DDTHH:MMなど）で記述することが非常に重要です。この属性を省略した場合でもタグ内のテキストから日時を推測可能ですが、正確な情報伝達のため属性の利用が推奨されます。このタグは見た目を変更する目的ではなく、日付や時刻という情報の意味付けを行うために使用します。
HTML time要素で日時をマークアップする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML time要素のサンプルコード</title> 7</head> 8<body> 9 <h1>time要素の基本的な使い方</h1> 10 11 <p> 12 <!-- time要素は、日付や時刻の情報を意味的にマークアップするために使用します。 --> 13 <!-- datetime属性には、機械が読み取れるISO 8601形式で日付や時刻を指定します。 --> 14 <!-- 要素の内容は、人間が読みやすい形式で記述します。 --> 15 16 会議は<time datetime="2023-10-26">10月26日</time>に開催されます。 17 </p> 18 19 <p> 20 開店時間は<time datetime="09:00">午前9時</time>です。 21 </p> 22 23 <p> 24 イベント開始は<time datetime="2023-11-01T14:30">2023年11月1日 午後2時30分</time>です。 25 </p> 26 27 <p> 28 <!-- タイムゾーン情報（UTC）を含む完全なISO 8601形式の例です。 --> 29 記事の最終更新は<time datetime="2023-10-25T10:00:00Z">2023年10月25日 10:00 UTC</time>です。 30 </p> 31</body> 32</html>
HTMLのtime要素は、ウェブページ上で日付や時刻の情報を意味的にマークアップするために使用されます。これにより、単なるテキストとして表示するだけでなく、その情報が「いつ」「何時」であるかをブラウザや検索エンジン、アクセシビリティツールなどが正確に理解できるようになります。
この要素には通常、datetime属性を指定します。datetime属性には、国際標準であるISO 8601形式で、機械が読み取りやすい日付や時刻（例: "2023-10-26"、"09:00"、"2023-11-01T14:30"、タイムゾーンを含む"2023-10-25T10:00:00Z"）を正確に記述します。一方、time要素の開始タグと終了タグの間に記述される内容は、人間が読みやすい形式（例: "10月26日"、"午前9時"）で表示されます。このように、datetime属性で機械向け情報を提供しつつ、要素内容で人間向け情報を提供できる点が特徴です。
time要素自体は、HTMLの他の要素と同様に、特定の処理に対する引数を直接受け取ったり、計算結果のような戻り値を返したりするものではありません。ウェブページの構造を定義し、情報をセマンティックに（意味的に）マークアップすることがその役割です。日付や時刻情報をより正確かつ効率的に扱うための重要な要素であり、イベントスケジュールの表示や記事の公開日時など、様々な場面で情報の正確な伝達に貢献します。
time要素は、日付や時刻の情報を意味的にマークアップするために使用します。特に重要なのはdatetime属性で、機械が読み取れるISO 8601形式（例: YYYY-MM-DD、HH:MM、YYYY-MM-DDTHH:MMなど）で正確な値を記述する点が最大の注意点です。要素の内容は人間が読みやすい形式で記述して問題ありませんが、datetime属性の値と一致させる必要はありません。このdatetime属性の値は、検索エンジンやスクリーンリーダーなどの補助技術がコンテンツを正確に理解し、活用するために不可欠です。形式を誤ると、これらの技術が情報を正しく解釈できないため、ウェブページのアクセシビリティやSEOに悪影響を及ぼす可能性があります。プログラムで日付時刻を扱う際にも利用されるため、正しい記述を心がけてください。