最終更新日:
公開日:
レシピ
マークアップ
日付や時刻を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」のフォーマットで記載します。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。