それでもHTML


近頃私を虜にしているもの。それはHTMLをチェックしてくれるサイトである。

AnotherHTML-lint gatewayというのがそれだ。自分のページのHTMLが正しく書かれているかどうか、一枚一枚チェックしてもらうのだ。つまりは、HTMLの文法の添削サイトというわけだ。

すでにサーバに上がっているページをアドレスで指定してもいいし、デスクトップにあるのを参照もさせられる。打ち込みの途中なのを直接ペーストしてチェックしてもらうこともできる。

実は、HTMLに関しては、かなり自信があった。

なにしろツールが使えないから、自分でぽつぽつ打ち込むしかない。写真は嫌いなので大きな画像を取り込む苦労はない。壁紙も薄いのを一枚か、部分的にもう一枚重ねるくらいしかしない。フラッシュは私のパソコン(PowerBook5300ce)では下手するとクラッシュするから、使わない。下のバーに文字が流れて出てくるのも、ビルの横腹についてる広告みたいで不細工だから使わない。

つまり、私のページはちっともインタラクティブでもアクティブでもないのだ。センシティブでもないかも知れない。だいたい、タグの数そのものがとても少ない。

要するに、間違おうにも間違いようがない、のだ。

だがしかし。チェックの結果は惨憺たるものだった。

なんと、マイナス130点だった。満点はプラスの100点である。ということは、230点減点ということなのだ。

なんでどうして。チェックの結果をしげしげと読む。どうして減点なのか、どうするのが望ましいかが、詳細に書いてある。何しろ減点が多いので、詳細が出てくるのにも時間がかかった。

まず、一行目。

「最初の記述がDOCTYPE宣言ではありません。」

宣言。HTMLって、宣言しなきゃいけないものだったのか。DOCTYPEって、お医者さんのタイプか。まさかな。タグ辞典を繰ってみる。

<!DOCTYPE HTML PUBLIC うんぬん>というのが、それだった。 ! おっと、HTMLがどの仕様だったかはっきりさせとかないとな、ということらしい。HTML4.01を使うのが望ましいのだそうだ。そして、それは三種類に分けられる。

まず、Transitional。英和辞典英和辞典。移り変わる、過渡期な。暫定的なもので、それほど厳しい文法制限のないもの、という意味になる。これを宣言すると、重大な支障のない程度に文法を守ってます、という宣言になる。

対して、Strict。厳格な、厳しい。きっちりかっちり文法守って書いてます、という宣言になる。

最後はFrameset。フレームを使うページはこれ。

だから、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">と最初に書き込むことにした。次。

「<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="〜">でCHARSETが指定されるより前に非ASCII文字が含まれています。」

charsetは文字コードのこと。JISとかシフトJISとかISOなんとかのことだ。単に日本語といってもたくさんある。ああ、それよりなにより、日本語で書くということさえ宣言していなかった。こうする。

<HTML LANG="ja">

<HEAD>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;charset=Shift_JIS">

これで、このページは日本語でシフトJISで書いています、というのを初めて言ったことになる。やっと、これ以下に日本語を書くことが可能になる。

保存。どうだろうか、すこしはましになっただろうか。再度挑戦。

・・マイナス123点。ほとんど直ってないじゃないか。

「'&××;'は不明な実体参照です。」

実体参照? ? あ、分かった。HTMLで直接使えない特殊な文字を代わりに出すやつだ。それには&を使うのだけれど、それ以外で中途半端に&を使った文字列を入れたから、こうなったのだ。

様々なサイトで、「FAQ」というのはよく目にするが、「Q&A」というのがほとんどないのはそのせいだろう。どちらも同じような意味で、「Q&A」の方がよく知られているのに不親切だなあ、と思っていたのだけれど、そういう事情があったのだ。

「<TBODY>の前に不明な文字があります。」

なにそれ。<TBODY>って。うううーん、たぶん、<TBODY>は<TABLE>のBODYだ。それでもって、<THEAD>や<TFOOT>は、HEADやFOOTのことだ。

TABLEを使っている他のページをコピーして、試してみた。

見事、その通りだった。

<TABLE>と</TABLE>の中に、<THEAD>と</THEAD>、そして<TFOOT>と</TFOOT>、続いて<TBODY>と</TBODY>を入れると、本体のBODYの上下に、綺麗にHEADとFOOTが出てきた。FOOTの中身は毎回あまり変わらないから、これでかなり作りやすくなる。CAPTIONで挟むのより、ずっと見やすい。ふふふ、まいったか。

だがしかし。ネットスケープはそうは問屋が卸さなかった。TBODYなんか知るもんかよ、とそのまんまの順番で表示してしまったのだ。つまり、HEADの次にすぐFOOTが来てしまった。それじゃあ意味がない。

こういうことは、実はしょっちゅうある。エクスプローラが白く表示したものをネットスケープで見たらショッキングピンクになっていて、よく見ると色の名前がおかしかった。

最初の頃は、なんで同じように表示しないんだよ、といらいらしていた。けれど、よく考えてみると、それがエラーのチェックにもなるのだ。違う表示がされるからこそ、ソースの確認をしようという気持ちも起こる。いつもいつも同じブラウザでばかり確認していたら、分かる間違いも分からないのだ。

「<TABLE>にはSUMMARY属性を指定するようにしましょう。」

音声認識のためには、TABLEの中に何が書いてあるのかを示す必要があるのだそうだ。同じように使われるものとしては、<TH>や<TD>の内容を簡略化して表示するためのABBRというタグがある。きちんと入れておこう。

なるほど、と思ったのは次のもの。

「<A>のアンカー名'××××'はNN行目にもありました。」

なんで。アンカー名というのは、<A HREF="cyotto.html">ここ</A>の「ここ」のことだ。

解説を読んでみた。ここ、というのはついつい使いがちだけれど、あまり視力が強くない人が画面を追っていく場合、アンカー名だけを辿って読んでいくことがあるのだそうだ。それがアンカー名が全部「ここ」だったり「こちら」だったりすると、何がなんだか、とても分かりにくくなる。

だから、アンカー名には具体的なリンク先の情報を入れるべきなのだ。画像をアンカーにしている場合には、ALTでリンク先の説明をしておく。

保存。ちょっとはましになったかな。

マイナス78点。ああ、まだまだ。こんなことしてるもの。

<TABLE><TR><TD>箱の中身はこんなもの

</TR></TD>

</TABLE>

TRは行、TDは行の中身。だから、TDは必ずTRの中で始まって、終わらなければならない。なのに、上の例ではTRが先に閉じられている。

こういうのは、エラーメッセージが繰り返されるので大きな減点になる。


ほとんどすべてのエラーメッセージを読みながら直していった。そして、ついに百点になれる時が来た。

けれど、完全な満点ではない。スタイルシートが推奨されている文字の色指定をタグでしたりしているのが、減点はされないがピックアップされている。

でも、スタイルシートには限界がある。タグ以上に環境に左右されやすいのだ。なるべくだったらスタイルシート、というのは頭に入れておきながら、レイアウトに激しい影響のないところだけ、スタイルシートでしか指定できない時にだけ、使うことにした。

まあそれにしても、勉強になった。どれとどれが組になっていて、どれの中にはどれを入れなければならないか、それらにどういう用途があるのか、基本的なところから応用まで、再確認に再認識。

ああ、やっぱり、時間はかかっても手打ちは楽しい。ソース作りは楽しい。

次へ

menu


Copyright (C) 2001 shishow