【HTML Living Standard】time要素の使い方
time要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
timeクラスは、文書中の特定の日付、時刻、または期間などの時間情報を表すクラスです。このHTML要素は、人間が理解しやすい形式で時間情報を表示しながら、同時に機械がその情報を正確に解釈できるよう、セマンティックな意味を与えます。単に日付や時刻をテキストとして表示するだけでなく、time要素を使用することで、その情報が「時間」であることを明示できます。
特に重要なのは、オプションで指定できるdatetime属性です。この属性には、ISO 8601形式などの標準的な機械可読な形式で、要素の表示内容とは異なる、正確な日付や時刻を記述できます。これにより、ブラウザ、検索エンジン、そしてスクリーンリーダーなどの支援技術が、その時間情報を一貫した方法で処理できるようになります。
例えば、ウェブサイトでイベントの開催日時や記事の公開日を表示する際にtime要素とdatetime属性を組み合わせることで、検索エンジンがイベントの日時を正確に認識し、ユーザーが検索結果から直接カレンダーに追加するような機能を提供できるようになります。また、スクリーンリーダーは時間情報をより適切に読み上げることができ、視覚障碍を持つユーザーにとってもアクセシビリティが向上します。
システムエンジニアを目指す方にとって、ウェブコンテンツに時間に関する情報を記述する際には、単にテキストとして表示するのではなく、このtime要素を適切に利用することで、よりセマンティックでアクセシブルな、そして機械が理解しやすいウェブページを提供できることを理解しておくことが重要です。
公式リファレンス: <time>: The (Date) Time element
構文(syntax)
1<time datetime="2023-10-27">2023年10月27日</time>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません