HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtimeタグとは？日付と時刻を表示する方法をわかりやすく解説

HTMLの<time>要素は、Webページ上に日付や時刻を設定して表示するために使用されるタグです。このタグはHTML5で新たに導入されました。datetime属性と組み合わせることで、人間が読める表示テキストと、機械が判読できる正確な日時情報の両方を提供できるのが大きな特徴です。

timeタグで使用できる属性

  • datetime: 実際の日時（機械可読な形式）を指定します。

timeタグの使用例

それでは、HTMLで<time>タグを実装する具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Schedule</h2>
<p>Exams begins from next <time datetime="06-15">Saturday</time>.</p>
<p>Exam begins at <time>09:00</time> in the morning.</p>
</body>
</html>

出力結果

HTMLのtimeタグとは？日付と時刻を表示する方法をわかりやすく解説

コードの解説

上記の例では、<time>要素を使って日付と時刻をそれぞれ設定しています。

<p>Exams begins from next <time datetime="06-15">Saturday</time>.</p>

このコードでは、datetime属性に「06-15」という日付を指定し、画面上には「Saturday（土曜日）」というテキストを表示しています。ユーザーには自然な表現で見せながら、ブラウザや検索エンジンに対しては正確な日付情報を伝えることができます。

一方、時刻のみを表示したい場合は、次のように<time>要素を使用します。

<p>Exam begins at <time>09:00</time> in the morning.</p>

このように<time>タグを活用することで、日付や時刻を意味的にマークアップでき、SEO対策やアクセシビリティの向上にもつながります。イベント日程や記事の公開日など、日時情報を扱う場面で積極的に活用しましょう。

  1. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"

  2. HTMLの```html <ins>タグとは？追加されたテキストを表示する使い方を解説

    HTMLの <ins> タグは、文書に後から追加されたテキストを明示的に表示するための要素です。たとえば、新しく追記したコンテンツや更新された価格情報などを挿入した際に使用します。ブラウザ上では、このタグで囲まれたテキストは自動的に下線付きで表示されるため、訪問者は「ここが新しく加えられた部分だ」とひと目で把握できます。削除されたテキストを示す <del> タグ（打ち消し線表示）と対になる存在であり、両者を組み合わせて使うことで、文書の編集履歴を視覚的に伝えられます。<ins>タグで使える主な属性<ins> タグでは、以下の2つの属性が利用できま