【HTML Living Standard】date属性値の使い方
date属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dateオブジェクトは、日付や時刻の情報を表現するためのオブジェクトです。これはHTMLのLiving Standardにおいて、主にHTML要素の特定の属性値として日付情報を指定する際に用いられる概念です。具体的には、<time>要素のdatetime属性や、<input type="date">要素のvalue属性などに、特定の日付形式で値を設定する場合にこのdateオブジェクトが指す形式が適用されます。
このdateオブジェクトが表す値は、通常「YYYY-MM-DD」という形式で記述されます。これは、4桁の年、2桁の月、2桁の日の順にハイフンで区切られた文字列です。この標準化された形式により、ウェブブラウザや検索エンジン、その他のアプリケーションが、ウェブページ上に記述された日付情報を一貫して正確に解釈し、処理することが可能になります。
例えば、<input type="date" value="2023-10-26"> のように記述することで、ユーザーには日付入力用のカレンダーインターフェースが提供され、内部的には指定された日付情報が扱われます。このdateオブジェクトの理解は、HTMLで時間に関連するコンテンツをマークアップする際や、フォームで日付データを扱う際の基盤となります。システム開発において、日付情報の正確なやり取りは非常に重要ですので、この形式を正しく理解し活用することは、初心者エンジニアにとって必須の知識と言えます。
構文(syntax)
1<time datetime="2023-10-27"></time>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML time要素とdatetime属性で日時を表現する
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要素とdatetime属性のサンプル</title> 7</head> 8<body> 9 <h1>日付と時刻の表示</h1> 10 11 <p> 12 <code><time></code>要素は、人間が読める形式で日付や時刻を表示しつつ、 13 <code>datetime</code>属性によって機械が解析しやすい形式でその情報を提供します。 14 これにより、検索エンジンやブラウザなどが日付や時刻を正確に認識できます。 15 </p> 16 17 <!-- 特定の日付を示す例 --> 18 <p> 19 今日の発売日: <time datetime="2023-10-27">2023年10月27日</time> 20 <!-- datetime="YYYY-MM-DD" の形式で、機械可読な日付を指定します。 --> 21 </p> 22 23 <!-- 特定の時刻を示す例 --> 24 <p> 25 営業時間: <time datetime="09:00">午前9時</time>から<time datetime="17:00">午後5時</time>まで 26 <!-- datetime="HH:MM" の形式で、機械可読な時刻を指定します。 --> 27 </p> 28 29 <!-- 特定の日時を示す例 (UTCタイムゾーン指定) --> 30 <p> 31 イベント開始: <time datetime="2024-01-01T10:00Z">2024年1月1日 午前10時 (UTC)</time> 32 <!-- datetime="YYYY-MM-DDTHH:MMZ" の形式で、機械可読な日時（UTC）を指定します。'T'は日付と時刻の区切り、'Z'はUTCを意味します。 --> 33 </p> 34 35 <!-- 特定の年を示す例 --> 36 <p> 37 プロジェクト開始年: <time datetime="2023">2023年</time> 38 <!-- datetime="YYYY" の形式で、機械可読な年を指定します。 --> 39 </p> 40 41</body> 42</html>
HTMLの<time>要素は、日付や時刻を人間が読みやすい形式で表示するためのものです。この<time>要素に付与するdatetime属性は、その表示されている日付や時刻の情報を、コンピューターが正確に解析できる標準的な形式で提供する役割を担います。これにより、検索エンジンやブラウザ、スクリーンリーダーなどのプログラムが、ウェブページ上の日付や時刻を誤りなく認識し、イベントの自動登録や検索結果の改善、ユーザーへの情報提供などに活用できるようになります。
datetime属性には、日付を「YYYY-MM-DD」の形式（例: "2023-10-27"）で指定したり、時刻を「HH:MM」の形式（例: "09:00"）で指定したりできます。特定の日時を示す場合は「YYYY-MM-DDTHH:MMZ」の形式（例: "2024-01-01T10:00Z"）で記述することが一般的です。ここで「T」は日付と時刻の区切り、「Z」は協定世界時（UTC）を意味します。また、年のみを示す場合は「YYYY」（例: "2023"）と簡潔に指定することも可能です。
このdatetime属性は、引数や戻り値を持つ関数とは異なり、属性値として直接、機械が読み取れる形式の日付や時刻の文字列を設定します。これにより、開発者はシンプルかつ正確に時間情報をHTMLに埋め込むことができ、ウェブコンテンツのセマンティック（意味論的）な構造を向上させ、アクセシビリティを高めることに貢献します。
time要素は、人間が読みやすい日付や時刻と、検索エンジンなどが解析しやすい機械可読な日付や時刻を同時に提供するために使用します。特にdatetime属性の値は、ISO 8601という国際標準形式に厳密に従う必要があります。例えば、日付は「YYYY-MM-DD」、時刻は「HH:MM」、日時であれば「YYYY-MM-DDTHH:MM」のように記述し、日付と時刻の区切りには大文字のTを用います。UTCタイムゾーンを示す場合は、時刻の後にZを付与してください。この形式が少しでも異なると、機械が正しく情報を認識できない可能性があるため注意が必要です。要素の内部テキストはユーザーに分かりやすい表記で構いませんが、datetime属性の値は厳密な形式で正確に記述することが重要です。
HTMLで日時選択フォームを作成する
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>日時選択フォーム</title> 7</head> 8<body> 9 <h1>会議日時設定</h1> 10 <form action="#" method="post"> 11 <!-- 12 <label>要素は入力フィールドのキャプションを提供し、アクセシビリティを向上させます。 13 "for"属性と入力フィールドの"id"属性を一致させることで関連付けます。 14 --> 15 <label for="meeting-datetime">会議開催日時:</label> 16 17 <!-- 18 <input type="datetime-local"> は、日付と時刻を組み合わせた入力フィールドを作成します。 19 ブラウザによってUIは異なりますが、カレンダーと時間ピッカーが表示されます。 20 "name"属性は、フォームが送信されたときにサーバーに送られるデータのキーとなります。 21 "value"属性に "YYYY-MM-DDTHH:MM" 形式の文字列を指定することで、デフォルト値を設定できます。 22 --> 23 <input type="datetime-local" id="meeting-datetime" name="meetingDatetime" value="2023-10-27T14:00"> 24 25 <br><br> 26 27 <!-- フォーム送信ボタン --> 28 <button type="submit">日時を予約する</button> 29 </form> 30</body> 31</html>
このHTMLコードは、ユーザーが日付と時刻を組み合わせて選択できるフォームの例です。中心となるのは、<input type="datetime-local">要素で、これは日付と時刻の両方を選択するための入力フィールドを作成します。ブラウザは通常、この入力タイプに対して、カレンダーや時間ピッカーといった専用のユーザーインターフェースを提供し、利用者が直感的に日時を設定できるようにします。
<input type="datetime-local">要素自体には、特定の引数や戻り値は定義されていません。その振る舞いや表示は、付随する属性によって決定されます。
id="meeting-datetime"属性は、この入力フィールドを一意に識別するためのもので、<label for="meeting-datetime">要素と連携することで、入力フォームのアクセシビリティを向上させます。
name="meetingDatetime"属性は、フォームが送信された際に、このフィールドで選択された日時データをサーバーへ送る際のキー（名前）として機能します。
value="2023-10-27T14:00"属性は、入力フィールドに初期値を設定します。値は「YYYY-MM-DDTHH:MM」という厳密な形式で記述する必要があり、この例では2023年10月27日14時00分がデフォルトで表示されます。
このコードにより、ウェブフォームでユーザーから正確な日時情報を簡単に収集できる機能が実現されます。
input type="datetime-local"のvalue属性には、YYYY-MM-DDTHH:MMという正確な形式で日付と時刻を指定してください。この形式以外では、初期値が正しく表示されないことがあります。ブラウザによって入力インターフェースが異なるため、多様な環境で動作を確認することが大切です。この入力フィールドはタイムゾーン情報を含まないため、サーバー側で日時を処理する際には、どのタイムゾーンで処理するのかを明示的に考慮する必要があります。また、<label>要素のfor属性と<input>要素のid属性を一致させることで、アクセシビリティが向上しますので、常に設定するように心がけましょう。