BLOG

hgroup要素が削除されたり、main要素が追加されたり最近もまだ仕様変更が多いようですが、そろそろHTML5で追加された要素も使って行きたいなと思う、この頃(´・ω・`)
HTML5の勉強を始めました。

HTML5で大きく変わった部分

今までは「ブロックコンテンツ」と「インラインコンテンツ」があり、「ブロックコンテンツ」である<div>や<p>の中に、「インラインコンテンツ」の<span>や「テキスト」を入れるというルールがありました。

しかし、HTML5では「コンテンツモデル」という新しい概念が導入されました。
HTML5では

• メタデータ・コンテンツ（Metadata content）
• フロー・コンテンツ（Flow content）
• セクショニング・コンテンツ（Sectioning content）
• ヘッディング・コンテンツ（Heading content）
• フレージング・コンテンツ（Phrasing content）
• エンベッディッド・コンテンツ（Embedded content）
• インタラクティブ・コンテンツ（Interactive content）

といった新しい要素の区分に変更され「ブロックコンテンツ」・「インラインコンテンツ」は無くなりました（display属性でのblockやinlineの振る舞いは今まで通りです）。

ココが難しい

ややこしいのが必ずしも1つの要素が、1つのコンテンツに属しているとは限らないと言うところです。
例えば<img>要素は「フロー」「フレージング」「エンベッディッド」「インタラクティブ」の4つのコンテンツに属しています。

わかりにくいので画像サイトにしてみました

HTML5 コンテンツモデル ガイド

ルールを覚える

よく「フローコンテンツ」はHTML4の「ブロックコンテンツ」に似ていると言われますが、正確には「フローコンテンツのみ」に属している要素が「ブロックコンテンツ」に似ているのでは無いかと思います。（ほぼ全ての要素が「フローコンテンツ」に含まれていますから…）

HTML4で「インライン」の中に「ブロック」を入れることができなかったように、HTML5でも要素によって内包できるコンテンツモデルとできないコンテンツモデルがあります。
例えば<span>はフレージングコンテンツを内包できるので「テキスト」や<img>要素といったフレージングコンテンツを内包できます。

各要素が内包できるコンテンツモデルについてはHTML5 コンテンツモデル ガイドをご覧ください。

特別な要素トランスペアレント

<a>, <audio>, <canvas>, <ins>, <del>, <map>, <noscript>, <video>, <object>要素はトランスペアレントという特徴を持ちます。
トランスペアレントの要素は「内包できるコンテンツモデルを親要素から引き継ぐ」というルールがあります。
したがってHTML4ではできなかった

このような書き方も構文的に問題ありません。

解説

<div>はフローコンテンツを内包できるので、<a>要素を含めます。
<a>要素はトランスペアレントなので内包できるコンテンツモデルは<div>から引き継いだフローコンテンツになります。
したがって<p>要素を含んでも問題ありません。
そして<p>要素はフレージングコンテンツを内包できるので「テキスト」を内包できます。

コンテンツモデルの理解が重要

どのタグがどのコンテンツモデルの属して、どのコンテンツモデルを内包できるかが重要になってくるHTML5。
この画像を見れば、属しているコンテンツモデルがわかりやすいと思いますので、是非活用していただければと思います。