HTMLにおける時間指定表示
Webページに時間情報を正しく記述することは、アクセシビリティとSEOの観点から非常に重要です。HTMLでは、時間情報を明示的にマークアップするための要素として<time>要素が提供されています。この記事では、<time>要素の役割、属性、使用方法、そして具体的な適用例を通して、Webページにおける効果的な時間情報の表現方法を解説します。
<time> 要素の概要
<time>要素は、日付、時刻、またはその両方を表すために使用されます。人間が読める形式のテキストに加えて、機械可読な形式で時間情報を埋め込むことができます。これにより、ブラウザや検索エンジンは時間情報を正確に解釈し、カレンダーへの予定追加や検索結果の精度向上などに役立てることができます。
<time> 要素の属性
<time>要素には、時間情報をより詳細に記述するための属性が用意されています。
| 属性名 | 説明 | 値 |
|---|---|---|
datetime |
機械可読な形式で日時を指定します。 | YYYY-MM-DDThh:mm:ss[Z|(+|-)hh:mm]形式の文字列 |
pubdate |
要素の親要素が |
"pubdate"キーワード |
datetime 属性
datetime属性は、時間情報を機械可読な形式で指定するために使用します。値は、ISO 8601の拡張形式で記述します。
<time datetime="2023-10-26">2023年10月26日</time>
<time datetime="2023-10-26T17:00">2023年10月26日 17時</time>
<time datetime="2023-10-26T17:00+09:00">2023年10月26日 17時 (JST)</time>
pubdate 属性
pubdate属性は、要素の親要素が
<article>
<h2>最新記事</h2>
<p>公開日: <time datetime="2023-10-26" pubdate>2023年10月26日</time></p>
<!-- 記事の内容 -->
</article>
<time> 要素の適用例
<time>要素は、ブログ記事の公開日、イベントの日時、営業時間など、さまざまな時間情報をマークアップするために使用できます。
例1: ブログ記事の公開日
<article>
<header>
<h1>記事タイトル</h1>
<p>公開日: <time datetime="2023-10-26T10:00:00+09:00">2023年10月26日 10:00</time></p>
</header>
<!-- 記事の内容 -->
</article>
例2: イベントの日時
<p>次のイベントは、<time datetime="2024-01-01T10:00:00+09:00">2024年1月1日 10:00</time> から <time datetime="2024-01-01T17:00:00+09:00">17:00</time> まで開催されます。</p>
まとめ
<time>要素を使用することで、Webページ上の時間情報を明確にマークアップすることができます。これにより、ユーザーの利便性向上、検索エンジン最適化、アクセシビリティ向上に貢献できます。適切な時間情報の提供は、ユーザーエクスペリエンスの向上に繋がる重要な要素と言えるでしょう。
参考文献
* HTML の <time> 要素 - HTML: HyperText Markup Language | MDNQA
Q1: <time> 要素は必須要素ですか？
A1: いいえ、必須要素ではありません。しかし、時間情報を明確にマークアップするために使用することを推奨します。
Q2: datetime 属性の値はどのように記述すれば良いですか？
A2: ISO 8601の拡張形式で記述します。例: 2023-10-26T17:00:00+09:00
Q3: <time> 要素を使用することで、SEO効果は期待できますか？
A3: はい、検索エンジンが時間情報を正確に理解するのに役立つため、SEO効果が期待できます。ただし、<time>要素単体で劇的な効果があるわけではなく、他のSEO対策と組み合わせることで効果を発揮します。
その他の参考記事:jquery 時間 指定