timeタグ -日時や時間を表す｜HTML辞典
<time>タグとは？
<time> タグは、日時や時間を表すためのタグです。
検索エンジンやスクリーンリーダーが時間を認識しやすくなるため、SEO やアクセシビリティの向上に役立ちます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<time> は 開始タグ（<time>）と閉じタグ（</time>）の両方が必要 です。
基本的な記述方法
<p>次回のイベントは <time datetime="2025-03-15T14:00">2025年3月15日 14:00</time> に開催されます。</p>
使用できる主な属性
<time> タグには、日時情報を正確に表現するための datetime 属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
datetime | 機械が認識できる ISO 8601 形式の日時 | <time datetime="2025-03-15T14:00"> |
CSSを使ったデザイン変更
<time> タグは通常のテキストと同じ扱いですが、スタイルを適用できます。
time {
font-weight: bold;
color: blue;
}
適切な使用例
✅ イベントの日付を指定
<p>セミナーの開催日は <time datetime="2025-06-01">2025年6月1日</time> です。</p>
✅ 時間を含むスケジュールを記述
<p>会議は <time datetime="2025-07-10T15:30">7月10日 15:30</time> に開始します。</p>
✅ 年月日＋時間を指定する
<p>新製品の発売日は <time datetime="2025-09-01T10:00:00">2025年9月1日 10時</time> です。</p>
✅ 繰り返しの時間（例: 毎週金曜日）
<p>毎週 <time datetime="2025-01-01T19:00">金曜日 19:00</time> にライブ配信があります。</p>
適切でない使用例（誤った使い方）
❌ datetime を指定しないと SEO 効果が弱くなる
<!-- NG: datetime 属性なし -->
<p>次回のイベントは <time>2025年3月15日</time> に開催されます。</p>
✅ 正しい書き方（datetime を設定）
<p>次回のイベントは <time datetime="2025-03-15">2025年3月15日</time> に開催されます。</p>
❌ datetime の形式が ISO 8601 に準拠していない
<!-- NG: ISO 8601 形式ではない -->
<time datetime="March 15, 2025">2025年3月15日</time>
✅ 正しい書き方（ISO 8601 形式を使用）
<time datetime="2025-03-15">2025年3月15日</time>
<time>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<time> | 日付・時間を表す | datetime で機械可読 | SEO、スケジュール、ブログの日付 |
<span> | テキストを装飾 | 特定の意味は持たない | スタイリングのみ |
<p> | 段落を作成 | ブロック要素 | テキストの説明 |
使用上の注意点
✅ datetime 属性を正しく設定する
- ISO 8601 形式（例:
YYYY-MM-DDTHH:MM:SS）で記述する。
✅ 未来の日付を指定する場合、適切にフォーマットする
datetime="2025-09-01T10:00:00"のように記述することで、SEO に有利。
関連タグ
まとめ
<time> タグは、HTML文書内で 日時や時間を表すためのタグ です。datetime 属性を正しく設定し、SEO やアクセシビリティ向上に活用できます。
