HTML DOM Time オブジェクト：時間と日付情報を正確にマークアップ
この記事では、HTML の <time> 要素とその対応する DOM オブジェクトについて詳しく解説します。属性、使用方法、JavaScript での操作などを含め、Web ページ上で時間と日付情報をより効果的に表示および処理する方法を開発者に提供します。
目次
`<time>
<time> 要素は、人間と機械の両方が理解できる方法で、Web ページ上の時間と日付の情報を表すために使用されます。
使用方法
- ユーザーが読める日付と時刻の文字列を表示する
-
イベントは に開催されます。
- `datetime` 属性を使用して機械可読な日付と時刻の形式を提供する
-
イベントは に開催されます。
メリット
- Web ページのアクセシビリティを向上させる: スクリーンリーダーなどの支援技術が時間と日付の情報を正しく解釈しやすくなる。
- 開発者が CSS や JavaScript を使用してスタイル調整や動的な操作を簡単に行える: 時間と日付の情報を簡単にターゲットにして、スタイルを適用したり、JavaScript で操作したりできる。
`datetime` 属性：機械可読な日付と時刻の形式
`datetime` 属性は、<time> 要素に機械可読な日付と時刻の形式を提供するために使用されます。この属性の値は、RFC 3339 などの標準的な日付と時刻の形式に従う必要があります。
`datetime` 属性の構文
| 形式 | 説明 | 例 |
|---|---|---|
| 年月日 | 日付のみを表す | 2023-10-26 |
| 時分秒 | 時間のみを表す | 19:00:00 |
| 年月日時分秒 | 日付と時間の両方を表す | 2023-10-26T19:00:00 |
| 年月日時分秒タイムゾーン | 日付、時間、タイムゾーンを表す | 2023-10-26T19:00:00+09:00 |
`datetime` 属性の例
<time datetime="2023-10-26">2023年10月26日</time><time datetime="19:00">19時</time><time datetime="2023-10-26T19:00">2023年10月26日 19時</time><time datetime="2023-10-26T19:00+09:00">2023年10月26日 19時 (日本時間)</time>
JavaScript の `HTMLTimeElement` オブジェクト
JavaScript では、<time> 要素は `HTMLTimeElement` オブジェクトとして表されます。`HTMLTimeElement` オブジェクトを使用すると、<time> 要素のプロパティやメソッドにアクセスできます。
`<time>
const timeElement = document.getElementById('myTimeElement');`HTMLTimeElement` オブジェクトのプロパティ
- dateTime: `datetime` 属性の値を取得または設定します。
console.log(timeElement.dateTime); // "2023-10-26T19:00"
timeElement.dateTime = '2023-10-27T14:00';`<time>
<time> 要素は、Web ページ上のさまざまな場所で時間と日付の情報を表すために使用できます。以下は、一般的なユースケースの例です。
- 記事の公開日時
- イベントの開始日時と終了日時
- 商品の有効期限
- その他、明確な時間と日付の情報が必要な場所
まとめ
<time> 要素を使用することで、Web ページのセマンティクスとアクセシビリティを向上させることができます。また、開発者は時間と日付の情報を簡単に処理および表示できます。時間と日付の情報を Web ページに追加する際は、<time> 要素の使用を検討してください。
関連する QA
Q: `<time>
A: はい、<time> 要素は、すべての主要なブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合があります。
Q: `<time>
A: <time> 要素を使用しなくても、直接的に SEO に悪影響はありません。ただし、<time> 要素を使用することで、検索エンジンがページのコンテンツをより正確に理解しやすくなるため、間接的に SEO に良い影響を与える可能性があります。
Q: `<time>
A: <time> 要素は、他の HTML 要素と同様に、CSS を使用してスタイルを適用できます。