チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のテキストレベルセマンティクス~dataとtime~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

data要素

value属性値とともにマシンリーダブル(機械やコンピュータで読み取り可能な形式)な情報を表す。
value属性値は必須で、機械が可読可能な形式にしなければならない。
値が日付または時間に関連している場合は、time要素を使う。

<data value="001">あっぷるぱい</data>

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
フレージングコンテンツ

コンテンツ属性
・グローバル属性
value - マシンリーダブル値

タグの記載場所
・フレージングコンテンツを配置できる場所

time要素

datetime属性値とともにマシンリーダブル(機械やコンピュータで読み取り可能な形式)な情報を表す。
コンテンツの種類は様々な種類の日付、時刻、タイムゾーンオフセット、期間に制限される。

<time>2019-02-17T14:54:39.929+0000</time>
<time>2019-02-17</time>
<time>11:56</time>
<time>2011-W30</time>
<time>PT3H20M3S</time>
<time>3h 20m 3s</time>
<time datetime="2019-02-17">2019年2月17日</time>

・日時の指定
 [YYYY-MM-DD][半角スペースまたはT][HH:MM:SS][Z または +HHMM または +HH:MM または -HHMM または -HH:MM]
・週の指定
 [YYYY-W{週単位の数値}]
・期間の指定
 [{週単位の数値}w {日付単位の数値}d {時間単位の数値}h {分単位の数値}m {秒単位の数値}s]
 [P{日付単位の数値}DT{時間単位の数値}H{分単位の数値}M{秒単位の数値}S]
 

datetime属性がある場合、その値はマシンリーダブル形式、
datetime属性がない場合、time要素のテキストコンテンツをマシンリーダブル形式にする。


カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・datetime属性がある場合:フレージングコンテンツ
・上記以外:テキストだが上記記載の条件を満たす必要がある。

コンテンツ属性
・グローバル属性
・datetime - マシンリーダブル値

タグの記載場所
・フレージングコンテンツが配置できる場所