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

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

HTML5のテキストレベルセマンティクス~その2~

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

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

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

em要素

コンテンツの強調する。
その強調度合いは祖先要素の数によって決まる。強調する箇所によって文の意味が変わる。

<!-- ノーマル -->
<p>私は焼き鳥が好きです。</p>
<!-- 私を強調。誰かが焼き鳥が嫌いといった後に -->
<p><em>私は</em>焼き鳥が好きです。</p>

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

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

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

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

strong要素

重要性、深刻さ、緊急性を表す。
重要性:見出しやキャプション、段落などで、重要な部分とより詳細・定型的な部分とを区別するために使用できる。
深刻さ:警告や注意を促すのに使用できる。
緊急性:他の部分より先に見る必要があるコンテンツを示すために使用できる。

<p>カテゴリ<strong>お菓子</strong></p>
<p>~だと思う。<strong>注意事項:あくまで主観です。</strong></p>
<p>今日のタスク<ul><li><strong>引き継ぎ</strong></li><li>メールチェック</li><li>電話応対</li></p>

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

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

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

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

small要素

サイドコメントのような小さい字を表す。
免責事項、警告、法的な制限、または著作権、帰属、またはライセンス要件をマークアップする。
短いテキストをマークアップするためのもので、複数の段落やリスト、テキストのセクションなどには使用できない。

<footer>
    <small>© XXXXXXXX 2019 All rights reserved</small>
</footer>

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

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

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

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


s要素

正しくなくなった、または、関連性がなくなったコンテンツを表す。
ドキュメントの編集したことを示すのは不適切。
また、ドキュメントからあるテキストが削除されたことを示す場合はdel要素を用いる。

<p>焼き鳥(ぼんじり)詰め合わせセット</p>
<p><s>小売り希望価格:1000円</s></p>
<p>今だけ!:900円</p>

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

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

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

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