HTML 5 の新要素の解析のされ方で気をつけるところ

2009年5月21日木曜日

先日の sugamo.css に自分が持ち込んだネタの一部 (続きは次回の記事を予定) を少し詳しくまとめてみました。

2009年 5月 20日現在の HTML 5 Editor’s Draft にある HTML 5 の新要素を、現行の Web ブラウザーで扱う場合の結果を調べたものです。(実際に動かして調査をしたため根拠はその動作結果のみです。公式な文書を参照したわけではないので誤った情報があるかもしれません…。)

HTML 5 の新要素を Internet Explorer で扱う場合の注意点

IE は HTML 5 の新しい要素を空要素として扱います。ただし、createElement() を使うことで内容をもつ要素にすることができます。

例えば

<section>
<p>text</p>
</section>

の <section> と </section> はそれぞれ別の空要素として扱われ、兄弟関係で section、p、/section がある状態になります。そこで

document.createElement('section')

のように createElement() を使えば該当の要素は内容を持つことができる要素になります。

HTML 5 の新要素を Firefox で扱う場合の注意点

Fx 2 では HTML 5 の新要素はその内容にブロックレベルの要素を持つことができません。

例えば

<section>
	<span>text</span>
</section>

はそのまま解釈しますが

<section>
	<p>text</p>
</section>

は section 要素の中にブロックレベル要素 p があるので Fx 2 は自動で終了タグを補い

<section _moz-userdefined=""></section>
<p>text</p>

HTML 5 の新要素を空要素として解釈します

figure + legend を Firefox で扱う場合 1

Fx 2, 3 は legend 要素の親要素が fieldset 要素以外の場合は無効になります (HTML 4.01 では LEGEND 要素は FIELDSET 要素の子要素としてしか登場できない)

<div>
	<legend>text</legend>
</div>

のような HTML のコードの場合、legend の親要素が fieldset 要素がないので Fx 2, 3 は

<div>text</div>

のように legend 要素を無視して解釈します。

figure + legend を Firefox で扱う場合 2

ただし、legend の親要素が body 要素、form 要素の場合、親要素として fieldset 要素を補います。

例えば

<form>
	<legend>text</legend>
</form>

のような HTML のコードの場合、legend の親が form 要素なので Fx 2, 3 は

<form>
	<fieldset><legend>text</legend></fieldset>
</form>

のように fieldset 要素を補って解釈します。

figure + legend を Firefox で扱う場合 3

また、Fx 3, 3.5 Beta 4 では legend 要素の親、先祖に不明な要素がある場合は、不明な要素を無視した上で上記のルールを適用します。

<div>
	<figure>
	<img src="img.png">
	<legend>text</legend>
	</figure>
</div>

は不明な要素 figure を無視した場合、親は body 要素、form 要素、fieldset 要素に該当しないので legend は無視され

<div>
	<figure>
	<img src="img.png">
	text
	</figure>
</div>

のように legend 要素を無視して解釈します。

figure + legend を Firefox で扱う場合 4

一方、

<body>
	<figure>
		<img src="img.png">
		<legend>text</legend>
	</figure>
</body>

は不明な要素 figure を無視した場合、親は body 要素、form 要素、fieldset 要素に該当するので親要素として fieldset 要素を補い

<body>
	<figure>
		<fieldset>
			<img src="img.png">
			<legend>text</legend>
		</fieldset>
	</figure>
</body>

のように fieldset 要素を補って解釈します。

figure + legend を Firefox で扱う場合 5

さらに、fieldset 要素を補うケースで、複数の legend 要素がある場合、一つの fieldset 要素に格納します。

例えば

<body>
	<section>
		<figure>
			<img src="img.png">
			<legend>legend</legend>
		</figure>
	</section>
	
	<section>
		<figure>
			<img src="img.png">
			<legend>legend</legend>
		</figure>
	</section>
</body>

の場合、不明な要素 section と figure を無視した場合、legend の親要素は body となるので fieldset 要素が補われますが、複数の lagend 要素がある場合は一つの fieldset 要素に格納されてしまいます。その結果、次の構造のように大幅に変更して解釈します。

<body>
	<section>
		<figure>
			<img src="img.png">
			<fieldset>
				<legend>legend</legend>
	
				<section>
					<figure>
						<img src="img.png">
						<legend>legend</legend>
					</figure>
				</section>
	
			</fieldset>
		</figure>
	</section>
</body>

HTML 5 の新しい埋め込み要素

HTML 5 の新要素の中でも canvas 要素, video 要素, audio 要素といった Embedded content について、これらをサポートしていない現行 Web ブラウザーで利用したい場合は JS や Flash、VML などを使って代替する仕組みを用意する必要があります。

まとめ

Firefox の legend 要素は HTML 4.01 に最適化されているので HTML 5 の figure 要素用には使いづらそうです。

HTML 5 はまだ仕様として安定していなく、現行の Web ブラウザー側のサポートもなんとか使えるという感じなので実用にはまだ少し早いかも。ただ、手が届く範囲で実験的に使うのは勉強になっていいと思います。例えば自分のポートフォリオとか。

トラックバックURI

http://www.yomotsu.net/wp/wp-trackback.php?p=524

HTML5（マークアップ）についてのメモさんからのコメント

2009年9月18日 22:00

[...] 5 における HTML 4 からの変更点 HTML 5 の新要素 HTML 5 の新要素の解析のされ方で気をつけるところ最新ブラウザのHTML5タグへの対応状況をまとめてみた HTML [...]