Section 14 : HTML の文法(1)

 これまで HTML の文法に立ち入った説明をしてこなかったが,正しく HTML を書くというのも WWW パブリッシングに必要なスキルである。たとえどんな魅力的なサイトでも,HTML が間違いだらけであると,不具合などのアクセシビリティの低下を招き,ひいてはサイト全体を疑われかねない。

要素とタグ

 タグは要素の存在を明示的に示す“目印”であるが,タグに書かれる要素名は大文字・小文字の区別がないことは以前述べた。

要素の入れ子構造。範囲がクロスしてはならない。
図 14.1 [D]

 要素は“ここから〜ここまで”のかたちで,その中にまた要素を,タグを使って書くことができる。HTML 文書自体が“ここから〜ここまで”の中にいくつもの“ここから〜ここまで”が入っているかたちをしている。

 このとき,あらゆる“ここから〜ここまで”の範囲はクロスしてはならない。つまり,<HTML> 以外のどんな要素も,その外側の要素の範囲にすっぽり収まっていなくてはならない。

 これを防ぐ手段は,まず自分が文書のどんな役割を記述しているのかをつねに気にとめ,次に書くべき終了タグは何かということに注意することである。

 HTML の誤りは,多くの場合ブラウザが適当な解釈をしてそれなりに表示させてしまうから,なかなか気づかず,だからといって放っておくべきものでもない。表示さえうまくいけば結果オーライで公開してしまう人も多いが,すべてのブラウザが誤りを適当に解釈するとは限らないのだし,だいいち,見た目で OK というのは HTML の基本的な考えを無視してしまっているということである。

属性値

 属性値について基本的なことを復習しておこう。

 属性値はというと,属性によって大文字小文字を区別するのかしないのかは異なってくる。一般に,キーワードを与えるものには大文字小文字の区別はない。また,MIME タイプにもない。そのほかは区別するものが多く,URI を与えるとき,CLASS,ID 属性を与えるときはとくに注意する必要がある。

 参照用(<META><PARAM> 以外)の NAME 属性についてはやっかいで,<A> の NAME 属性は大文字・小文字の区別をするが,ほかの NAME 属性はその区別をしない。NAME 属性は文書中で一意を保証されなくてはならないことも注意しなくてはならない。NAME 属性については,大文字小文字を区別しないと同じになってしまう値は与えないほうが無難だろう。

 属性値は基本的に引用符でくくるが,属性値が半角の数字(1,2,...,9),英字(A,B,...,Z,a,b,...,z),ハイフン「-」,ピリオド「.」,アンダースコア「_」,コロン「:」のみからなるときは省略してもよい。だが,できるだけ引用符でくくっておくとよいとされる。したがって,

<IMG SRC="gif/hexane.gif" ALT="Studio HEXANE" WIDTH="156" HEIGHT="32">

は次のように書いてもよい。

<IMG SRC="gif/hexane.gif" ALT="Studio HEXANE" WIDTH=156 HEIGHT=32>

 ここで,WIDTH,HEIGHT 属性は数字のみだから,省略の条件に合致している。いっぽう,SRC 属性は半角スラッシュ「/」を含み,ALT 属性は半角スペースを含んでいるから引用符は省略できない。

 属性値の引用符を省略してはいけないときに省略してしまう HTML をかなり目にする。WYSIWYG なソフトが吐き出す HTML もこの規則を満たさないものがあるようだ。

 XHTML では,属性値をくくる引用符はいかなる場合でも省略できない。

 それから,属性値が引用符を含む場合はどうしたらよいのだろうか。

 属性中では二重引用符「"」を &quot; で参照できる。また,引用符をくくるのは二重引用符である必要はなく,単一引用符「'」でも構わない。単一引用符で属性値をくくった場合には,その中でそのまま二重引用符を使うことができる。逆に二重引用符でくくったら,その中でそのまま単一引用符を使うことができる。

<IMG SRC="tags.gif" ALT="&quot;Tags&quot; are NOT equal to &quot;elements.&quot;" WIDTH="320" HEIGHT="240">
<IMG SRC="tags.gif" ALT='"Tags" are NOT equal to "elements."' WIDTH="320" HEIGHT="240">

いずれの例でも,ALT 属性の値は "Tags" are NOT equal to "elements." になる。

コメントアウト

 コメントアウトは,

<!-- ... -->

であり,このかたちで覚えていただいていっこうに構わないのであるが,少し詳しく解説しておこう。

 実は,コメントアウトは“<! ... >”と“-- ... --”が合わさってできたものである。このうち前者は宣言という。この宣言のかたちはあとで出てくるので記憶の片隅にでもとどめておいていただきたい。後者がコメントを表している。したがって,コメント中に 2 つ以上の連続したハイフンを入れてしまうと,そこ以降が宣言と解釈されるおそれがある。コメント中に連続したハイフンを入れるべきではないというのはこういう理由による。

 コメントの書き方であるが,コメント開始の 4 つの記号“<!--”はスペースを入れずに一気に書かなくてはならない。ちなみに,コメント終了の記号“-->”は“-- >”と空白が入ってもよい。

 コメント中で改行しても(コメントが複数行にまたがっても)構わない。

 いくつか HTML の文法規則をあげてみたが,これらはむしろ,HTML の母体となった SGML のものである。