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

HTMLで人間が読める形式の日付・時刻を表示する方法（timeタグの使い方）

HTMLで人間が読める形式の日付や時刻を表示するには、<time>タグを使用します。このタグを活用することで、画面上のユーザーには自然で分かりやすい形式の日時を表示しながら、同時に機械（検索エンジンやブラウザなど）にも解釈可能な形式で情報を提供できます。

timeタグの主な属性

<time>タグで利用できる属性は以下のとおりです。

属性値説明
datetimedatetime機械が読み取り可能な形式で日時を指定します

基本的な使用例

以下のコードを実行すると、時刻を表示できます。

<!Doctype html>
<html>
   <head>
      <title>HTML time Tag</title>
   </head>
   <body>
      <p>現在の時刻は <time>18:16</time> です</p>
   </body>
</html>

datetime属性を使った応用例

datetime属性を指定すると、画面に表示するテキストと、機械が解釈する日時データを分けることができます。SEOや構造化データの観点でも有効です。

<p>公開日：<time datetime="2024-05-01">2024年5月1日</time></p>
<p>イベント開始：<time datetime="2024-05-01T18:16">5月1日 午後6時16分</time></p>

このように<time>タグを使えば、ユーザーにとって読みやすく、検索エンジンにも正確に伝わる日時表現を実現できます。

  1. HTMLのtime入力タイプの使い方｜時刻選択フォームを簡単に実装する方法

    HTMLで時刻を選択できる「time」入力タイプとは？HTMLでは、<input type=time> を使用することで、ユーザーに時刻を選択させることができます。この入力フィールドをクリックすると、タイムピッカー（時刻選択のポップアップ）が表示され、マウス操作だけで直感的に時刻を指定できるのが特徴です。また、フォーム送信時の値は「HH:MM」（例：14:30）という24時間形式の文字列になるため、サーバーサイドやJavaScriptでの処理もシンプルに行えます。注意： Internet Explorerなどの一部の旧ブラウザでは type=time がサポートされておらず、通常の

  2. ExcelとGoogleスプレッドシートで現在の日付・時刻を表示する方法

    ExcelやGoogleスプレッドシートで現在の日付と時刻を表示したい場合、いくつかの簡単な方法があります。キーボードショートカットを使う方法のほかに、最も手軽なのがNOW関数とTODAY関数を活用する方法です。これらの関数は、Microsoft ExcelとGoogleスプレッドシートの両方で共通して使用できます。 現在の日付・時刻を表示する2つの方法 ExcelとGoogleスプレッドシートで現在の日付や時刻を表示するには、以下の方法があります。 キーボードショートカットを使う NOW関数とTODAY関数を使う それぞれの手順を詳しく見ていきましょう。 1. キーボードショートカットを