Hatena::ブログ(Diary)

かせいさんとこ

2009-06-16

scriptタグを<script src="〜" />って書くと、なんで上手くいかないかまとめてみた

これは何?
HTMLにて以下のようにscriptタグを書いた所、それ以降のscriptが正常に認識されませんでした
(Firefox3.0, IE7にて再現。Google Chromeでは何故か正しく動作)

<script type="text/javascript" src="〜.js" />
<script type="text/javascript">
	"ここのコードが読み込まれなかった!"
</script>

んで、原因を色々調べたところ、HTML4.1ではこういう書き方だと、閉じタグが無いものと認識されることが判明
以降、なんでそれがダメかをまとめます

正しくは、こう書く
<script type="text/javascript" src="〜.js"></script>
<script type="text/javascript">
	"ここのコードが読み込まれなかった!"
</script>
注意点
2009/06/16時点でのXHTML1.1, HTML4.01を基準に話を進めてます
以降のバージョンが標準になった場合、話が変わる可能性があるので注意してください

なんで?<br/>とか書いてもOKじゃない?
2つ勘違いをしてます
- </br> という書き方は、XHTMLの書き方で、HTMLの書き方ではない
- br は空要素だが、script は空要素ではない

空要素
<img> や <br> のように内容を持たない要素の事を空要素といいます
んで、空要素については、<br /> のような書き方が、HTML, XHTML 共々許されていますが(後述)、
<script src""〜.js"> のような、内容を持ちうるが、今回は中身が空である要素については、きちんと終了タグを書かないといけません

どの要素型宣言も、概して、3つの部分を記す。開始タグ、内容、終了タグ、である。 
		
〜 中略 〜
		
HTML要素型の中には、著者が終了タグを省略することを許容するものもある。(例えば、P要素型やLI要素型)。

On SGML and HTML (ja) - 3.2.1 要素

終了タグの有無(空要素であるかどうか)については、各要素のリファレンスに書かれているのでそちらを参照

Index of the HTML 4 Elements

XHTMLとHTMLの違い

XHTML

XHTMLっていうのは、HTML の文法を元ネタである XML の文法にあわせて、XMLパーサでも読めるようにして、汎用性を上げようって考えの元作られているようです
んで、XML の文法として、全てのタグは閉じないといけないので、brタグとかは以下のような記述となります

<br></br>
<img src="01.jpg"></img>

但し、それだと今まで HTML 書いてた人には違和感がある為、空要素については、以下のような書き方も許容しています


<br/>
<img src="01.jpg"/>

詳しくはこの辺参照
(最新は1.1なのだけど、w3cの1.1で言及してるところが見つからなかったので、こちらで我慢)

XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語 4. HTML4との相違点

なので、<br/> という書き方は XHTML の文法ってことはOKでしょうか


HTML

んで、HTML だと、空要素タグに閉じタグをつけることは許されません

HTMLの要素型には、内容が存在しないものもある。例えばline breakの要素 BRには内容がない。その唯一の役割は、テキストに含まれる1つの行の終端を示すことである。このような 空要素は、終了タグを絶対に持たない。 

On SGML and HTML (ja) - 3.2.1 要素

こういう書き方はNG!
大半のブラウザでは、<br>が2個あると判断される
<br></br>
<img src="01.jpg"></img>

但し、<br/> という書き方は / の前にスペースをつければ、HTML でも、XHTMLでも正しく認識される旨が、書かれています

たとえば <br /> や <hr />, <img src="karen.jpg" alt="Karen" /> といったように、空要素の末尾の / と > との前にスペースを1個組み込むこと。また、たとえば <br /> といったように、空要素には最小化タグ文法を使うこと。これは、XMLで許容されている代わりの文法 <br></br> は、多くの既存のユーザエージェントでは与えられる結果が一定しないからである。 

XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語 - 付録C. HTML互換性ガイドライン

これなら、XHTML、HTML両方でOK
<br />
<img src="01.jpg" />

おまけ
現状、ブラウザにXHTMLを認識させるには、ヘッダでの宣言以外に、拡張子を.hxtmlにした方がベターかも

参考リンク
- XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語
- HTML 4.01 Specification (ja)
- XML空要素タグのHTML的解釈・付記 - 徒書


そんなかんじー

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/kasei_san/20090616/p1
リンク元