【HTML Living Standard】time要素の使い方
time要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
timeクラスは、文書中の特定の日付、時刻、または期間などの時間情報を表すクラスです。このHTML要素は、人間が理解しやすい形式で時間情報を表示しながら、同時に機械がその情報を正確に解釈できるよう、セマンティックな意味を与えます。単に日付や時刻をテキストとして表示するだけでなく、time要素を使用することで、その情報が「時間」であることを明示できます。
特に重要なのは、オプションで指定できるdatetime属性です。この属性には、ISO 8601形式などの標準的な機械可読な形式で、要素の表示内容とは異なる、正確な日付や時刻を記述できます。これにより、ブラウザ、検索エンジン、そしてスクリーンリーダーなどの支援技術が、その時間情報を一貫した方法で処理できるようになります。
例えば、ウェブサイトでイベントの開催日時や記事の公開日を表示する際にtime要素とdatetime属性を組み合わせることで、検索エンジンがイベントの日時を正確に認識し、ユーザーが検索結果から直接カレンダーに追加するような機能を提供できるようになります。また、スクリーンリーダーは時間情報をより適切に読み上げることができ、視覚障碍を持つユーザーにとってもアクセシビリティが向上します。
システムエンジニアを目指す方にとって、ウェブコンテンツに時間に関する情報を記述する際には、単にテキストとして表示するのではなく、このtime要素を適切に利用することで、よりセマンティックでアクセシブルな、そして機械が理解しやすいウェブページを提供できることを理解しておくことが重要です。
構文(syntax)
1<time datetime="2023-10-27">2023年10月27日</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>HTML timeタグのサンプル</title> 7</head> 8<body> 9 <h1>timeタグの使用例</h1> 10 11 <p> 12 <!-- 日付のみを表現する場合 --> 13 今日の会議は <time datetime="2023-10-27">2023年10月27日</time> に開催されます。 14 </p> 15 16 <p> 17 <!-- 日時（日付と時刻）を表現する場合 --> 18 締め切りは <time datetime="2023-11-15T17:00">2023年11月15日 午後5時</time> です。 19 </p> 20 21 <p> 22 <!-- 特定の時間を表現する場合（日付が自明な場合など） --> 23 開店時間は <time datetime="09:00">午前9時</time> です。 24 </p> 25 26 <p> 27 <!-- 年のみを表現する場合 --> 28 このプロジェクトは <time datetime="2023">2023年</time> に開始しました。 29 </p> 30</body> 31</html>
HTMLのtimeタグは、Webページ上で日付や時刻の情報を意味的にマークアップします。これにより、人間には読みやすく、機械には正確な構造化された日付・時刻情報を提供できます。
timeタグの主な機能はdatetime属性を通じて提供されます。この属性には、機械が読み取れる形式（ISO 8601形式）で日付や時刻の値を記述します。リファレンス上は引数なしですが、datetime属性が具体的な時間情報を伝える役割を担います。一方、timeタグの中身は、ユーザーに表示される「2023年10月27日」といった人間が理解しやすい表現です。
サンプルコードでは、日付のみ、日時、時刻のみ、年のみといった多様な時間表現にtimeタグが適用されています。コンピュータはこれによりコンテンツ内の時間を正確に解釈し、カレンダー機能連携や検索精度の向上などに貢献します。このタグ自体に直接的な戻り値はありません。
timeタグは、人間が読める日時情報を機械も理解できるようマークアップするための要素です。最も重要な点は、datetime属性を正しく指定することです。この属性には、ISO 8601形式（例: YYYY-MM-DDやYYYY-MM-DDTHH:MMなど）で日時を記述してください。タグ内のテキストは閲覧者が見る情報、datetime属性は検索エンジンや支援技術が利用する情報と理解すると良いでしょう。両者は内容が異なっても構いませんが、同じ時点を指すように注意してください。datetime属性がない場合、タグ内のテキストがそのまま機械可読な日時と解釈されますが、明示的な指定を推奨します。これにより、サイトのアクセシビリティやSEOの向上に貢献します。
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>HTML <time>要素の基本的な使い方</h1> 10 11 <!-- <time>要素は、日付、時刻、または期間を人間が読める形式で表示し、 --> 12 <!-- datetime属性は、マシンが読み取れる標準形式でその値を指定します。 --> 13 14 <p> 15 本日の会議は 16 <time datetime="2023-10-27">2023年10月27日</time> 17 に開催されます。 18 </p> 19 20 <p> 21 開始時刻は 22 <time datetime="14:30">午後2時30分</time> 23 です。 24 </p> 25 26 <p> 27 このイベントは 28 <time datetime="2023-10-27T14:30">2023年10月27日の14時30分</time> 29 に正確に開始されます。 30 </p> 31 32 <p> 33 昨日のニュースは 34 <time datetime="2023-10-26">昨日</time> 35 発表されました。 36 </p> 37</body> 38</html>
HTMLの<time>要素は、日付、時刻、または期間を表現するために使用されます。これにより、ブラウザや検索エンジン、支援技術などがその情報を正しく理解し、処理できるようになります。
この要素の主な特徴は、datetime属性です。人間が読むテキストとは別に、機械が正確に読み取れる標準形式で日時を指定するには、datetime属性を使用します。datetime属性の値は、国際標準であるISO 8601形式で記述します。例えば、日付であれば「YYYY-MM-DD」（例: 2023-10-27）、時刻であれば「HH:MM」（例: 14:30）、日付と時刻であれば「YYYY-MM-DDTHH:MM」（例: 2023-10-27T14:30）のように記述します。
サンプルコードにあるように、「午後2時30分」といった人間が読みやすい表現を<time>要素の中に入れつつ、datetime="14:30"のように機械が理解できる形式で時刻を提供することが可能です。また、「昨日」のように相対的な表現を用いる場合でも、datetime属性で具体的な日付「2023-10-26」を指定できます。このように、人間がコンテンツを読みやすくしつつ、機械が情報を構造的に把握できるようにすることで、Webページのセマンティクス（意味）を向上させます。
この<time>要素自体には、直接の引数や戻り値はありません。あくまでHTMLの構造を定義する要素として機能します。
<time>要素は、日付や時刻といった時間情報を意味づけするHTML要素です。最も重要なのはdatetime属性で、必ずISO 8601形式（例: 2023-10-27、14:30、2023-10-27T14:30）で記述し、機械が正確に読み取れるよう記述しましょう。
要素内のテキストは人間が読みやすい表現で構いませんが、datetime属性の値はそのテキストが示す時間と正確に一致させてください。この属性を省略すると、<time>要素の意味が薄れてしまいます。検索エンジンや支援技術がコンテンツを適切に理解できるよう、正しく活用しましょう。