HTML5のテキストレベルセマンティクス～b要素とu要素とmark要素～

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

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

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

b要素

文章の概要のキーワード、レビューの製品名、対話型テキスト駆動型ソフトウェアや記事のリードなどのような、特別に重要な意味を持たず単純に注意を引くテキストを表す。
他の要素が適切でない場合に最後の手段として使用する。
例えば見出しはh1～h6要素を使用し、強調はem要素、重要度はstrong要素、マークまたは強調表示はmark要素を使用する。

<p>青森県は<b>りんご</b>の生産地で有名だよ</p>

chromeで表示したとき

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

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

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

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

u要素

中国語の固有名詞やスペルミスなどのテキストを表す。
多くのブラウザでは従来のハイパーリンクのレンダリング（下線）と表示が同じため、混同される可能性のある個所では使用しない。

<p><u>fotter</u>タグのスタイルを修正する。</p>
<!-- 正しくはfooter -->

chromeで表示したとき

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

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

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

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

mark要素

参照するためにマークまたはハイライトするテキストを表す。
引用文に使用する場合は、元々存在していなかったが引用先でハイライトを追加した形になる。

<p>好物は『<mark>チョコパイ</mark>と焼き鳥』。</p>

chromeで表示したとき

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

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

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

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