普段我々が日常で使用しているウェブブラウザには、HTMLの記述に誤りがある場合でも、そのウェブブラウザ独自の判断で処理し、何もミスがなかったかのごとく出力するという機能が備わっている場合がある。 その機能が果たしてどの程度まで有効なのか、普及率世界一のブラウザとされるMicrosoft社のInternet Explorer 6.0（以後IEと呼称する）を例に調べてみたい。
今回の目的は正しいと思われるルールを適用しHTMLで記述された文書に手を加え、人為的に間違いと思われる形にし、どういった形で表示されるかを調べる、というようなことを目的としている。 よってまずはじめに正しいと思われるルールを適用しHTMLで記述された文書を入手もしくは自ら記述しなければならない。 ここは以前我が電算部部長相川先輩がとあるところで作成したHTMLの文章に私の少ない知識を駆使しここでミスを発生させないように手を加えて基本のHTML文章とする。 便宜的にこのHTML文章は以後「基本文章イ」とする。
なお、HTML文章の記述間違いには大きく分けて三つに集約されると考えられる。 スペリングミス、順序ミスそれに書き忘れだ。 ここではこれらを順に調べることにしよう。
上から順に実行していき、確認すると元に戻して次のものを実行する方法でしていく。 結果を一つ一つ見ていこう。
間違いイでは何も変化が起こらなかった。 IEでは宣言文を適当に書いてもいいということなのか。
間違いロでも何も変化が起こらない。 HTML要素は文章の内容がHTMLで記述されていることを定義しているのであり、また属性lang="ja"は日本語を使用言語に指定していることを意味しているはずだ。 これなら内容がはにゃで記述され、萌え語を使用言語に指定していますとの意味になるはずである。 ブラウザに何も表示されなくなっても不思議ではないと考えるのだが、IEでは関係ないという結果が出た。
間違いハでは<HEAD>“頭”ではなく<HENDA>“変だ”なのだが、中の<TITLE>タグはしっかり適用される。
間違いニでやっと変化が訪れた。 タイトルバーに<TITLE>タグが無い場合に表示されるURLが表示され、ページ上部に基本文章イというタイトルであるはずのものが表示された。 これは<TITLE>タグは存在せず、<HEAD>の中に認識不可能な異物があるから表示だけはしておくという処理が行われたのであろうと考える。
間違いホでは何も変化がない。 タイトルだけ表示され、内容は何も表示されないという状態になってもいいとは思うのだが、無視されているのだろうか。
間違いヘはこんなものでコメントとして認識されるのか非常に興味がわいた。 結果IEでは問題なくコメントと認識され、内容は表示されなかった。 もしかしたら<>で囲っていればコメントと認識されるのかもしれない。 そこで10行目を<現在の高槻市長が滋賀大教育学部卒ということは関係ない>としてみると、コメントとは認識されずに<>付きそのまま表示されてしまった。 次に<!現在の高槻市長が滋賀大教育学部卒ということは関係ない>に変えると、今度はコメントとして認識され内容は表示されなかった。 さてこの差はいったいなんだろうか。 正しい書き方は<!--〜-->、コメントと認識されたのは<!(^^)!〜(-_-)>、<!〜>であり、認識されなかったのは<〜>であった。 この結果から、IEでは<の次に!があればコメントとして認識されるということだ。 IEにおいてコメントを記述する際に--は不要なのである。
間違いトではテーブルがテーブルではなくなった。 認識不可能なのだろう。
間違いチでは色が変わった。 <FONT>とは認識されていない証拠である。
間違いリにおいてAの変わりにBやSを記述するわけにいかなかった。 <B>タグ、<S>タグは存在するのである。 そこでＺとしたら、文字は表示されるのだが、その内容をクリックしても移動することができなくなった。
以上の結果を元にすると、宣言文やHTML、HEAD、BODYの各要素はミスをしても問題ない。 このような重要な意味を持つタグでスペリングミスをしても問題ないのは逆に問題だと思ってしまう。 もしかしたらIEでは記述しなくても変わらず表示できるのかもしれない。 後で実験してみよう。 そのほかの実験対象になったタグはスペリングミスはそのミスする前のタグとして認識されることは一切ないということがわかった。 ミスだからといって修正しようとしても、どのタグに修正して処理すればいいか選択できないからであろう。 IEにとってスペリングミスは記述されていないことと同じなのかもしれない。
間違いヌはなんとも骨の折れる作業であった。 まずは宣言文は終了タグがないので<HTML>タグから確認するが何も変わらない。 同様に<HEAD>タグも変化がない。 スペリングミス実験の時も思ったが、IEではなくてもある物と解釈して表示に影響を与えないのかもしれない。 そして次の<TITLE>タグでは、タイトルとして書いた5行目の基本文章イというテキストしか表示されなくなった。 <TITLE>タグが基本文章イの次から効力を発揮するためタイトルバーにそれ以下のHTML文章が表示されると考えたのだが、URLが表示されていた。 <TITLE>タグ以下のHTML文章はどこへ消えたのだろうか、疑問が残ってしまった。 次の<BODY>タグだが、変化がなかった。 変わって<H1>タグでは、8行目のTAKATSUKIというテキスト以外が全て大きくなった。 <P>タグでは変化無し。 <HR>タグを</HR>にすると直線が消え去った。 <TABLE>タグではテーブルが崩壊した。 <TR>タグは見た目はあまり変化がないもののテキスト間の空白部分に変化が訪れた。 まず</TR>〜<TR><TR>〜</TR>とするとテーブル一段目と二段目の間の空白が広くなった。 次に<TR>〜</TR></TR>〜<TR>とするとテーブル二段目とその下のテキストとの空白が広くなった。 最後に</TR>〜<TR></TR>〜<TR>とすると一段目と二段目間とともに二段目とその下のテキスト間の空白も広くなった。 これはTABLE要素の中の<TR></TR>間、もしくは<TR>の開始タグ単独でも表が一段形成されるというルールがあり、その形成された一段分が中にテキストが入っていないため空白として表示されたのだろうと考える。 <FONT>タグの開始タグと終了タグとを入れ替えると、赤い文字だった部分が、黒に戻った。 ここで入れ替えられた<FONT>の終了タグにcolor属性を入れ色を指定すると、それ以下のテキストに色が付いた。 <UL>タグの場合はなんと直下の黒丸リストがページ左に移動し、つまりインデントが消え、その下に配置されてあった、画像が右方向に移動してここでインデントが発生した。 <LI>タグの場合は<TR>タグと同様三種類試してみる。 開始、終了タグの順序は<TR>タグと同じなので省略させてもらう。 まずはじめの配置ではリストが三段できる形になった。 しかし一番上は黒丸無し、二段目はテキスト無し。 次も二段であったが、テキストは上の段にまとめられ下の段は黒丸はあるが空白となる。 最後はリストが三段でき、一番上は黒丸無し、二段目は黒丸、テキストあり、三段目はテキスト無しであった。 理由は<TR>タグと同じであろう。 次に<IMG>タグを</IMG>にすると、画像が消え去った。 <A>タグの場合はクリックしても飛ばなくなった。
間違いルでは<TR></TR>となったところに空白が生まれた。 それ以外に変化はない。
間違いヲではリストとその上のテキストとの空白は消え、リストのインデントも消えた。
ここでもまたHTML、HEAD、BODYの各要素はミスをしても問題ない。 それと開始タグだけで働くものがあり終了タグが省略可能かもしれないことが判明した。 開始タグが前にない終了タグは意味を持たないので、順序ミスはさして問題にならないのかもしれない。 例えばリストはUL要素に囲われなくても、<LI>があればリストとして作用する。 しかしTABLE要素に囲われないと、<TR>、<TD>があってもテーブルとはならないので注意したい。
間違いワを間違いヌと同様の順序でいくと、HTML、HEADは終了タグを消去しても問題ない。 <TITLE>の終了タグを消去すると何も表示されなくなった。 <BODY>は変化なし、<H1>タグでは全てのテキストが大きな文字になってしまった。 </P>はその下の空白部分が消えてしまった。 コメントの-->の部分を消すと、直後の直線が消えてしまった。 <TABLE>タグではなぜかテーブルが最下部に移動してしまい、また<TABLE>開始タグより下に書かれているテキストがなぜかページ縦半分より右側に固まってしまった。 <TR>、<TD>共に終了タグを消去しても問題ない。 <FONT>の終了タグを消すと以降のテキストに色が付いた。 <UL>の場合は以降のテキスト、画像にインデントがかかった。 <LI>は変化なし。 <A>の終了タグを消去すると、このままだと変化がないように見えるが、その次の行にテキストや画像をおくと、そのテキストや画像までクリックすると別ページに飛んでいってしまう。
間違いカでは何も変化が起こらない。 スペリングミスまとめで書いたことは真実だったのである。
間違いヨでも変化なし。
終了タグを省略しても問題ないタグとそうでないタグとが存在することが判明した。 それとHTML、HEAD、BODYの各要素と宣言文は消去しても問題ないことも判明した。 IEでは終了タグを書き忘れてもたいていは問題にならないように処理されるようだ。
これまでの結果をもとに基本文章イと同じように表示されるHTML文章を作ってみたのが、応用文章ロである。 HTML文章という定義もなく、バージョンの宣言もなく、頭と体も無い状態だが、基本文章イと寸分違わぬ表示である。 IEには恐れ入るばかりである。 IEではスペルミスは仕方がないとしてもその他のミスを結構カバーしてくれる。 うれしいと感じる人、この機能はためにならないと思う人それぞれいると思う。 初心者である私としてはこの「甘い」ブラウザIEに次はどんな私のような人間のための「生ぬるい」機能がつくか楽しみである。 次回は他のブラウザとの比較をしてみるのもいいかもしれない。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3org/TR/htm14/strict.dtd"> 3 <HTML lang="ja"> 4 <HEAD> 5 <TITLE>基本文章イ</TITLE> 6 </HEAD> 7 <BODY> 8 <H1>TAKATSUKI</H1> 9 <P>高槻市はどのようなところか</P> 10 <!--現在の高槻市長が滋賀大教育学部卒ということは関係ない--> 11 <HR> 12 <TABLE> 13 <TR> 14 <TD>高槻の有名人</TD> 15 <TD>高山右近</TD> 16 </TR> 17 <TR> 18 <TD>高槻の有名人に</TD> 19 <TD>辻本○美</TD> 20 </TR> 21 </TABLE> 22 <FONT color="red">高槻市内のどの小学校でも高山右近の名は教わるはずである。 23 しかしそのなかの一部の子どもは右近をう○こと頭の中で変換してしまう。</FONT> 24 <UL> 25 <LI>今年の4月1日より中核市になった。</LI> 26 <LI>しかし市民の中で実感している人間ははたして何パーセントいるのだろうか</LI> 27 </UL> 28 <IMG SRC="http://www.densan.net/png/default_h2.png"> 29 <A HREF="http://www.densan.net/">電算ねっとへ</A> 30 </BODY> 31 </HTML>
1 <TITLE>応用文章ロ</TITLE> 2 <H1>TAKATSUKI</H1> 3 <P>高槻市はどのようなところか</P> 4 <!現在の高槻市長が滋賀大教育学部卒ということは関係ない> 5 <HR> 6 <TABLE> 7 <TR> 8 <TD>高槻の有名人 9 <TD>高山右近 10 <TR> 11 <TD>高槻の有名人に 12 <TD>辻本○美 13 </TABLE> 14 <FONT color="red">高槻市内のどの小学校でも高山右近の名は教わるはずである。 15 しかしそのなかの一部の子どもは右近をう○こと頭の中で変換してしまう。</FONT> 16 <UL> 17 <LI>今年の4月1日より中核市になった。 18 <LI>しかし市民の中で実感している人間ははたして何パーセントいるのだろうか 19 </UL> 20 <IMG SRC="http://www.densan.net/png/default_h2.png"> 21 <A HREF="http://www.densan.net/">電算ねっとへ</A>