ビジネスとIT活用に役立つブログBlog


<初心者向け>知っておきたいHTML5の基本【マークアップ編 その2】

この記事をシェアする:

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

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

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

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

トランスペアレント・コンテンツに属する要素

<a>、<audio>、<canvas>、<del>、<ins>、<map>、<noscript>、<object>、<video>
※<noscript>要素はbody要素内で使用する場合に限ります。

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

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

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

誤った例×

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

パルパブル・コンテンツ

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

パルパブル・コンテンツに属する要素

<a>、<abbr>、<address>、<article>、<aside>、<audio>、<b>、<bdi>、<bdo>、<blockquote>、<button>、<canvas>、<cite>、<code>、<details>、<dfn>、<div>、<dl>、<embed>、<em>、<fieldset>、<figure>、<footer>、<form>、<h1, h2, h3, h4, h5, h6>、<header>、<hgroup>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<keygen>、<label>、<main>、<map>、<mark>、<menu>、<meter>、<nav>、<object>、<ol>、<output>、<p>、<pre>、<progress>、<q>、<ruby>、<s>、<samp>、<section>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<table>、<textarea>、<time>、<u>、<ul>、<var>、<video>、<data>、通常テキスト

セクショニング・ルート

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

セクショニング・ルートに属する要素

<blockquote>、<body>、<details>、<dialog>、<fieldset>、<figure>、<td>

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

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

さいごに

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

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

W3C Markup Validation Service
The following two tabs change content below.
アーティス

アーティス

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

SNSで最新の情報を
受け取ることができます!