timeタグの使い方 [HTMLリファレンス]
HTMLのtime
タグは、日付や時刻を表現するために使用されます。このタグを使用することで、機械が読み取りやすい形式で時間情報を提供できます。
例えば、datetime
属性を使用して、特定の日付や時刻をISO 8601形式で指定することが可能です。これにより、検索エンジンやスクリーンリーダーが情報を正確に解釈できます。
また、time
タグは、ブログ記事の公開日やイベントの開催日など、時間に関連する情報をマークアップする際に便利です。
timeタグの基本
HTMLの<time>
タグは、特定の時間や日付を表現するために使用されます。
このタグを使用することで、コンテンツ内の時間情報を機械的に解釈しやすくし、検索エンジンやスクリーンリーダーなどのツールがその情報を正確に認識できるようになります。
<time>
タグは、日付や時間を人間が読みやすい形式で表示しつつ、機械が理解できる形式でデータを保持することが可能です。
例えば、ブログ記事の公開日やイベントの日付を示す際に<time>
タグを使用することで、SEOの向上やアクセシビリティの改善に役立ちます。
<time>
タグは、datetime
属性を用いてISO 8601形式で日付や時間を指定することが一般的です。
これにより、ブラウザや検索エンジンがその情報を正確に解釈できます。
timeタグの属性
<time>
タグには、特定の属性を使用することで、時間や日付に関する情報をより詳細に指定することができます。
ここでは、datetime
属性とpubdate
属性について詳しく解説します。
datetime属性の使い方
datetime
属性は、<time>
タグにおいて、日付や時間をISO 8601形式で指定するために使用されます。
この属性を使用することで、機械がその時間情報を正確に解釈できるようになります。
以下は、datetime
属性を使用した例です。
<time datetime="2023-10-15">2023年10月15日</time>
この例では、datetime
属性にISO 8601形式の 2023-10-15
を指定し、表示されるテキストは「2023年10月15日」としています。
これにより、ブラウザや検索エンジンはこの日付を正確に認識できます。
pubdate属性の使い方
pubdate
属性は、HTML5の初期仕様で提案されていた属性で、記事の公開日を示すために使用される予定でした。
しかし、現在のHTML5仕様ではpubdate
属性は廃止されており、代わりに<time>
タグを使用して公開日を示すことが推奨されています。
したがって、pubdate
属性は使用しないようにしましょう。
datetime属性とpubdate属性の違い
- datetime属性: 現在も使用されている属性で、ISO 8601形式で日付や時間を指定します。
機械が時間情報を正確に解釈するために重要です。
- pubdate属性: HTML5の初期仕様で提案されていたが、現在は廃止されています。
記事の公開日を示すために使用される予定でしたが、現在は<time>
タグとdatetime
属性を組み合わせて公開日を示すことが推奨されています。
このように、datetime
属性は現在も有効であり、pubdate
属性は廃止されているため、使用しないように注意が必要です。
timeタグの実装例
<time>
タグは、日付や時間を表現する際に非常に便利です。
ここでは、具体的な実装例をいくつか紹介します。
日付の表示にtimeタグを使う
<time>
タグを使用して日付を表示することで、SEOやアクセシビリティの向上が期待できます。
以下は、日付を表示する際の例です。
<time datetime="2023-10-15">2023年10月15日</time>
この例では、datetime
属性にISO 8601形式で日付を指定し、表示されるテキストは「2023年10月15日」としています。
これにより、検索エンジンやスクリーンリーダーが日付を正確に認識できます。
時間の表示にtimeタグを使う
時間を表示する際にも<time>
タグを活用できます。
以下は、時間を表示する例です。
<time datetime="2023-10-15T14:30">午後2時30分</time>
この例では、datetime
属性にISO 8601形式で時間を指定し、表示されるテキストは「午後2時30分」としています。
これにより、時間情報が正確に解釈されます。
イベントの日付をtimeタグで表現する
イベントの日付を表現する際にも<time>
タグは有効です。
以下は、イベントの日付を示す例です。
<time datetime="2023-12-25">クリスマスイベント</time>
この例では、datetime
属性にイベントの日付を指定し、表示されるテキストは「クリスマスイベント」としています。
これにより、イベントの日付が正確に認識され、ユーザーにとってもわかりやすくなります。
これらの例を参考に、<time>
タグを活用して日付や時間を効果的に表現しましょう。
timeタグのアクセシビリティ
<time>
タグは、アクセシビリティの向上に寄与する要素の一つです。
ここでは、スクリーンリーダーでの読み上げ、SEOの向上、マイクロデータとの関係について解説します。
スクリーンリーダーでのtimeタグの読み上げ
<time>
タグを使用することで、スクリーンリーダーが日付や時間を正確に読み上げることができます。
datetime
属性を正しく設定することで、スクリーンリーダーはその情報を解釈し、ユーザーに適切に伝えることが可能です。
これにより、視覚障害のあるユーザーにとっても、コンテンツがより理解しやすくなります。
timeタグを使ったSEOの向上
<time>
タグを使用することで、SEOの向上が期待できます。
検索エンジンは、<time>
タグに含まれるdatetime
属性を利用して、ページ内の時間情報を正確に認識します。
これにより、検索結果において、記事の公開日や更新日が正確に表示される可能性が高まります。
特にニュースサイトやブログでは、最新情報を提供することが重要であり、<time>
タグを適切に使用することで、検索エンジンに対してその情報を明確に伝えることができます。
timeタグとマイクロデータの関係
<time>
タグは、マイクロデータと組み合わせて使用することで、さらに詳細な情報を提供することができます。
マイクロデータは、HTMLに埋め込まれた構造化データであり、検索エンジンがページの内容をより深く理解するのに役立ちます。
例えば、<time>
タグにitemprop
属性を追加することで、特定のスキーマに基づいたデータを提供することが可能です。
<time datetime="2023-10-15" itemprop="datePublished">2023年10月15日</time>
この例では、itemprop="datePublished"
を使用して、公開日を示すマイクロデータを提供しています。
これにより、検索エンジンはページの公開日をより正確に認識し、検索結果に反映させることができます。
これらの方法を活用することで、<time>
タグはアクセシビリティとSEOの両面で効果を発揮します。
timeタグの応用例
<time>
タグは、さまざまな場面で応用することができます。
ここでは、ブログ記事の公開日、イベントカレンダー、ニュースサイトでの利用例を紹介します。
ブログ記事の公開日をtimeタグで表示
ブログ記事の公開日を<time>
タグで表示することで、読者にとって記事の新しさを明確に示すことができます。
また、検索エンジンに対しても公開日を正確に伝えることができ、SEOの向上に寄与します。
<article>
<h2>ブログ記事のタイトル</h2>
<p>公開日: <time datetime="2023-10-15">2023年10月15日</time></p>
<p>この記事の内容...</p>
</article>
この例では、<time>
タグを使用して公開日を表示しています。

datetime
属性を設定することで、検索エンジンが公開日を正確に認識します。
イベントカレンダーでのtimeタグの活用
イベントカレンダーにおいて、<time>
タグを使用することで、イベントの日付や時間を明確に示すことができます。
これにより、ユーザーはイベントの詳細を簡単に把握することができます。
<ul>
<li>
<strong>イベント名:</strong> コンサート
<br>
<strong>日付:</strong> <time datetime="2023-12-25">2023年12月25日</time>
<br>
<strong>時間:</strong> <time datetime="2023-12-25T19:00">午後7時</time>
</li>
</ul>
この例では、イベントの日付と時間をそれぞれ<time>
タグで表現しています。

これにより、イベント情報が視覚的にも機械的にも明確になります。
ニュースサイトでのtimeタグの利用
ニュースサイトでは、記事の公開日や更新日を<time>
タグで示すことが重要です。
これにより、読者は記事の新しさを確認でき、検索エンジンもその情報を正確に認識します。
<article>
<h2>ニュース記事のタイトル</h2>
<p>更新日: <time datetime="2023-10-20">2023年10月20日</time></p>
<p>ニュースの内容...</p>
</article>
この例では、ニュース記事の更新日を<time>
タグで表示しています。

datetime
属性を使用することで、検索エンジンが更新日を正確に認識し、検索結果に反映させることができます。
これらの応用例を参考に、<time>
タグを効果的に活用して、コンテンツの価値を高めましょう。
まとめ
この記事では、HTMLの<time>
タグについて、その基本的な使い方や属性、実装例、アクセシビリティ、応用例、そしてよくある質問を通じて詳しく解説しました。
<time>
タグは、日付や時間を正確に表現し、SEOやアクセシビリティの向上に寄与する重要な要素です。
これを機に、<time>
タグを活用して、より効果的なウェブコンテンツの作成に挑戦してみてください。