Valid HTML 4.01!

謎のHTML講座(不完全版)

目次

はじめに
−なんでこんなページを作ったか−
序章
−こんなページはやめてくれ−
第一章
−基本編− HTMLの正しい基本形…判ってますか?−

なんでこんなページを作ったか

 なんでこんなページを作ろうと思い立ったのか。
 それはウェブページ巡りをしていて変な表示のページやソースを覗いてみたらとんでもない書き方をしているページがそこら中に溢れているからです。
 ちゃんとしたHTMLの書き方を知って、ちゃんとしたHTMLを書いて欲しい。
 そんな思いで、つい、こんなページを書き始めてしまいましたが…。
 書くだけ無駄かなあという思いも、なきにしもあらず(^-^;)。
 だって、そんなとんでもないHTML平気で書いたりする人が、こんなページをわざわざ読んでくれる可能性は限りなく低い気がするし、それにHTML手書き派がどれだけ今生き残っていることか(笑)。
 だいたい最近の主流はWYSIWYG形式のHTMLエディタ使って、タグなど意識せずにページ作ってる人だろうし、そういう人にこんなことを説明しても、理解してもらえる可能性はほとんどなさそう…と、そういう気がしてます。
(HTMLエディタ自体が吐き出すタグがまた、よく見るとかなりいい加減なのがまた情けないの。HTMLの知識があって、ソース読んだりする人でないと気付きもしないだろうけど……)
 このページが不完全なのは、そういったこともあって、途中迄書いてやる気をなくしたからです。
 今後続きを書いて完成させるかどうかは全く不明。永遠に不完全版のままになるかも。
 ……えいえんは、あるよ(ぉ

こんなページはやめてくれ

TABLEタグを閉じてない

 1ページがまるまるテーブルだけのページで、最後に終了タグの</TABLE>を書いていないページ…こんないい加減なページが結構あります。
 TABLEタグは終了タグ省略不可なので、完全に文法違反です。
 文法違反だというだけではなく、実害が思いっきりあります。
 ネスケではテーブルが正しく閉じられていないと、そのテーブルの中身は全く表示されません。そのページがテーブルだけのページだったりすると、ネスケで読む人には何も表示されない全く読めないページになってしまいます。
 IEは文法エラーに寛容なので、終了タグがなくてもテーブルとして表示されちゃいます。書いてる人も、読んでる人もIEばかり使っていると中々気付かれなかったりします。
 これは本当によく見かける上に、実害ありまくりの間違いなのでよくよく注意しましょう。同様の間違いにフレームを使っているページで</FRAMESET>を書き忘れているというページも見たことがあります。これもIEでは一見正しく表示されますが、ネスケでは表示されません。ちなみにFRAMESETも終了タグ省略不可です。

巨大なテーブルは嫌われる

 HTMLでテーブルを作る場合、各セルの表示割合などを一々指定しなくてもブラウザがセルの中身などから最適な大きさを計算してセル幅を勝手に決定してくれます。大変便利な機能です。ありがたい機能です。
 しかし、逆に言えば、テーブルを最後の行まで読み込み終わらないとセル幅を決定できないということです。つまり</TABLE>を発見しないことにはテーブルの1行目の表示さえもできないのです。だから、巨大なテーブルでは中身が表示されるまで、イライラと待たされることになります。

ちょっとした心遣いを忘れずに

画像データには全てWIDTH HEIGTを指定しよう

  <IMG>タグを使うときには、必ずWIDTH、HEIGHTの指定をするように心がけましょう。
 基本形は
<IMG SRC="title.gif" WIDTH="400" HEIGHT="200" ALT="タイトル画像">
 といった感じです。

 画像サイズを指定しなかった場合には画像ファイルを読んだ後でないと最終レイアウトが計算できないので、 以下のような問題が起きます。

NC:
画像ファイルを読んでサイズが決定されるまで、<IMG>タグ以降のテキストが表示されない。
IE:
仮サイズで表示して置いて先に進むのでテキストは表示されるが、画像を1つ読み終わる度に再配置がかかるのでちらちらして見づらい。

 どちらにしても、あまり見栄えのいいもんじゃありませんよね(^-^;)。
 ちゃんとそういうことを心掛けているらしいページでも、アクセスカウンターのCGIにはサイズ指定がなかったりするのをよく見かけます。そういう風になってると、カウンターが置いてあるサーバが重かったりするときにネスケではカウンターの前で表示がストップしちゃったりします。
 レンタルカウンターのページなんかではWIDTHやHEIGHTが指定されてない文字列が示されていて、「何も変えずにそのまま張りつけて」などと指定されていてたりしますので、律儀に一字一句変えずにコピーしたのかもしれませんね。
 断言しましょう。
 構う事ありません! 勝手にサイズ指定を追加しちゃいましょう!!
 WIDTHやHEIGHTを勝手に追加したからって呼び出される側のCGIには悪影響を及ぼすことあり得ません。
 なおWIDTHとHEIGHTにどんな数値をいれればいいのかが判らない方は、一度サイズ指定なしで表示させてみましょう。あとは表示された画像のサイズを確認するだけです。例えばネスケなら画像にマウスカーソルを合わせて右クリックから「画像を表示」してみましょう。IEなら同じようにして右クリックから「プロパティ」とやってみましょう。それで画像のサイズは判るはずです。
 どうしてもサイズが判らないときは大体の見当をつけて適当な数値を入れたっていいんです。
 よしんばサイズ指定を間違えたとしてもブラウザがそのサイズに合わせて画像を拡大縮小してくれますから表示される画像がすこしいびつになるだけのことで、他には何の問題も起きません。
 画像が読めなくてもさっさとテキストが表示されるメリットの方が断然大きいです。

ALT属性はちゃんと考えて書こう

 ALT属性はテキストブラウザとか視覚障碍者の方が音声出力でウェブページを読む場合ときなどに画像データの代わりに使われる代替テキストを書くためのものです。
 HTML4.01では省略不可となっているので文法的には必ず書く必要があります。
 しかし、どんな場合にも一々冗長な説明を書いていたら返って邪魔になる場合があります。

リンクページなんかで以下のような記述をよく見かけます。

<A HREF="〜"><IMG SRC="bnr.gif" WIDTH="200" HEIGHT="40" ALT="○×ホームページ">○×ホームページ</A>

 横にテキストでウェブページ名が書いてあるのに、バナーのALT属性にも同じウェブページ名が書いてある。  これ、テキストブラウザで見ると

○×ホームページ○×ホームページ

 こんな感じに同じ名前が2回表示されることになるんですよね。音声出力の場合には2回同じ言葉が読まれることになります。
 はっきりいってこういうところにまで律儀に代替テキストを書く必要はありません。
 それどころかかえって読む人の迷惑になります。こういう時にはALT=""と中身を何も書かないで置くか、ALT="★"とでもしておきましょう。
 なお、テキストを書かずにバナー画像だけからリンクしてるときには、ちゃんとALT属性を書きましょうね。そうしないと画像を表示できないブラウザからは何のリンクだか判らなくなりますから。

HTML4.01の基本形

まずは基本形から

 このページでは基本的に、一応HTMLの入門書くらいは読んでいて、自分でHTMLをまがりなりにも書ける方を対象とさせていただきます。
 タグとは何か…も判ってない人は、まず初心者向けの本を買ってくるか、HTMLに関する入門ページがウェブ上に色々ありますので、そこでまず基本を勉強することをお薦めします。

 うちのページではW3Cによる正式な規格であり、スクリプト、スタイルシート、フレームなども使用できるHTML 4.01の書き方について説明することにします。

 HTML 4.01には3種類のDTD(文書型定義…HTMLのマーク付けの定義…いわゆる仕様書のようなもの)が存在します。

・ Strict DTD
 文字装飾、テキストの配置など、見栄えに関する要素を全て排除した厳格なDTD
・ Loose DTD
 以前のバージョンとの互換性を考慮したゆるやかなDTD  見栄えに関する要素を使ってもよい。ただし、いずれスタイルシートに移行するまで(スタイルシート対応ブラウザが普及するまで)の過渡期のための仕様なので、見栄えに関する要素は全て非推奨となっている。
・ Frameset DTD
 フレームの定義文書を書くためのDTD。  <BODY>の代わりに<FRAMESET>を使う以外はほとんど Loose DTD と同じ。
 それぞれに対応するHTMLは
 と呼ばれます。

 本コーナーでは、"HTML4.01 Transitional"を基準として書かせてもらいます。
 このコーナーの中で説明される文法は、特に断りがない限り"HTML 4.01 Transitional"での書き方を示すものだと思ってください。

HTMLの基本形

普通の基本形

<HTML>
<HEAD>
<TITLE>普通のHTML文書の例</TITLE>
</HEAD>
<BODY>
 本文の内容
 なんたらかんたらで
 あーたらこーたらで……
</BODY>
</HTML>

 はい、これが入門書などに書かれているHTMLの基本形です。
 ほとんどの人は最低限この基本形は守っていると思います。
 しかし出来れば以下のような形を基本形として使うようにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

<TITLE>普通のHTML文書の例</TITLE>
</HEAD>
<BODY>
本文の内容
なんたらかんたらで
あーたらこーたらで……
</BODY>
</HTML>

いくつか行が増えてます。簡単に解説します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

これは正確にはタグではありません。
マーク宣言と呼ばれるものの一種でDOCTYPE宣言と呼ばれるものです。
この文書がどんなDTDに従って書かれているものかを示します。
普通はこの通りに書けばいいでしょう。
この宣言は文書の1行目に書かなくてはいけません。

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
 この文書のがシフトJISで書かれたhtmlファイルであることを示しています。  もしシフトJISでなくEUCで書かれている文書なら
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=EUC-JP">
 JIS(ISO-2022-JP)で書かれているなら
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-2022-JP">
 となります。

 日本語で書いたページには、この3つのうちどれかを書くようにしましょう。
 使用する文字セットを宣言しないうちは、非ASCII文字をHTML中で使用してはいけないことになっています。
 だからタイトルに日本語を使いたいのなら<TITLE>タグより前に<META>タグでCHARSETを指定しておく必要があります。常に<HRAD>の直後一番最初に宣言するようにした方がいいでしょう。

 本来このタグはHTTPサーバが解釈して適切なHTTPレスポンスヘッダを生成するために用意されたものですが、ほとんどのサーバでは利用されてないそうです(^^;)。
 だから無駄なタグかというとそうでもなく。ネスケなどではブラウザ側が気をきかせてこのタグを見てくれるので、このタグをちゃんと書いておけば文字化けを防ぐことが出来ます。

 ネスケは日本語自動判別周りの実装がまずくてコード系を指定されてない場合にはよく文字化けを起こします(違うコード系のページ間を移動した際など)。このタグを書いて置けばまず大丈夫です。Shift_JISやEUC-JPがIANA(インターネットで使用されるさまざまなコード系を管理している組織)に登録される前に開発された古いブラウザ(ネスケ2など)ではx-sjisとかx-eucしか受け付けず、Shift_JISとかEUC-JPと書くと逆に文字化けすることもあるらしいですので注意しましょう。

 うちのページでは、それを承知の上で、Shift_JISを使っています。
 古いブラウザを切り捨てることになるのは判っているけど、そういう環境の人がどのくらいいるのか判らないし、x-sjisなどを使うと逆に文字化けするブラウザもあるらしいという話もあったので、どうせどれか一部は切り捨てなければならないのならIANAに登録されている正式なものを使いたいという個人的好みでそう決めました。今のままだと文字化けするのでx-sjisに変えてくれとかいう苦情を言われたりしたら変更しようと思っていたのですが、今のところそういう苦情は受けてません。だから当分このままの予定です。

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

 この文書中で使う標準のスクリプト言語がJavaScriptであることを示して います。JavaScript等のスクリプトを使用する場合には必ず宣言しましょう。
 スクリプト言語を使用しない場合はこのタグを書く必要はありません。

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 この文書中で使う標準のスタイル言語がCSS(カスケーディングスタイルシート)であることを示しています。  スタイルシートを使用する場合には必ず宣言しましょう。スタイルシートを 使用しない場合はこのタグを書く必要はありません。

フレーム文書の基本形

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="sakuin.html" name="left">

<FRAME SRC="honbun.html" name="right">

<NOFRAMES>
<BODY>
 フレームが使えないブラウザ用の表示内容
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

 フレームを使う場合の基本形はこんな感じになります。
 ほとんどの人は最低限この基本形は守っていると思います…といいたいところですが、間違ってるページが結構多いです(^^;)。
 どう違っているのかというと

 …とこんなところです。実をいうと私もしばらく前まで間違えて使ってました(^-^;)

 HTML4.01の仕様ではフレーム設定の文書では<HEAD>の後には<BODY>ではなく<FRAMESET>を使うことになってます。 そして<NOFRAMES>は<FRAMESET>の中に書かなくてはいけません。(ちなみにBODYは更にその中になる)
 なぜ間違えてるページが多いかというと、入門書や解説書自体に間違って書かれていることが少なくないそうで…それを見て書いているからでしょう(^^;)。
 HTML4.01の仕様では…といいました。 他のHTMLでは?と思う人がいるかもしれませんが、HTML2.0とかHTML3.2ではそもそもフレーム機能自体が定義されてません。 ネスケやIEの拡張タグとして使われてきたものがHTML4.0になって初めてW3Cでも正式採用されたものなんです。
 だから、もしHTML2.0とか3.2を名乗りながらフレームを使ったりしたら、それは文法違反ってことです。

 というわけで、以下のような形を基本形として使うようにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

<TITLE>フレーム文書の例</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="sakuin.html" name="left">

<FRAME SRC="honbun.html" name="right">

<NOFRAMES>
<BODY>
フレームが使えないブラウザ用の表示内容
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
またまた簡単に解説します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
フレーム指定文書のDOCTYPE宣言です。

<FRAMESET>を使う文書の場合のDOCTYPE宣言は"HTML 4.01 Frameset"になります。
 なお、<FRAMESET>タグのない文書に対して"HTML 4.01 Frameset"と宣言するのは間違いです。
 フレーム指定がない文書はフレーム定義文書ではなくただのHTML文書ですから、 フレームの中で使うからといって、フレーム定義のない(<FRAMESET>タグを使っていない)文書にまで "HTML 4.01 Frameset"などと宣言しないようにしましょう。

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
 これはHTML 4.01 Transitionalのときに説明したので解説は省略(^^;)。

 ごめんなさい。以下は未稿です(^-^;)
 今後の更新予定は不明です。気が向けば続きを書くかも(^-^;)(^-^;)(^-^;)


Email:u_akira@nifty.com

トップページへ戻る