フレージングコンテンツ（Phrasing Content）とは
フレージングコンテンツは、HTML文書内でテキストの一部として扱われるコンテンツを指します。
これにはテキストとその周囲に配置されるインライン要素が含まれます。
フレージングコンテンツは文中の単語やフレーズの一部として表示され、ブロックレベル要素の内部に配置されます。
ブロックの内部ということなのでほぼほぼインライン要素といった形で覚えてしまっても問題ないかもしれません。
フレージングコンテンツの例
- テキスト
<a>（アンカー）<abbr>（略語）<b>（太字）<br>（改行）<cite>（引用）<code>（コード）<em>（強調）<img>（画像）<span>（汎用インラインコンテナ）<strong>（重要）
コード例:
<p>これは <strong>重要な</strong> テキストです。</p>
<p>次のリンクをクリックしてください： <a href="https://example.com">こちら</a></p>フローコンテンツ（Flow Content）とは
フローコンテンツは、HTML文書内で文書全体の流れを形成するコンテンツを指します。
これはブロックレベル要素とインライン要素の両方を含みます。
フローコンテンツは文書の主要な部分を構成し、親要素の内容モデルに基づいて配置されます。
こちらはブロックもインラインも含みますが、body内に記述できるほぼすべての要素のことといった形で覚えておくと覚えやすいかもしれません。
フローコンテンツの例
- ブロックレベル要素
<div>（汎用コンテナ）<p>（段落）<header>（ヘッダー）<footer>（フッター）<section>（セクション）<article>（記事）
- インライン要素
- フレージングコンテンツのすべて
コード例:
<div>
<header>
<h1>ウェブページのタイトル</h1>
</header>
<section>
<p>これはフローコンテンツの例です。<a href="https://example.com">リンク</a>や <em>強調されたテキスト</em> などが含まれます。</p>
</section>
<footer>
<p>著作権情報</p>
</footer>
</div>フレージングコンテンツとフローコンテンツの違い
- フレージングコンテンツ:
- テキストの一部として扱われるインライン要素。
- 文中の単語やフレーズの一部として表示される。
- 例:
<a>,<span>,<strong>,<img>
- フローコンテンツ:
- HTML文書の主要な部分を構成するコンテンツ。
- ブロックレベル要素とインライン要素の両方を含む。
- 例:
<div>,<p>,<header>,<section>, フレージングコンテンツの要素
まとめ
フレージングコンテンツとフローコンテンツはHTML文書の構造と内容を理解する上で重要な概念です。
フレージングコンテンツはインライン要素で構成され、テキストの一部として扱われます。
一方、フローコンテンツはブロックレベル要素とインライン要素の両方を含み、文書全体の流れを形成します。
この二つのコンテンツを適切に使用することで、意味論的に正しいHTML文書を作成し、ユーザーエクスペリエンスを向上させることができます。
知識として入れておくだけでも品質の向上に繋がるかと思いますし、ウェブデザイン技能検定などにも出題される内容となっていますので、制作するためだけの知識ではなくこういった内容も理解いただけたらとおもいます。
