自転車デビュー
今日、娘の自転車を買いに出かけました。
トップページ
> HTML Living Standard
> <time>
★HTML Living Standard リファレンス
<time> …… 日付や時刻に関連するデータを表す
広告
<time>タグは、日付や時刻に関連するデータを表す際に使用します。
time要素に指定する内容は、 さまざまな種類の日付、時刻、タイムゾーンオフセット、期間に限定されます。
必要に応じてdatetime属性を指定できます。 time要素のdatetime属性の値には、time要素の内容を機械が読める形式にしたものを指定します。 datetime属性を持たないtime要素には、子孫要素を配置できません。
■属性
- datetime属性
- 要素内容を機械が読める形式にしたものを指定します。
■使用例
以下のサンプルでは、time要素のdatetime属性を使用して、この「金曜日」が「2011-11-18」に対応していることが示されています。
HTMLソース
今日は、<time datetime="2011-11-18">金曜日</time>です。↓↓↓
ブラウザ上の表示
今日は、です。■使用例
以下のサンプルでは、time要素のdatetime属性を使用して、この「土曜日」が「2006-09-23」に対応していることが示されています。
HTMLソース
<p>私たちの最初のデートは、<time datetime="2006-09-23">土曜日</time>でした。</p>↓↓↓
ブラウザ上の表示
私たちの最初のデートは、でした。
time要素のdatetime属性の値に具体的な日付データを指定することで、それを元にしたスクリプト処理が可能になるでしょう。
■使用例
以下のサンプルでは、time要素のdatetime属性の値に時刻まで含まれています。
HTMLソース
<p>私たちは、<time datetime="2006-09-24T05:00-07:00">翌朝5時</time>まで話をした。</p>↓↓↓
ブラウザ上の表示
私たちは、まで話をした。
■使用例
以下のサンプルでは、太平洋標準時タイムゾーンの時間であることが指定されています。
HTMLソース
次のミーティングは、<time datetime="2011-11-18T15:00-08:00">3pm</time>です。↓↓↓
ブラウザ上の表示
次のミーティングは、です。■使用例
以下のサンプルは、架空のブログを想定しています。 ブログ投稿の公開日をマークアップするために、time要素を使用しています。
HTMLソース
<article itemscope itemtype="https://n.example.org/rfc4287">
<h1 itemprop="title">自転車デビュー</h1>
<footer>公開日: <time itemprop="published" datetime="2009-08-29">2日前</time></footer>
<p itemprop="content">今日、子供の自転車を買いに出かけました。</p>
</article>↓↓↓
ブラウザ上の表示
■使用例
以下のサンプルは、架空ブログの別記事です。 ブログ投稿の公開日をマークアップするために、time要素を使用しています。
HTMLソース
<article itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="headline">チリンチリン！</h1>
<footer>公開日: <time itemprop="datePublished" datetime="2009-08-30">昨日</time></footer>
<p itemprop="articleBody">彼女の自転車にベルを付けました。</p>
</article>↓↓↓
ブラウザ上の表示
チリンチリン！
彼女の自転車にベルを付けました。
■使用例
以下のサンプルは、イベント情報をマークアップするための標準フォーマットhCalendar（=HTML iCalendar）を使用しています。 hCalendarでは、dtstart（開始日時）やdtend（終了日時）については、time要素を使用して日時を示すことが推奨されています。
HTMLソース
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 会議</span>:
<time class="dtstart" datetime="2005-10-05">10月5日</time>から
<time class="dtend" datetime="2005-10-07">7日</time>まで。
会場：<span class="location">Argentホテル（サンフランシスコ）</span>
</div>↓↓↓
ブラウザ上の表示
time要素の内容に指定できる構文
time要素の内容に指定できる構文にはいくつかの書き方があるので、目的に応じて使い分けます。
例えば、2020年の新年は、各タイムゾーンにおける2020-01-01 00:00に始まるイベントです。 このようなイベント日時を指定するには、タイムゾーンオフセット無しで日付時刻が指定された値が良いかもしれません。
<time>2020-01-01 00:00</time>
一方で、ビデオ会議などは、タイムゾーンに関係なく同じ瞬間に発生するイベントです。 このようなイベント日時を指定するには、グローバルな日付時刻がより役立つかもしれません。 以下のZは、協定世界時（UTC、グリニッジ標準時）であることを表します。
<time>2020-01-10 10:00Z</time>
time要素の内容は、以下のいずれかの構文と一致する必要があります。
■有効な日付の文字列
<time>2011-11</time>
<time>2011-11-18</time>
<time>11-18</time>■有効な時刻の文字列
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.929</time>■有効な日付と時刻の文字列
<time>2011-11-18T14:54</time>
<time>2011-11-18T14:54:39</time>
<time>2011-11-18T14:54:39.929</time>
<time>2011-11-18 14:54</time>
<time>2011-11-18 14:54:39</time>
<time>2011-11-18 14:54:39.929</time>■有効なタイムゾーン オフセット文字列
<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>■有効なグローバル日付と時刻の文字列
<time>2011-11-18T14:54Z</time>
<time>2011-11-18T14:54:39Z</time>
<time>2011-11-18T14:54:39.929Z</time>
<time>2011-11-18T14:54+0000</time>
<time>2011-11-18T14:54:39+0000</time>
<time>2011-11-18T14:54:39.929+0000</time>
<time>2011-11-18T14:54+00:00</time>
<time>2011-11-18T14:54:39+00:00</time>
<time>2011-11-18T14:54:39.929+00:00</time>
<time>2011-11-18T06:54-0800</time>
<time>2011-11-18T06:54:39-0800</time>
<time>2011-11-18T06:54:39.929-0800</time>
<time>2011-11-18T06:54-08:00</time>
<time>2011-11-18T06:54:39-08:00</time>
<time>2011-11-18T06:54:39.929-08:00</time>
<time>2011-11-18 14:54Z</time>
<time>2011-11-18 14:54:39Z</time>
<time>2011-11-18 14:54:39.929Z</time>
<time>2011-11-18 14:54+0000</time>
<time>2011-11-18 14:54:39+0000</time>
<time>2011-11-18 14:54:39.929+0000</time>
<time>2011-11-18 14:54+00:00</time>
<time>2011-11-18 14:54:39+00:00</time>
<time>2011-11-18 14:54:39.929+00:00</time>
<time>2011-11-18 06:54-0800</time>
<time>2011-11-18 06:54:39-0800</time>
<time>2011-11-18 06:54:39.929-0800</time>
<time>2011-11-18 06:54-08:00</time>
<time>2011-11-18 06:54:39-08:00</time>
<time>2011-11-18 06:54:39.929-08:00</time>■有効な週の文字列
<time>2011-W47</time>■4桁以上のASCII数字
4桁以上の数字の少なくとも1つがゼロ( 0 )でなければ、年を表します。
<time>2011</time>
<time>0001</time>■有効な期間の文字列
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>■関連項目
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ