Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】time属性値の使い方

time属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

timeオブジェクトは、日付や時刻といった特定の時点を表現するためのHTML要素であり、その情報の意味を機械が解釈しやすい形式で提供するためのオブジェクトです。この要素を使用することで、人間が読みやすい形式で日時を表示すると同時に、コンピューターが処理可能な標準化された形式で情報を埋め込むことができます。例えば、ウェブページに「2023年10月26日」と表示しつつ、内部的には「2023-10-26」というISO 8601形式で日付を記述するといった使い方をします。

time要素は、ブログ記事の公開日時、イベントの開催時刻、会議の予約日時など、コンテンツ内の日時情報にセマンティックな意味を与える際に特に有用です。テキストコンテンツとしての時間情報をマークアップすることで、検索エンジンがコンテンツの関連性を判断したり、ユーザーエージェントがその情報をカレンダーアプリと連携させたりする可能性が広がります。

特に重要なのがdatetime属性です。この属性には、ISO 8601標準に準拠した機械可読な日付または時刻の値を指定します。これにより、例えばタイムゾーンを考慮した日時表示の変更や、特定の期間で情報をフィルタリングする際の正確なデータ処理が可能になります。datetime属性は必須ではありませんが、time要素の最大の利点を引き出すために、可能な限り使用することが強く推奨されます。システムエンジニアとして、ウェブコンテンツのセマンティクスを理解し、適切にマークアップすることは、アクセシビリティや相互運用性の高いウェブアプリケーションを構築する上で非常に大切なスキルとなります。

公式リファレンス: <input type="time">

構文(syntax)

1<time datetime="2023-10-27T10:00:00Z">2023年10月27日 午前10時 (UTC)</time>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ