3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

timeタグのdatatime属性は期間を示すこともできる(公式ドキュメントを確認する大切さを感じた話)

Last updated at Posted at 2021-03-30

はじめに

timeタグ使ってますか。
私はブログやコーポレートサイトを作っていた時期は時々使用していましたが、最近では使用頻度が低いタグのひとつです。

MDNには下記の通り記載されています。

HTML の 要素は、特定の時の区間を表します。 datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

「うん、うん、知ってる、知ってる。」と読んでいたら、すぐ下にこんな記述がありました。

次のうちの一つを表します。

  • 24時間制の時刻
  • グレゴリオ暦の正確な日付 (時刻やタイムゾーンを伴うことも可能)
  • 妥当な期間

「妥当な期間とは???」となりました。

知っていたtimeタグ使い方

timeタグを使用して日本語の○年○月○日をマークアップする場合、datatime属性にマシンリーダブルな値を指定する必要があります。
例えばこんな感じです。

<time datatime="2021-03-26">2021年3月26日</time>

timeタグのdatatime属性は期間を示すこともできる

結論から示せば下記のように期間を示すことができます。

<time datatime="P4D">4日間</time>
<time datatime="PT4H18M3S">4時間18分3秒</time>

Pは期間を表すために必須で、datatime属性の値の先頭に指定します。
Tはオプショナルで、H、M、Sなどの時間の単位を使用する場合に使用します。
(PはPeriod、Tはtimeの略と思われる)
詳細な仕様は下記にまとめられています。

さいごに

timeタグ自体は使っていましたが、期間を示すこともできるは知りませんでした。
きっと他にもタグ自体は知っているけど、把握できていない使い方があるタグがありそうです。

ライトに読める記事だけでなく公式やそれに準じたドキュメントを確認する大切さを改めて感じました。
色々と学び直していこうと思います。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?