【timeタグ】マシンリーダブル形式で日付や時間を示してみよう！「HTML・解説・初心者向け」- ノブレコ

2022年9月18日 2022年9月18日

nobreco

★<time>タグの特徴

・タグのカテゴリ ―― インライン要素。

・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。

・タグの省略 ―― 不可。（開始タグと終了タグが必要）

・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。

・グローバル属性を持つ。

・ARIAロール ―― 標準でのARIAロールはなし。

<time>の説明

<time>タグとは

タイムタグは、その名の通り、時間や日付を示すためのタグです。

時間や日付をテキストとして記述し、マシンリーダブルなデータとして、ユーザーにというよりは、CPUなどの機械に対して時間や日付を認識させる目的のほうが強い要素になります。

検索結果などにも影響を与える要素になります。

■使用目的

この<time>要素で機械可読な時刻などを記述しておくと、SEO対策の向上させたい場合や、リマインダーなどの時間管理ソフトウェアの機能で使えたりするということが挙げられます。

一般的に、datetime属性と併用して使用されることが多いです。

しかし下記リストにありますように、<time>要素にdatetime属性を付けるか付けないかで、扱える内容が変わるので少し注意が必要です。

datatime属性の有る無し

datetime属性あり

datetime属性が付いている場合は、内容モデルがフレージングコンテンツに属して、他のフレージングコンテンツを子要素にすることができるようになります。

またテキスト内容を含むこともできるようになります。

datetime属性なし

datetime属性が付いていない場合は、内容モデルがフレージングコンテンツにならないため、日時形式が定められたフォーマットなテキストしか入れることができません。（他の子要素を持つことはできない）

また、日時のテキストをマシンリーダブル（CPUである機械がwebページ内で記述されている内容を認識、または理解、解釈すること）なデータであることを表します。

補足１

detetime属性の有る無しでの大きな違いは、内容モデルのフレージングコンテンツに属するか属さないかというところです。

これによって他のフレージングコンテンツを持つ要素を子要素にできるかできないかという扱いに変化するのが大きなポイントとなります。

補足２

datetime属性が無い場合にマシンリーダブルなデータになると前述していますが、datetime属性が有る状態でもマシンリーダブルなデータで表すことが可能です、ですから<time>要素を使用する場合は、セットでdetetime属性を付けて使用するほうが他の要素を扱う幅も広がりますし、利便性の向上に繋がりますのでオススメです。

■日時データのフォーマット表

下記の表に記載されているのが、日時を記述するフォーマットな形式となっています。

年・月・日	2022-09-18
年・月	2022-09
月・日	09-18
年	2022
年・週	2022-W36
時刻	23:00 23:00:59
タイムゾーンオフセット	（+、－）0900 （+、－）09:00
日付と時刻（オフセットなし）	2022-09-18T23:00 2022-09-18T23:00:59 2022-09-18 23:00 2022-09-18 23:00:59
日付と時刻（オフセットあり）	2022-09-18T23:00+0900 2022-09-18T23:00+09:00 2022-09-18 23:00－0900 2022-09-18 23:00－09:00