HTML の時間表現をマスターする

はじめに

HTMLには、開発者が人間が読みやすい日付や時刻を表すことができるtimeタグがあり、これは機械可読形式で検索エンジンにも読み取られます。この実験では、HTMLのtimeタグを使用して日付とタイムスタンプを作成する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70868{{"HTML の時間表現"}} html/head_elems -.-> lab-70868{{"HTML の時間表現"}} html/charset -.-> lab-70868{{"HTML の時間表現"}} html/lang_decl -.-> lab-70868{{"HTML の時間表現"}} html/inter_elems -.-> lab-70868{{"HTML の時間表現"}} html/custom_attr -.-> lab-70868{{"HTML の時間表現"}} end

HTMLのボイラープレートを追加する

HTMLファイルを作成するには、HTMLのボイラープレートから始める必要があります。次のコードをindex.htmlファイルにコピーして貼り付けます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Time Tag Lab</title>
  </head>
  <body></body>
</html>

日付と時刻を定義する

日付と時刻を定義するには、datetime属性付きのtimeタグを使用する必要があります。datetime属性は、機械可読形式で日付と時刻を指定します。日付と時刻を定義するには、bodyタグの中に次のコードを追加します。

<p>
  The current date and time is
  <time datetime="2022-07-23T18:30-05:00">23 July 2022, 6:30 PM</time>.
</p>

有効な期間を追加する

timeタグは、有効な期間を表すためにも使用できます。datetime属性を使用して、timeタグに有効な期間を追加できます。期間を定義するには、bodyタグの中に次のコードを追加します。

<p>
  The total duration of the project was
  <time datetime="PT10M">10 minutes</time>.
</p>

index.htmlファイルを保存し、Webブラウザで開いて、timeタグを使用して作成された日付とタイムスタンプを表示します。

まとめ

この実験では、HTMLのtimeタグを使用して日付とタイムスタンプを作成する方法を学びました。また、同じタグを使用して有効な期間を定義する方法も見てきました。timeタグは、開発者が人間と機械で読み取り可能な日付と時刻の表現を作成するために使用できる強力なツールです。