フレージングコンテンツとは

フレージングコンテンツとは、文書のテキストおよび段落内レベルでそのテキストをマークアップする要素のことです。
HTML4.01までのインライン要素とほぼ同じ意味で使用されています。

また、フレージングコンテンツの内容として入れることができるのは、フレージングコンテンツだけです。
これもHTML4.01までの、インライン要素内にブロックレベル要素を入れることはできないというルールと同じです。

以下の表の　　　　の部分がフレージングコンテンツ要素です。

フレージングコンテンツの各要素

フレージングコンテンツに該当する要素は、フローコンテンツの次に多いため、ここではよく使用されるものだけをピックアップします。

em要素

特定の部分が強調されていることを示す要素です。
強調したい部分を~で囲うようにして使用します。
このタグが付けられた範囲は、ブラウザのデフォルトでは斜体で表示されますが、斜体で表示される部分にはi要素を使用するのが一般的です。
また、強調ではなく重要をであることを示すにはstrong要素を使用します。

strong要素

特定の部分が重要であることを示す要素です。
重要であるとしたい部分を~で囲うようにして使用します。
このタグが付けられた範囲は、ブラウザのデフォルトでは太字で表示されます。

i要素

生物の学名や専門用語、慣用句、翻訳された文章等、一般に斜体（イタリック）で表示される部分に対して使用します。
（HTML4.01では、斜体で表示させたい部分に使用していました。）

b要素

（太字にすることで）注目させたい部分に使用する要素です。
重要であることを示すためには使用しません。
レビュー記事内での「製品名」、説明文章での「キーワード」など、少し目立っていた方が読み手に分かりやすくなる、という意図がある時に使用します。
（HTML4.01では、太字で表示させたい部分に使用していました。）

q要素

文章の中（インライン要素）で引用文を示す時に使用します。
q要素のタグで囲った部分には、ブラウザ側で自動的に引用符が挿入されます。
もちろん、q要素を使用せずに、自分で引用符をタイピングしてもOKです。

引用文を示す要素は他にもblockquote要素がありますが、blockquote要素は、まとまった範囲（ブロックレベル要素）として、引用文を示す時に使います。

small要素

小さな文字で表記される部分に使用する要素です。
Copyright表記や、免責事項の表記を示す時などに使用します
（HTML4.01では、小さな文字で表示させたい部分に使用していました。）

br要素

フレージングコンテンツ（インライン要素）の途中で改行させたい時に使用する要素です。
この要素は、要素内容を持たない空要素です。

のように開始タグのみで示すため、終了タグは不要です。

span要素

タグで囲った部分をフレージングコンテンツ（インライン要素）にする要素です。
span要素自体には何の意味も持ちません。
主にclass属性やid属性と組み合わせて使い、特定の範囲にCSSを適用させることができます。

ruby要素

テキストにルビ（ふりがな）を振るための要素です。
ルビを振りたい範囲全体をruby要素のタグで囲い、その内部でルビを振りたいテキストの直後に、ルビとして表示させたいテキストを入れたrt要素を配置します。
（rt要素はruby要素内にいくつでも入れることができます。）

千葉県には我孫子あびこ市という市がある

しかし、ruby要素に未対応のブラウザの場合、rt要素内がそのまま表示されてしまいます。
そこでrp要素を使用します。
rp要素はruby要素内で使用できる要素で、ruby要素対応ブラウザでは、rp要素内の文字列は表示されないという特徴があります。
これを利用し、ルビとして表示させたい部分の前後（rt要素の直前と直後）にrp要素で囲った括弧、（と）を挿入します。
こうすることで、ruby要素対応ブラウザでは括弧は表示されずにルビとして表示され、一方で非対応ブラウザではルビ部分は括弧表記で表示されます。
ruby要素を使う場合は、rp要素も合わせて使用するといいでしょう。

千葉県には我孫子（あびこ）市という市がある

a要素

リンクを作成する要素です。
a要素の内容として入れたテキストや画像などがリンクとなります。
リンク先のURLはhref属性の値として指定します。

 同じページ内にあるid属性を指定している要素の位置にリンクしたい場合は、#に続けてid属性の値を指定します。

Creator Index

 また、リンク先を新しいタブ（ウィンドウ）にしたい場合は、target属性の値を「_blank」にします。

a要素の内容には、a要素の親要素に入れることのできる要素であれば、どの要素でも入れることができます。
（ポイントは、親要素です。これをトランスペアレントといいますが、詳しくは後述します。）
ただし、インタラクティブコンテンツ（a要素、textarea要素、button要素等）を内包することはできません。

トランスペアレント（透過的）

フレージングコンテンツのいくつかは、「トランスペアレント」に分類されています。
（トランスペアレントとは、「透明な、透過的」という意味です。）

その特徴として、親要素のコンテンツモデルを受け継ぐ、というのがあります。
例えば以下のようなコードの場合、

 a要素は親要素であるsection要素のコンテンツモデルを受け継ぎます。
section要素は、フローコンテンツ、セクショニングコンテンツ、のコンテンツモデルを持っているので、この場合のa要素の中にはメタデータコンテンツの一部を除く、ほぼすべての要素を内包することができます。
言い換えると、この場合のa要素の中には、section要素に内包することができる要素を入れることができる、とも言えます。
（ただし、a要素にはインタラクティブコンテンツを内包できない、というのは変わらないので注意してください。）

このようにして、トランスペアレントを持つ要素は、その名の通り「透明」であるかのように扱うことのできる要素です。

 この特徴により、特定のセクションにリンクをつけることもできるようになりました。

参考

この記事は以下の書籍を参考にして書いています。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

Thanks for reading to the end!!