HTMLの<time>要素は、ウェブコンテンツ内で日付や時間情報をマークアップするために非常に便利な手法です。この要素を使用することで、コンテンツの意味を明確にし、検索エンジンやアシスタントが情報を効果的に理解できるようになります。この記事では、<time>要素の使い方について詳しく説明します。
日付の表現
<time>要素を使用して、特定の日付をマークアップすることができます。たとえば、以下のコードでは、イベントが今日開催されることを示しています。
<p>イベントは <time datetime="2023-11-09">今日</time> 開催されます。</p>datetime属性にはISO 8601形式で実際の日付を指定し、ブラウザはテキストをユーザーフレンドリーな形式で表示します。
時刻の表現
<time>要素は時刻情報のマークアップにも使用できます。以下の例では、出発時刻を表示しています。
<p>出発時刻: <time datetime="14:30">14:30</time></p>時分をdatetime属性に指定し、テキストにも同じ時刻を表示します。
日付範囲
日付範囲を表現する場合、<time>要素は開始日と終了日を指定するのに役立ちます。次のコードでは、期間を示しています。
<p>期間: <time datetime="2023-11-09/2023-11-15">11月9日から11月15日</time></p>datetime属性内でスラッシュを使用して、開始日と終了日を区切ります。
タイムゾーン
タイムゾーン情報を含む場合、<time>要素はそれをサポートします。以下の例では、会議時間にタイムゾーン情報を含めています。
<p>会議時間: <time datetime="2023-11-09T14:00:00-05:00">2023年11月9日 14:00 EST</time></p>datetime属性に日付、時刻、およびタイムゾーン情報を指定して、コンテンツの意味をさらに強調します。
まとめ
HTMLの<time>要素を活用することで、コンテンツをセマンティックに豊かにし、検索エンジンやアシスタントにとっても理解しやすくすることができます。時間と日付情報を正確に伝えるために、<time>要素を積極的に利用しましょう。
