HTML Tips & Tricks 附録

間違いだらけのHTML書法

Altair☆'s Pageに戻る by Altair☆
最終更新: 1999年12月 3日
ありがたいことに誰でも手軽に自分のhome pageを持てるようになりました。しかし、graphics heavyだったり、あるいは特定のbrowserに依存していたり、堂々と半角カタカナを利用していたりと、質の悪いpageも増えています。実は私もエラそうなことを言えないのですが…。(^^;

このpageには、HTMLを少し書き慣れた初心者を対象として、私が最近、ちょっと気になったことを書いてあります。少しでも参考になれば幸いです。また、このpageの最後に紹介する様々な参考文献も参考にしてください。



公開する前に、ミスを減らしておこう

HTMLが構文的に正しいかどうかをcheckするAnother HTML-lintというsoftwareを利用すると、ケアレス・ミスやいくつかのbrowserを混乱させるような記述を見つけ出すのにとても役立ちます。Perl scriptさえ利用できるようにさえできれば、unixはもちろん、WindowsやOS/2など、どんな環境でも実行できます。また、cgiサービスも用意されていますので、Perlを利用できない環境の方でもWWWアクセスできる環境さえあれば利用できます。

HTMLを書く際に参考になる情報も、Another HTML-lintのpage[8]に紹介されています。1度は訪問してみることをお薦めします。

また、style sheetのチェックをしてくれるものとしては、validator[1]も試してみる価値があると思います。こちらは、Javaで書かれていますので、やはり実行環境を選びません。


<img>にはwidthとheightを指定しよう

img elementのattributeにwidthとheightがあります。このattributeが指定されていないと、HTML文書をloadingした時点で、その中のimg elementによるinline imageをloadするまでbrowserはlayoutを確定できません。layoutが確定するまで表示をpendingし、何も表示しないbrowserもあります。

widthとheightを積極的に指定しておくことによって、いち早くlayoutを確定させることにより、あなたのpageをより快適に見せることができます。特にbrowserにとってlayoutを確定しにくいtableの中では効果的です。


<img>にはaltも指定しよう

<img>はinline imageをHTML文書内に展開するために広く使われているelementですが、

など、inline imageを表示できない環境もあります。できる限り、alt attributeを積極的に指定しましょう(HTML 4.0 [7]では必須)。その際、そのalt textがuserにわかり易い表現であることが望ましいことは言うまでもありません。

また、たまに、alt="text"のtextの部分にheading elementを使っているpageを見かけます(次の悪い例を参照)が、多くのbrowserは、それを解釈できません。

悪い例:
<img src=subway.gif alt="<h2>地下鉄路線図</h2>">
もし、inline imageを表示できない場合に、headingされたtextを表示したいなら、
好ましい例:
<h2><img src=subway.gif alt="地下鉄路線図"></h2>
とすべきでしょう。<area>のaltも同じで中にmark upを記述してはなりません。

alt optionが解り易い記述になっているかどうかチェックするには、lynx[9]のようなtext browserで表示してみるのが良い方法のひとつだと思います。


<html>、<head>、<body>を省いて良いか?

HTML 3.2[3]では、<html>、<head>、<body>をどんな時にも書かねばならぬとは規定されていません。でも省かない方が良いでしょう。

elementsの組み合わせによっては、省略すると動作がおかしくなることがあります。例えば、Microsoft Internet Explorerは、script elementを認識できないことがあります。

何もしないelementなので必要性がいまひとつわからないのですが、書いた方がbetterです。


Comment書法

Comment書法の誤りで、browserによっては全く見えなくなってしまっているpageを頻繁に見かけます。また、その逆にcommentにしたつもりなのに表示されてしまうこともあります。Commentは正しく書きましょう。

SGML decrationは、“<!”で始まり、“>”で終り、commentは“--”で始まって終ります。commentの中に“--”があってはいけません[4]。…と言われてもわかりにくいので、実例を紹介します。

正しい例

<!-- comment -->
ごく普通の書き方です。
<!-- foo -- -- bar -->
-- foo --”と“-- bar --”のふたつのcommentがひとつのcomment decration“<! >”の中にある例です。
<!---->
空のcommentです。

誤った例お薦めできない例

<! -- comment -- >
HTML 4.0の規定では、“<!”と“--”が密着していなければなりません。コメント末尾の“--”と“>”が離れているのは許されます。
<!>
0個のcommentを持つ空のSGMLとしては誤りではありませんが、HTML書法としてはお薦めできません。
<!-- one -- two -- three -->
-- one --”と“-- three --”は、“--”で始まって “--”で終わっていますから正しいcommentですが、“two”がcommentとしては不正です。
<!--> -->
文法的には正しいのですが、commentの中の“>”をいくつかのbrowserはelementの終了と混乱して解釈することがあるのでお薦めできません。同様の理由で、JavaScriptやTclを使う際、script非対応の古いbrowserにそのsource codeを表示させないために“<script><!--”としておいても、比較演算子‘>’があると、そこで、comment終了と誤解し、それ以降のsource codeを表示してしまうbrowserがあるので要注意です。例えば“if(i>0)”とscriptを書く代わりに、不等式の左右を入れ替えて“if(0<i)”という形に書いた方がbetterです。
<!foo>
--”で始まっていません。あなたがお使いのbrowser画面に表示されなかったとしても、HTMLのcommentとしては文法的に不正です。他のbrowserを混乱させる原因となるかも知れません。
<!------>
最初の“--”がcommentの始まり、次がcommnetの終り、最後の“--”がふたつめcommentの始まりです。ふたつめのcommentの終りとなる“--”が足りませんから誤りです。例えば、“<!-------->”か、“<!---->”とすべきです。このような、‘-’だけから成り立つcommentsは、‘-’の文字数が0を含む4の整数倍となると覚えておきましょう。

<BODY>にbackgroundを指定した時にはbgcolorも

HTML 3.2では、body elementに様々なattributesを使用できます。それらの中でも最も広く使われているのが、background attributeによるbackground imageの表示でしょう。濃い色の背景画に、textやlinkなど淡い色のの文字表示色を設定した美しい仕上げのweb pagesを見かけます。

ところが、遅いmodemでdial upしていたり、networkそのものが混雑している時など、auto load imagesをoffにして少しでも快適にaccessしたいことがありますが、そのような場合にはbackground imageがloadされなかったのにもかかわらずtextの色だけが変わってしまい、非常に読みにくくなってしまうことがあります。これを避けるために、本来表示しようとする背景imgageに近い色をbgcolor optionに指定して置き、あなたがimageした配色の雰囲気だけでも伝わるようにすべきです。


Shift_JIS or x-sjis?

最近の日本語対応のbrowserの多くは、JIS (ISO-2022-JP; RFC-1468)だけでなくEUC-JPやShift JISの文字集合も自動認識して日本語も表示できるようになっています。しかし、browserの文字集合のdefaultがLatin-1 (ISO-8859-1)だったり、あるいは日本語自動認識でも、それが誤認識するのを避けるため、もし、あなたがpageをShift JISで書いているなら、

<meta http-equiv=Content-Type content="text/html; charset=Shift_JIS">
とHEAD sectionに書いておくと良いでしょう。

charset=Shift_JISの代わりに、charset=x-sjisと紹介している文献もあります。x-sjisよりShift_JISが正しいので、ここではShift_JISと記述することをお薦めします。EUC-JPについても同じで、x-euc-jpよりはEUC-JPが正しいのです。

しかし、歴史的経緯で、いくつかの古いbrowserでは、Content-TypeのcharsetとしてShift_JISやEUC-JPが指定されると、charsetを認識できずdefaultのLatin-1が適用されしまい、結果的に正しい表示ができなくなってしまいます。そして、困ったことに、世間ではまだ、そのようなbrowserも利用されていますので、正しくはないことを承知で、敢えてx-sjisやx-euc-jpを指定した方が良い場合もあります。

あなたがweb pageを公開しているサーバのlogがあれば、どのようなbrowserからあなたのpageが参照されているかを調べ、このような問題を起こすbrowserからの参照が多いようであれば、x-sjisやx-euc-jp指定せざるを得ないでしょう。ただし、最近のbrowserの中には、x-sjisやx-euc-jpを解釈しないものがありますので気をつけてください。

なお、“text/html;”と“charset=”の間には空白文字を入れておかないと誤動作し逆効果になることが希にあるようです。
text/html;charset=…
text/html; charset=…

Doctype宣言を書くべきか?

ちゃんとしたHTMLを心掛けるなら書くべきです。

たまに、<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">と宣言しておきながら、marqueeやframe element、language attributeの指定されたscript elementなどの拡張mark upを利用しているpageを見かけます。それらは、HTML 2.0[5]やHTML 3.2[6]に規定されたmark upではありませんから、これは誤りです。

たいていのbrowserでは何も不都合が生じないので、このような誤りが堂々とまかり通っています。しかし、それなりのdoctypeを宣言すべきで、実際にpageを記述しているmark upに則したdoctype宣言をするのが理想的です。

最近は、それ以前の問題で、doctype宣言そのものが誤ったHTMLを吐き出すauthoring toolsが少なくないので困ったものです。


実は私もエラそーなことは言えない (^^;

私がこのsiteに置いているweb pagesの殆どは、原則としてHTML 4.01 (transitional)で書いてあります。但し、実は、いくつか反則してます。(^^;


参考文献/関連URL

[1]
W3C; Validator
[2]
JEIDA; こころWeb
[3, 4, 6]
W3C; HTML 3.2 Reference Specification
[5]
IETF; Hyper Text Markup Language 2.0, RFC 1866
[7]
W3C, HTML 4.01 Specification
[8]
Another HTML-lint
[9]
Altair☆; HTMLをplain textに変換する, OS/2 WARP Tips & Tricks

Valid HTML 4.01! Valid CSS! Copyright (c) 1997-2002 by Altair☆ <NBG01720@nifty.ne.jp>
All rights reserved. 不許複製、無断転載厳禁