日付や時刻をHTMLでマークアップする

ブログやニュースなどに記載することの多い日時の時間情報について、time要素を使った最適なマークアップ方法を解説します。

この記事のポイント

日付や時間の最適なマークアップ方法が分かる
日時をHTMLで表記する理由が分かる

HTMLでの日時の表記について

サイトの更新日やイベント・セミナーの開催情報などで、テキストの中に日時が含まれることがあります。
このような「時間」については、time要素を使ってマークアップすることが推奨されています。

time要素は見た目を装飾するというよりも、HTMLに日付のデータが記載されているという意味づけを行います。
決められたフォーマットでコンピューターが認識することができれば、日時をデータとしてアプリなどから認識できるようになります。
そのため、可能な限り正確な時刻をdatetime属性で表記することをオススメします。

datetime属性に記載する時刻は、日付と時間を「T」で区切った形式で指定します。
例えば、2018年1月20日の12時00分については、「2018-01-20T12:00」のように記載します。

もし、開催時間などで「12時〜13時半」と一定期間の時間を表記したい場合は、「2018-01-20T12:00-13:30」となります。

マークアップ例

「新着情報」コンテンツをマークアップすることを題材に、time要素のマークアップ例をご紹介します。

スタイルを含めたソースコードは次のようになります。

マークアップ例

<!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」のフォーマットで記載します。