HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtime要素とは？datetime属性の使い方と日時の指定方法を解説

time要素のdatetime属性とは

HTMLの<time>要素に用意されているdatetime属性を使うと、人間が読める表示内容とは別に、機械（ブラウザや検索エンジンなど）が解釈できる形式で日時情報を指定できます。

検索エンジンがページ内の日付を正確に認識したり、カレンダーアプリとの連携を行ったりする際に役立つ属性です。

基本構文

datetime属性は以下の形式で記述します。

<time datetime="YYYY-MM-DDThh:mm:ssTZD">

各部分の意味は次のとおりです。

  • YYYY … 年（4桁）
  • MM … 月（01〜12）
  • DD … 日（その月の日数に応じた値）
  • hh … 時（24時間表記）
  • mm … 分
  • ss … 秒
  • TZD … タイムゾーン指定子（例：+09:00 や Z）

期間（Duration）の指定方法

datetime属性では、特定の日時だけでなく「期間」を表すことも可能です。その場合はPTDHMS形式を使用します。

  • P … 「Period（期間）」であることを示すプレフィックス
  • D … 日数（Days）の指定
  • H … 時間（Hours）の指定
  • M … 分（Minutes）の指定
  • S … 秒（Seconds）の指定

例えば「3日間」なら"P3D"、「1時間30分」なら"PT1H30M"のように記述します。

実装例

それでは、<time>要素のdatetime属性を使った具体的なコード例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
    <h2>試験結果のお知らせ</h2>
    <p><s>結果は6月6日に発表予定でした。</s></p>
    <p>発表日は次の<time datetime="06-15">土曜日</time>に変更になりました。</p>
</body>
</html>

実行結果

このコードをブラウザで表示すると、取り消し線で示された旧日程と、datetime属性によって機械可読な日付情報を持った新しい日程が表示されます。ユーザーには自然な文章として見えますが、内部では正確な日付データが伝わる仕組みです。

まとめ

datetime属性を活用することで、表示上のテキストと機械向けの日時データを柔軟に分けられます。SEOやアクセシビリティの観点からも、記事の公開日やイベント日などを明示したい場合には、<time>要素とdatetime属性の組み合わせを積極的に活用しましょう。

  1. HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

    HTML DOM Timeオブジェクトとは？HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。<time>要素を作成するJavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドにTIMEを指定します。var timeObject = docume

  2. HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime