悪いＨＴＭＬの書き方

まず，以下を見てください。

-------------以下，悪い見本-----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
<title>
悪い見本
</title>
<STYLE TYPE="text/css">
     body { background: black; color: white }
     .center { text-align: center }
     .right { text-align: right }
</STYLE>
</head>
<body>
<div class="center">
<img src="title_logo.png" alt="TitleLogoImage" width="601" height="67">
</div>
<p class="right">ダメーズ　専用サイト</p>
<hr>
<!-- ここから本文 -->
・・・・
<!-- 本文ここまで -->
</body>
</html>
---------------ここまでが悪い見本-------------------

ここまで書ければ大したものです。HTMLのDTDを読んで十分勉強したのでしょう。
しかし，この見本は一見正しくマークアップされているように見えますが，とんでもないシロモノです。こういうHTMLを書く人は，新しい技術が出てくると将来性も考えず飛びつく技術オタクに多いようですが，日本語というものを理解出来ない人です。

では，何がいけないのかを解説しましょう。

文書型宣言は正しく書こう

文書型宣言（またはDOCTYPE宣言）ってのは，事例の最初の行に書いてある<!DOCTYPE HTML～>って奴です。
この見本の場合は，自分が書くのに使ったＨＴＭＬのバージョン，より正確には文書型定義（以下ＤＴＤと省略することあり）を示すものだと考えてもらって問題ないかと思います。

DTDとは，HTML4.01仕様書翻訳によると「マーク付け構成素のシンタクスを定義する」もので，文書型宣言の書き方は，DTDによって書き方が決まります。
例えば，上記例の場合HTML4.01仕様書翻訳では，「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">」と書くように規定されています。

ところが「悪い例」では，４．０の後ろに一文字スペースを入れてしまっています。これではせっかく書いたＤＴＤも意味がありません。
細かい書き間違いには注意しましょう。

なお，これは間違いではないのですが，ＨＴＭＬ４．０は既にＨＴＭＬ４．０１にバージョンが上がっています。
これから書く時は４．０１で書いたほうが良いでしょう。

文書型定義について余談。

ＩＥやＮＮ・ＮＣといったＷＷＷブラウザには，ＨＴＭＬ４．０１では定めていない特有のタグが存在します。
<BLINK>（文字点滅）や<MARQUEE>（文字スクロール）といったものがそうです。

ところがこれらを含めたＤＴＤは現在のところ決まっていないようです。これは各ＷＷＷブラウザメーカーが定めるべきものだと思うのですが・・・
Microsoft製のあるソフトを使って作成したＨＴＭＬ文書には，自動で変な文書型定義が挿入されるようですが，これがＩＥ用の文書型定義，というわけではないようです。

そんな訳で，これらを使うときはあえてＤＴＤを書かない方がかえって正しいものと私は思います。上記のＨＴＭＬ４．０１用のＤＴＤを書いては明らかに間違いですから。

上記のような例も含めて，私のポリシーとしては，「ＤＴＤを書くからには正しいＨＴＭＬを書く，正しいＨＴＭＬを書かない（判らない）ときはＤＴＤも書かない」，というのがむしろ潔いと思います。（このへん異論もあるかと思います。有識者の方，どうでしょう？）

なお，文書型定義の後半に書かれているアドレスは，文書型定義の原本ファイルの位置を指定しますが，必ず書かなければいけないものではありません。私は，文書の位置が変わっていないかの確認なんて，する気もさらさらないので書いていません。
というか，書いてる人は，ちゃんと確認して書いてるんだろうか。ちゃんと確認しとかないと，間違ったＤＴＤとなってしまいます。アドレス書いている方は要注意。

ＨＴＭＬはMarkup Languageです。

ＨＴＭＬで文章等のコンテンツにつけているタグは，その文章等の内容に意味付けをするものです。
つまりは，意味が無い要素や，見栄えを決めるためのタグは本来のＨＴＭＬで指定するものではありません。ＨＴＭＬ４．０１（４．０でも同様）では，見栄えはスタイルシートで整えるものとしています。

とはいえ，いままでの経緯から見栄えを決める<FONT>や<B>が禁止されている訳ではありません。しかし，使う場合は移行用文書型定義（Transitional）を使うことになっています。

（参考：<B>についてHTML 4仕様書邦訳計画で配布されている「HTML4.01仕様書邦訳」１５．２．１から引用）

この節のHTML要素は、フォント情報を指定する。このすべてを推奨しないわけではないが、スタイルシートを使うことの方を推奨する。

（参考：<FONT>についてHTML 4仕様書邦訳計画で配布されている「HTML4.01仕様書邦訳」１５．２．２から引用）

FONT要素とBASEFONT要素は推奨しない。

公式の定義については移行型DTDを参照されたい。

また同様に，ＨＴＭＬ３．２ではＯＫだったALIGN属性も，ＨＴＭＬ本来の形ではないとされています。

（参考：ALIGN属性についてHTML 4仕様書邦訳計画で配布されている「HTML4.01仕様書邦訳」１５．１．２から引用）

推奨しない。この属性は、周囲との関係における当該要素の水平配置を指定する。可能な値は次の4つ。

left: テキストは左揃えでレンダリングされる。

center: テキストは中央揃えでレンダリングされる。

right: テキストは右揃えでレンダリングされる。

justify: テキストは左右マージンに揃えられる。

デフォルト値は基本のテキスト方向に依存する。左から右のテキストではデフォルトは align=leftだが、右から左のテキストではデフォルトは align=rightである。
推奨しない例:
次の例は見出しをキャンバスの中央に揃えている。
<H1 align="center"> 木を彫るコツ </H1>
CSSを使うと、例えば次のようにして同じ効果を上げることができる。
<HEAD>
 <TITLE>木を彫るコツ</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1>木を彫るコツ </H1>

この「悪い例」の場合，FONT要素やALIGN属性は使っていません。指定している文書型定義が移行型ではない（strict）のでこれは当然です。
しかし，<div class="center">というのと，<p class="right">というものが書かれています。

DIV要素は，指定が決まっていない内容について，作成者が自由に意味付けを行うための汎用の要素です。

（参考：<DIV>についてHTML 4仕様書邦訳計画で配布されている「HTML4.01仕様書邦訳」７．５．４から引用）

DIV要素とSPAN要素は、id属性及びclass属性と併用することで、文書に構造を付加するための一般機構を提供する。各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示することはない。従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。

たとえば，引用文を書くときは<Q>や<BLOCKQUOTE>を使うとか，強調したいときは<EM>や<STRONG>を使うといった，意味付けをするときの書き方が決まっている場合は問題ありません。
しかし，「ここは例文を書きたい」とか，「ここに書く麻雀の規則には意味を持たせたい」という場合の書き方は，ＨＴＭＬ4.01では決まっていません。
そういうときに，DIV要素を<DIV class="example">とか，<DIV class="majang">といった使い方をして意味を持たせます。

また，「ここにサブタイトルを書きたい」なんてときに，<P>にCLASS属性をつけて<P class="sub-title">といった使い方をすれば，他のP要素の文章と違う意味を持たせることもできます。

つまりは，class="～"の「～」の部分には，そのコンテンツにつけた意味付けが分かるものを指定しなければいけません。

ところが，「悪い例」では「center」（中央）とか「right」（右）といった見栄えに関する名前を短絡的につけています。もちろん，文章が野球の解説で"Center"や"Right"に関する記述や解説であれば問題ありませんが，この場合はHTMLといものを，見栄えを指定するための下準備程度にしか考えていない＝日本語，というか文章を理解できないで，技術だけ覚えている，としか思えません。

「悪い例」の<P class="right">は<P class="sub-title">として，「サブタイトルだから右寄せします」ということで，スタイルシートで見栄えを規定すればいいわけです。（実際「悪い例」でも，見栄えはスタイルシートで規定しています）

さらに，「悪い例」の<div class="center">に関しては<H1>で何ら問題がありません。
タイトルなのですから。

代替テキストは意味が無ければ意味が無い。

IMGタグ等につけるALT属性について，「HTML4.01仕様書邦訳」１３．８から引用。

この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。代替テキストの言語は、lang属性で指定する。

中略

代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。

中略

代替テキストは非常に役立つものであり得るが、取り扱いには注意しなければならない。著者は次の指針を守る必要がある。

ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと。例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、alt="赤い丸"などとするのは、不適当である。こうした状況では、代替テキストは空文字列("")とする必要がある。何にせよ、著者は、ページの整形に画像を用いることを避けるようにすべきである。その代わりにスタイルシートを用いる必要がある。

例えば「ダミーのテキスト」などの無意味な代替テキストを指定しないこと。ユーザが不快なだけでなく、これを音声や点字に変換しなければならないユーザエージェントの処理速度を低下させる。

この「悪い見本」の場合，「悪い見本」という文字を描いたイメージファイルがタイトルとなっているのですが，ALT属性に指定しているテキストは「TitleLogoImage」です。
これでは，何らかの事情で画像を取り込まなかった場合，このサイトのタイトルは「TitleLogoImage」という様に映ってしまいます。（事実，私のLynxではそう見えます）
さすがに不快にはなりませんが，なんのサイトだか全く伝わりません。

事例の場合は「alt="悪い見本"」と，イメージファイルの内容を指定するべきでしょう。

<HTML>にはLANG指定をしよう。

これはどうでもいいことなんだけどさ。以下，引用「HTML4.0仕様書邦訳」８．１から。

中略

著者が提供する言語情報が大いに助けとなる局面には、次のようなものが含まれる。

検索エンジンの補助

音声合成装置の補助

高品位タイポグラフィーのための異体グリフ選択についてユーザエージェントを援助

引用符選択についてユーザエージェントを援助

ハイフネーション、リガチャ、スペース調整に関するユーザエージェントの決定を援助

スペルチェッカや文法チェッカの補助

要は，日本語で文章書くンなら，初めの方に書く<HTML>は，<HTML lang="ja">って書こうって事。

ただし書かなくても実害ありません。いま，この属性を使って何らかの処理を行っているＷＷＷブラウザってないと思うから。
まぁ，今後のためには書いといた方がいいかと思います。大した手間じゃないし，いいでしょ。