HTML要素 ・ 見出し・文章
<time>
日付・時刻
日付や時刻を表す要素です。datetime 属性に機械が読み取れる形式で日時を書くと、検索エンジンやカレンダーアプリが正しく理解できます。
01
サンプルコード
HTML
1<p>投稿日：<time datetime="2026-04-01">2026年4月1日</time></p>
2<p>営業時間：<time datetime="10:00">午前10時</time>〜<time datetime="18:00">午後6時</time></p>
3<p>イベント開始：<time datetime="2026-05-05T13:00+09:00">5月5日 13時</time></p>
02
実行結果
ブラウザでの表示
03
解説
time は、文章中の日付や時刻を示す要素です。見た目は変わりませんが、そこが日時であることがコンピューターに伝わります。
画面に表示する文字は「2026年4月1日」のように自由に書けます。そのかわり datetime 属性に 2026-04-01 のような決まった形式で日時を書いておきます。
ブログの投稿日やイベントの開催日時などに使うと、検索エンジンが日付を正しく認識しやすくなります。
04
応用例・注意点
datetime の書き方
| 値 | 説明 |
|---|---|
2026-04-01 | 日付（年-月-日） |
13:00 | 時刻（時:分） |
2026-04-01T13:00 | 日付と時刻（間に T） |
2026-04-01T13:00+09:00 | タイムゾーン付き（日本時間） |
2026-04 | 年月だけ |
PT2H30M | 期間（2時間30分） |
記事の投稿日と更新日
article の header に投稿日を time で書きます。
HTML
1<article>
2 <header>
3 <h2>春の新メニュー</h2>
4 <p>公開：<time datetime="2026-04-01">2026.04.01</time></p>
5 </header>
6</article>
注意点
- 01datetime 属性の形式が正しくないと、日時として認識されません。
- 02文字自体が決まった形式（例：2026-04-01）なら、datetime 属性は省略できます。