HTMLの「インライン要素」と「フレージングコンテンツ」：迷子にならないためのやさしいルールブック
Web制作を学び始めると、必ず一度は頭を抱えるのが「HTMLの入れ子ルール」ですよね。
「``や``って、どこまで重ねていいの？」
「なぜかブラウザで表示が崩れる……」
そんな悩み、実はとっても正常な反応です。今日は、HTMLの「インライン要素（フレージングコンテンツ）」という、まるでパズルのようなルールの裏側を、一緒に紐解いていきましょう。
—
そもそも「フレージングコンテンツ」って何者？
HTML5以降、昔ながらの「インライン要素」という呼び方に代わって、「フレージングコンテンツ（Phrasing Content）」という名前が登場しました。
これ、難しそうに聞こえますが、要するに「文章の一部として流れていくもの」のことなんです。
例えば、お気に入りの小説を読んでいるときを想像してみてください。
- 文章の中に、ちょっと強調された言葉がある（``）
- 引用された言葉がある（``）
- クリックできるリンクがある（``）
- プログラムコードが混ざっている（`
`）
これらはすべて、文章の流れを断ち切らずに、スッとその中に入り込めますよね。これがフレージングコンテンツの正体です。
---
「入れ子（ネスト）」の黄金ルール：やっていいこと、ダメなこと
HTMLを書いていると、「とりあえずタグで囲んでおけばOK！」と思いがちですが、ここには唯一にして最大のルールがあります。
1. 「箱の中に箱」の基本
フレージングコンテンツは、基本的に他のフレージングコンテンツを中に入れることができます。
例：``の中に``を入れるのはOKです。
2. 最大の禁止事項：リンクの多重化
初心者が一番やってしまいがちなミスがこれです。
「リンク（``）の中に、もう一つリンク（``）を入れる」のは絶対NGです。
例えるなら：
「デパートの入り口のドア」を想像してください。ドアを開けようとしたら、その中にまたドアがあって、さらにその中にドアがある……これだと、どこを掴んで開ければいいか、お客さん（ブラウザ）は混乱してしまいますよね。
リンクは「一つの出口」です。だから、重ねてはいけないのです。
---
サンプルコードで確認してみよう
実際に、正しい書き方と「やってはいけない書き方」をコードで見てみましょう。
※もし、ボタン全体をリンクにしたい場合は、``の中に`
コメント