HTMLのtimeタグの使い方があまり理解ができていなかったので勉強して覚えることにしました。
HTMLのtimeタグは「datetime属性を使用した場合」と「datetime属性を使用しない場合」の2つの使い分け方を理解するのが、timeタグの使い方を覚えるポイントになりそうです。
HTMLのtimeタグでtime要素を作る
HTMLのtimeタグは日時を示す要素を作るタグです。IEは未対応です。
timeタグは日時を示す対象が私たち人間だけではなく、機械に対しても日時を示すことができるようになるタグとしての使い方ができます。機械とは検索エンジンとかブラウザです。
そのためHTMLのtimeタグの使い方は、timeタグでマークアップして作るtime要素の日時を、どのように機械可読な形式にして伝えるのかという使い方を覚えることになります。
基本的な使い方から覚えることにしますが、HTMLのtimeタグは開始タグと終了タグを使用してtime要素を作ります。
<time></time>
HTMLのtimeタグにdatetime属性を使用してtime要素を作ることも可能です。
<time datetime=""></time>time開始タグにdatatime属性を記述して属性値を指定できるようにtime要素を作ります。
- datetime属性を使用したtime要素
- datetime属性を使用しないtime要素
HTMLのtimeタグは上記2つの使い方を理解してしまうのが覚えやすくなりそうです。
timeタグの使い方にdatetime属性を使用する
timeタグの使い方にdatetime属性を使用する場合を先に覚えることにしました。
<p>コロナで<time datetime="2021-08-20">今年の花火大会</time>は中止になりそうだ</p>
上記のpタグでマークアップした文章は「コロナで今年の花火大会は中止になりそうだ」です。そして文章内の「今年の花火大会」の部分だけにtimeタグをマークアップしてtime要素にしています。
マークアップしたtime開始タグにはdatetime属性を使用して属性値に日付の書式を記述します。このときdatetime属性値に記述する日付は検索エンジンなどの機械が認識できる日付書式で記述するのがtimeタグのdatetime属性の使い方です。
「今年の花火大会」のテキストをtimeタグでマークアップしただけでは私たち人間にしか理解できないため、今年の花火大会がいつなのか機械が理解できるようにdatetimeの属性値を使用するのをtimeタグの使い方として覚えておくことにします。
timeタグの使い方にdatetime属性を使用するときに覚えておきたいことはもう一つあります。datetime属性の属性値に記述する日付の表し方です。
今後、使用することになりそうな日付の表し方を以下に記載しました。
年
2021
年月
2021-05
年月日
2021-05-05
年なし日付
05-05
時刻
14:55
日時
2021-05-05T14:55:33
2021-05-05 14:55:33
日時の記述が必要になった場合が間違えそうです。説明を加えておくと日時の場合は、日付と時刻を「T」で区切って記述、または日付と時刻を半角スペースを空けて記述する。2パターンの記述がオッケーなことを覚えておきたいです。
datetime属性を使用しないtimeタグの使い方
datetime属性を使用しないtimeタグの使い方も覚えておくことにします。
<time>今年の花火大会</time>
<time>2021年8月20日</time>
上記のdatetime属性を使用しないtimeタグの使い方は間違った使い方です。
HTMLのtimeタグをマークアップしたtime要素にdatetime属性を指定しない場合は、time要素の内容がそのまま値として使用されます。「今年の花火大会」の文章だけとか、2021年8月20日では、機械に「いつの花火大会なのか」を伝えられていません。
<time>2021-08-20</time>そのためdatetime属性を使用しないtimeタグの使い方は、機械が取り扱える日付の表し方で記述します。日付の表し方は前述していますが、戻って確認するのはめんどうだと思うので以下に再記載。
年
2021
年月
2021-05
年月日
2021-05-05
年なし日付
05-05
時刻
14:55
日時
2021-05-05T14:55:33
2021-05-05 14:55:33
HTMLのtimeタグの使い方として「datetime属性を使用した場合の使い方」と「datetime属性を使用しない場合の使い方」を覚えてみましたが、HTMLのtimeタグの使い方はdatetime属性を使用して属性値で機械可読可能にしたtimeタグでマークアップする使い方が一番良い使い方だと思えました。
HTMLのtimeタグはインライン要素？
HTMLでtimeタグの使い方を簡単に覚えることができたと思い込んでいる私は、HTMLのtimeタグはインライン要素なのかどうかを確認してみることに。
<time datetime="2021-05-05">timeタグがインライン要素か確認</time>
上記のtimeタグでマークアップしたtime要素にCSSでwidthの値に適当な幅の数値を適用してみただけですが、time要素の幅がwidthで効かなかったので「HTMLのtimeタグはインライン」です。ポンコツなこと言ってたとしたらご指摘ください。
time {
margin: 20px auto;
display: inline-block;/*またはblock*/
color: #cddc39;
text-align: center;
padding: 50px;
font-size: 1.5rem;
width: 100%;
}
time要素をCSSでdisplay:blockやdisplay:inline-blockにすると幅や高さ、マージンやパディングの余白は効くようになります。
timeタグの使い方で覚えたことのまとめ
最後にtimeタグの使い方を簡単な説明と書式でまとめです。
timeタグにdatetimeを記述する使い方ではテキストに日本語などの文章で日付の記述が可能
<p>この記事を公開したのは<time datetime="2021-05-05">子供の日</time>でした。</p>
timeタグにdatetimeを記述しない使い方をするときはテキストが日付として扱われるので日時を表す書式での記述が必要。
<p>この記事を公開したのは<time>2021-05-05</time>でした。</p>
HTMLのtimeタグにはdatetime属性を使用してマークアップしたほうが「使用範囲が広がる」と思えたHTMLでtimeタグの使い方を覚えるために書いた記事でした。
