HTMLでの日時の表記について
サイトの更新日やイベント・セミナーの開催情報などで、テキストの中に日時が含まれることがあります。
このような「時間」については、time要素を使ってマークアップすることが推奨されています。
time要素は見た目を装飾するというよりも、HTMLに日付のデータが記載されているという意味づけを行います。
決められたフォーマットでコンピューターが認識することができれば、日時をデータとしてアプリなどから認識できるようになります。
そのため、可能な限り正確な時刻をdatetime属性で表記することをオススメします。
datetime属性に記載する時刻の書き方は下記のように必要に応じた形を用いることができます。
datetime属性の妥当な日時表記
| 値 | フォーマット | マークアップ例 |
|---|---|---|
| 2023 | 西暦のみ | <time datetime="2023">2023年</time> |
| 2023-01 | 西暦と月 | <time datetime="2023-01">2023年1月</time> |
| 2023-01-30 | 年月日 | <time datetime="2023-01-30">2023年1月30日</time> |
| 01-30 | 月日 | <time datetime="01-30">1月30日</time> |
| 2023-W8 | 西暦と週番号 | <time datetime="2023-W8">2023年の第8週目</time> |
| 21:10 | 時分 | <time datetime="21:10">21時10分</time> <time datetime="21:10:34">21時10分34秒</time> <time datetime="21:10:34.115">21時10分34.115秒</time> |
| 2023-01-30T08:50:01.221 | 年月日T時分秒（グローバル日時） | <time datetime="2023-01-30T08:50:01.221">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30 08:50:01.221">2023年1月30日 8時50分1.221秒</time> |
| 2023-01-30T08:50:01.221Z | 年月日T時分秒Z（グローバル日時） | <time datetime="2023-01-30T08:50:01.221Z">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30T08:50:01.221-0900">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30T08:50:01.221-09:00">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30 08:50:01.221">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30 08:50:01.221-0900">2023年1月30日 8時50分1.221秒</time> <time datetime="2023-01-30 08:50:01.221-09:00">2023年1月30日 8時50分1.221秒</time> |
マークアップ例
「新着情報」コンテンツをマークアップすることを題材に、time要素のマークアップ例をご紹介します。
スタイルを含めたソースコードは次のようになります。
HTML マークアップ例
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scale=0">
<title>time要素のマークアップ例</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 100%;
background: #f7f7f7;
}
article {
margin: 0 30px;
}
h1 {
margin: 20px 0 15px;
font-size: 100%;
color: #555;
}
p {
margin: 0;
padding: 0;
font-size: 86%;
line-height: 1.8em;
}
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
ol li {
margin: 0 0 10px;
padding: 15px 20px;
border-radius: 5px;
border: 1px solid #666;
}
ol li a {
color: #333;
text-decoration: none;
}
time {
margin: 0px;
padding: 0;
font-size: 79%;
color: #666;
}
h2 {
margin: 0 0 10px;
padding: 0;
font-size: 100%;
color: #333;
}
</style>
</head>
<body>
<article>
<h1>新着情報</h1>
<ol>
<li>
<a href="#">
<time datetime="2018-01-17">2018年1月17日</time>
<h2>新メニューの追加について</h2>
<p>1月に追加した新メニューについてご紹介します。</p>
</a>
</li>
<li>
<a href="#">
<time datetime="2018-01-05">2018年1月05日</time>
<h2>新店舗の追加</h2>
<p>東京で始まった本店ですが、この度、大阪への出店が決定いたしました。</p>
</a>
</li>
<li>
<a href="#">
<time datetime="2017-12-20">2017年12月20日</time>
<h2>年末年始の営業時間につきまして</h2>
<p>12月30日、31日、1月1日〜3日までの営業時間、および休業日についてのご案内です。</p>
</a>
</li>
</ol>
</article>
</body>
</html>新着情報では厳密な時刻のデータは不要なため、datetime属性も日付のみ表記しています。
もしイベント情報など、時間の情報をより正確にマークアップしたい場合は「2018-02-02T13:00:00-15:00:00」のようなフォーマットで記載します。