前回の「＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その1】」では、マークアップの基本となる「カテゴリー」「コンテンツ・モデル」の説明をいたしましたが、その他にも特殊なマークアップルールがいくつか定義されています。
今回は、前回説明した7つのカテゴリーのように分類することができない以下3つのマークアップルールをご説明いたします。

• トランスペアレント・コンテンツ
• パルパブル・コンテンツ
• セクショニング・ルート

トランスペアレント・コンテンツ

トランスペアレント（transparent）とは透明を意味します。トランペアレント・コンテンツに属する要素は親要素のコンテンツ・モデルを引き継ぐため、親要素によって中に入れることができる要素が変わってくるのが特徴です。

では、マークアップの例を見てみましょう。

<div>
  <a>
    <p>テキストが入ります</p>
  </a>
</div>

ブロック要素、インライン要素のルールで慣れている人にとっては、インライン要素の中にブロック要素があるので誤ったマークアップと思われるかもしれませんが、HTML5では<a>要素はトランスペアレント・コンテンツに属するため、<a>要素は親要素である<div>要素のコンテンツ・モデルを引き継ぎます。
つまり、<div>要素はフロー・コンテンツに属する要素を入れることができるため、フロー・コンテンツに属する<p>要素を<a>要素の中に入れることが可能になります。

比較的自由度が高いトランスペアレント・コンテンツですが、インタラクティブ・コンテンツ（<a>、<iframe>、<details>など）に属する要素は入れることはできません。

誤った例×

<div>
  <a>
    <iframe>インタラクティブ・コンテンツ</iframe>
  </a>
</div>

※<iframe>要素はインタラクティブ・コンテンツのため入れることができない。

パルパブル・コンテンツ

パルパブル（palpable）とは明白を意味します。パルパブル・コンテンツに属する要素は、内容にhidden属性が指定されていないコンテンツを1つ以上持つ必要があります。
しかし、場合によっては内容が空であっても問題ないとされているため、そこまで厳密なものではありません。
普段コーディングしている分にはあまり気にする必要はないと思います。

セクショニング・ルート

セクショニング・ルートとは、セクションのルートとして扱われる要素のことで、セクショニング・ルートに属する要素は独自のアウトライン（階層構造）を持つことができるのが特徴です。
独自のアウトラインを持つため、文書全体への影響はありません。

では、マークアップの例を見てみましょう。

<section>
  <h1>見出し</h1>
  <p>テキスト<p>
  <blockquote>
    <h2>引用タイトル</h2>
    <p>内容文</p>
  </ blockquote>
</ section >

上記のマークアップでは、<blockquote>はセクショニング・ルートに属するため、<blockquote>内に記述されている<h2>は独立された見出しとみなされ、上部の<h1>との関係はなくなります。

さいごに

ここまでさまざまなカテゴリーやコンテンツ・モデルなどのマークアップのルールをご説明してきましたがご理解いただけたでしょうか？HTML4やXHTMLと比べてルールが複雑で理解が難しい部分もあったかもしれません。

自分のマークアップが文法構造的に正しいか確認するためのサイトもありますので、マークアップに不安がある方は利用することをおすすめいたします。

この記事を書いた人

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。

この執筆者の最新記事

この執筆者の記事一覧

• 2022年10月24日WEBGraphQLサーバを構築するためのGoライブラリ「gqlgen」を使ってGraphQLサーバーを構築してみる
• 2022年8月25日WEBGo WebAssemblyでブラウザ上でGoを実行する その3 Javascript側からGoの関数を呼び出す
• 2022年6月21日WEBGo WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する
• 2022年4月25日WEBGoのコードをWebAssenblyにコンパイルしてブラウザ上でGoを実行する