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

はじめに

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

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

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タグは、開発者が人間と機械で読み取り可能な日付と時刻の表現を作成するために使用できる強力なツールです。