<article lang="ja"><header><h1>&lt;time&gt;: （日付）時刻要素</h1><details><summary><span role="img" aria-label="Baseline Check"></span><h2>Baseline <span>Widely available</span></h2><div><span title="Supported in Chrome and Edge"><span role="img" aria-label="Chrome check"></span><span role="img" aria-label="Edge check"></span></span><span title="Supported in Firefox"><span role="img" aria-label="Firefox check"></span></span><span title="Supported in Safari"><span role="img" aria-label="Safari check"></span></span></div><span></span></summary><div><p>This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.</p><ul><li><a data-glean="baseline_link_learn_more">Learn more</a></li><li><a data-glean="baseline_link_bcd_table">See full compatibility</a></li><li><a data-glean="baseline_link_feedback">Report feedback</a></li></ul></div></details></header><div><p><strong><code><time></time></code></strong> は <a>HTML</a> の要素で、特定の時の区間を表します。<code>datetime</code> 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。</p>
<p>次のうちの一つを表します。</p>
<ul>
  <li>24 時間制の時刻</li>
  <li><a>グレゴリオ暦</a>の正確な日付 (時刻やタイムゾーンを伴うことも可能)</li>
  <li><a>有効な期間</a></li>
</ul></div><section aria-labelledby="試してみましょう"><h2><a>試してみましょう</a></h2><div><iframe height="200" title="MDN Web Docs Interactive Example" allow="clipboard-write"></iframe></div></section><section aria-labelledby="属性"><h2><a>属性</a></h2><div><p>他のすべての HTML 要素と同様に、この要素は<a>グローバル属性</a>に対応しています。</p>
<dl>
  <dt><a><code>datetime</code></a></dt>
  <dd>
    <p>この属性は要素の日付や時刻を表し、下記に示す書式のうちの一つでなければなりません。</p>
  </dd>
</dl></div></section><section aria-labelledby="使用上のメモ"><h2><a>使用上のメモ</a></h2><div><p>この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。</p>
<p>この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません（日付の計算で混乱するため）。</p>
<p><em>datetime 値</em>（機械可読な日時の値）は要素の <code>datetime</code> 属性の値であり、正しい書式（下記参照）でなければなりません。要素に <code>datetime</code> 属性がない場合、<strong>子孫要素を持ってはならず</strong>、 <em>datetime 値</em> は要素のテキストの内容になります。</p></div></section><section aria-labelledby="有効な_datetime_値"><h3><a>有効な datetime 値</a></h3><div><dl>
  <dt><a>有効な年の文字列</a></dt>
  <dd>
    <p><code>2011</code></p>
  </dd>
  <dt><a>有効な月の文字列</a></dt>
  <dd>
    <p><code>2011-11</code></p>
  </dd>
  <dt><a>有効な日付の文字列</a></dt>
  <dd>
    <p><code>2011-11-18</code></p>
  </dd>
  <dt><a>年のない有効な日付の文字列</a></dt>
  <dd>
    <p><code>11-18</code></p>
  </dd>
  <dt><a>有効な週の文字列</a></dt>
  <dd>
    <p><code>2011-W47</code></p>
  </dd>
  <dt><a>有効な時刻の文字列</a></dt>
  <dd>
    <p><code>14:54</code></p>
    <p><code>14:54:39</code></p>
    <p><code>14:54:39.929</code></p>
  </dd>
  <dt><a>有効なローカル日時の文字列</a></dt>
  <dd>
    <p><code>2011-11-18T14:54:39.929</code></p>
    <p><code>2011-11-18 14:54:39.929</code></p>
  </dd>
  <dt><a>有効なグローバル日時の文字列</a></dt>
  <dd>
    <p><code>2011-11-18T14:54:39.929Z</code></p>
    <p><code>2011-11-18T14:54:39.929-0400</code></p>
    <p><code>2011-11-18T14:54:39.929-04:00</code></p>
    <p><code>2011-11-18 14:54:39.929Z</code></p>
    <p><code>2011-11-18 14:54:39.929-0400</code></p>
    <p><code>2011-11-18 14:54:39.929-04:00</code></p>
  </dd>
  <dt><a>有効な期間の文字列</a></dt>
  <dd>
    <p><code>PT4H18M3S</code></p>
  </dd>
</dl></div></section><section aria-labelledby="例"><h2><a>例</a></h2><div></div></section><section aria-labelledby="単純な例"><h3><a>単純な例</a></h3><div><h4>HTML</h4>
<div><div><span>html</span></div><pre data-signature="OlHdSh8rfh9jmFjaUYyWh9u9+QWAiQUIJ8NtuoWKdBQ="><code><p>
  コンサートは <time datetime="2018-07-07T20:00:00">20:00</time> に始まります。
</p>
</code></pre></div>
<h4>結果</h4><div><div></div><iframe title="単純な例" width="250" height="80" sandbox="allow-same-origin allow-scripts"></iframe></div></div></section><section aria-labelledby="datetime_の例"><h3><a><code>datetime</code> の例</a></h3><div><h4>HTML</h4>
<div><div><span>html</span></div><pre data-signature="wCqVmJO2frI5VwoYRBo93EjkWOlkg5RxiV62DWcsi1E="><code><p>
  コンサートは
  <time datetime="2001-05-15T19:00">5 月 15 日</time>に開催されます。
</p>
</code></pre></div>
<h4>結果</h4><div><div></div><iframe title="datetime の例" width="250" height="80" sandbox="allow-same-origin allow-scripts"></iframe></div></div></section><section aria-labelledby="技術的概要"><h2><a>技術的概要</a></h2><div><figure><table>
  <tbody>
    <tr>
      <th scope="row"><a>コンテンツカテゴリー</a></th>
      <td>
        <a>フローコンテンツ</a>,
        <a>記述コンテンツ</a>, 知覚可能コンテンツ
      </td>
    </tr>
    <tr>
      <th scope="row">許可されている内容</th>
      <td><a>記述コンテンツ</a></td>
    </tr>
    <tr>
      <th scope="row">タグの省略</th>
      <td>なし。開始タグと終了タグの両方が必須です。</td>
    </tr>
    <tr>
      <th scope="row">許可されている親要素</th>
      <td><a>記述コンテンツ</a>を受け入れるすべての要素</td>
    </tr>
    <tr>
      <th scope="row">暗黙の ARIA ロール</th>
      <td><a>対応するロールなし</a></td>
    </tr>
    <tr>
      <th scope="row">許可されている ARIA ロール</th>
      <td>すべて</td>
    </tr>
    <tr>
      <th scope="row">DOM インターフェイス</th>
      <td><a><code>HTMLTimeElement</code></a></td>
    </tr>
  </tbody>
</table></figure></div></section><h2><a>仕様書</a></h2><table><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a>HTML Standard <br><small># the-time-element</small></a></td></tr></tbody></table><h2><a>ブラウザーの互換性</a></h2><p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><section aria-labelledby="関連情報"><h2><a>関連情報</a></h2><div><ul>
  <li><a><code><data></data></code></a> 要素では、他の種類の値を示すことが可能です。</li>
</ul></div></section></article>

機械可読な形式の日付を記述するため

自動的に現在の日時を表示する