セマンティック HTML における<time>タグの使用方法

はじめに

この実験では、セマンティックな HTML5 の<time>タグを調べ、Web ドキュメントにおいて日付と時刻を効果的に表現する方法を学びます。この実験では、機械可読の時系列データを提供しながら人間が読みやすいテキストを維持するなど、<time>タグの重要な特性を理解し、さまざまな HTML コンテキストでのその実装を示します。

段階的なアプローチを通じて、HTML ファイルを作成し、datetime 属性付きの<time>タグを追加し、このセマンティック要素が Web のアクセシビリティをどのように向上させ、日付と時刻に関する構造化された情報を提供するかを理解します。この実験が終了するまでに、Web ページにおける時系列データのセマンティックな意味を向上させるために<time>タグを使用する実践的な経験を身につけることができます。

タグの基本を理解する

このステップでは、機械可読形式で日付と時刻を表すために設計された HTML5 の<time>タグについて学びます。<time>タグは、Web のアクセシビリティを向上させ、時系列データに関する構造化された情報を提供します。

<time>タグの主な特徴は以下の通りです。

特定の期間を表す
人間が読みやすいテキストを含めることができる
機械可読のdatetime属性をサポートする
Web ページ上の日付と時刻の情報のセマンティックな意味を強化する

<time>タグを示す基本的な例を以下に示します。

<p>The conference is scheduled for <time>2023-09-15</time>.</p>

この例では、<time>タグにより、人間が読むことができる日付を表示することができるだけでなく、機械が正確な日付形式を解析することもできます。

<time>タグの使い方を示す別の例を以下に示します。

<article>
  <h2>Lab Publication</h2>
  <p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>

datetime属性は、標準化された機械可読の日付形式を提供しますが、表示されるテキストはユーザーにとって使いやすいままです。

タグを含む HTML ファイルを作成する

このステップでは、<time>タグの使い方を示す HTML ファイルを作成します。WebIDE を使って、~/projectディレクトリ内の HTML ドキュメントを作成および編集します。

まず、プロジェクトディレクトリに移動して、event-schedule.htmlという新しい HTML ファイルを作成します。

cd ~/project

WebIDE を開き、event-schedule.htmlという新しいファイルを作成します。その後、次の HTML コンテンツを追加します。

touch event-schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
    </article>
  </body>
</html>

Web ブラウザで表示したときの例の出力：

注：WebIDE で HTML ファイルをプレビューする方法に関する詳細はこちらをご覧ください。

この例は、特定の日付を表すために段落内で<time>タグをどのように使うかを示しています。このタグは日付にセマンティックな意味を与え、ブラウザや補助技術が時系列情報を理解するのを容易にします。

タグに datetime 属性を追加する

このステップでは、<time>タグにdatetime属性を追加することで、そのタグを強化する方法を学びます。datetime属性は、日付と時刻の機械可読形式を提供し、コンテンツをよりアクセスしやすく、セマンティックに意味のあるものにします。

WebIDE でevent-schedule.htmlファイルを開き、既存の<time>タグを変更してdatetime属性を含めます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>
        The annual tech conference will be held on
        <time datetime="2023-09-15">September 15, 2023</time>.
      </p>

      <h3>Session Timing</h3>
      <p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
    </article>
  </body>
</html>

datetime属性にはいくつかの利点があります。

標準化された機械可読の日付/時刻形式を提供する
実際の日付/時刻値とは異なる表示テキストを許す
完全な日付、時刻、日付と時刻の組み合わせなど、さまざまな形式をサポートする

datetime属性の例の形式：

完全な日付：2023-09-15
時刻：09:00
日付と時刻：2023-09-15T09:00
タイムゾーン付き：2023-09-15T09:00Z

Web ブラウザで表示したときの例の出力：

Upcoming Tech Conference

Conference Details
The annual tech conference will be held on September 15, 2023.

Session Timing
Morning keynote starts at 9:00 AM.

pubdate 属性付きのタグを調べる

このステップでは、記事やブログ投稿の公開日を示す<time>タグ用の特殊なブール属性であるpubdate属性について学びます。HTML5 ではもはや非推奨とされていますが、その歴史的な使い方を理解することで、セマンティックな HTML に関する洞察が得られます。

WebIDE でevent-schedule.htmlファイルを開き、コンテンツを変更してpubdate属性を持つブログ投稿の例を含めます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Blog Post</title>
  </head>
  <body>
    <article>
      <h1>Latest Tech Insights</h1>
      <header>
        <h2>HTML5 Semantic Elements</h2>
        <p>
          Published on
          <time datetime="2023-06-20" pubdate>June 20, 2023</time>
        </p>
      </header>

      <p>In this article, we explore the semantic meaning of HTML5 tags...</p>

      <footer>
        <p>
          Updated on
          <time datetime="2023-06-22">June 22, 2023</time>
        </p>
      </footer>
    </article>
  </body>
</html>

pubdate属性に関する要点：

ブール属性であり（値は必要ありません）
記事の公開日を示す
HTML5 では非推奨ですが、多くのブラウザで依然としてサポートされています
通常、<article>タグ内で使用されます

Web ブラウザで表示したときの例の出力：

Latest Tech Insights

HTML5 Semantic Elements
Published on June 20, 2023

In this article, we explore the semantic meaning of HTML5 tags...

Updated on June 22, 2023

注：pubdateは現在非推奨とされていますが、セマンティックな HTML の進化と機械可読の日付情報を提供する重要性を示しています。

タグの実装を検証する

この最後のステップでは、HTML ドキュメントにおける<time>タグの実装をレビューして検証します。異なる属性とコンテキストで<time>タグを使用するさまざまな方法を示す包括的な例を作成します。

WebIDE でevent-schedule.htmlファイルを開き、完全な例で更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Event Showcase</title>
  </head>
  <body>
    <article>
      <h1>Web Development Conference</h1>

      <section>
        <h2>Event Details</h2>
        <p>
          Conference Date:
          <time datetime="2023-09-15">September 15, 2023</time>
        </p>
        <p>
          Start Time:
          <time datetime="09:00">9:00 AM</time>
        </p>
      </section>

      <section>
        <h2>Blog Post</h2>
        <article>
          <h3>HTML5 Semantic Elements</h3>
          <p>
            Published on
            <time datetime="2023-06-20" pubdate>June 20, 2023</time>
          </p>
          <p>
            Last Updated:
            <time datetime="2023-06-22">June 22, 2023</time>
          </p>
        </article>
      </section>
    </article>
  </body>
</html>

重要な実装チェックリスト：

異なるコンテキストでの複数の<time>タグ
機械可読の日付に対するdatetime属性の使用
人間が読みやすい日付のテキストの含め方
pubdate属性の示し方
<article>と<section>タグを使用したセマンティックな HTML 構造

Web ブラウザで表示したときの例の出力：

Web Development Conference

Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM

Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023

まとめ

この実験では、参加者は HTML5 の<time>タグについて学びました。これは、機械可読形式で日付と時刻を表すために設計されたセマンティック要素です。この実験では、学習者が、人間が読みやすいテキストを含む能力や、機械可読のdatetime属性をサポートする能力など、タグの重要な特性を理解するように導きました。これにより、ウェブのアクセシビリティが向上し、構造化された時系列情報が提供されます。

実践的な演習を通じて、参加者は<time>タグの実装を示す HTML ファイルを作成し、datetimeやpubdateなどの異なる属性を使ったその使い方を探りました。彼らは、人間の読者と機械の両方が日付と時刻の情報を効果的に解釈できるようにするセマンティックマークアップを作成する練習をし、ウェブ開発におけるセマンティックな HTML 要素の使用の重要性を強化しました。