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

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

HTML5のテキストレベルセマンティクス~supとsubとi~

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

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

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

sup要素とsub要素

sub要素は下付き文字を表し、sup要素は上付き文字を表す。
特定の意味づけをする必要があるときのみ使用する。

<p><var>Y<var> = <var>a<var><var>x</var><sup>2</sup></p>
<p><var>Y<var> = log<sub>2</sub> + 5</p>

chromeで表示したとき
f:id:chooringo:20190303163146p:plain

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

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

コンテンツ属性
・グローバル属性

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

i要素

代替の音声や気分、分類名、技術用語、別の言語の慣用句、音訳などテキストの質が異なるテキストを表す。
メインテキストと言語が異なる場合は、lang属性をつける必要がある。
ほとんどのブラウザではイタリック体で表示されるが、必ずイタリック体で表示されるわけではない。

<p>りんごは英語で<i>apple</i>だよ</p>

chromeで表示したとき
f:id:chooringo:20190303164802p:plain

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

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

コンテンツ属性
・グローバル属性

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