最初にお断りしなくてはいけないのが、こんな記事を書いている私でさえ、まだこのサイトに「正しくないHTML記法」のページを半分以上残しています。とはいえ、今後のメンテナンス性のことも考えて、少しずつ正しいHTML記法に移行中です。最初に間違ったHTML記法を覚えてしまったのを、後から直すのは大変なのを実感しています。
そもそもHTMLとは、DTPソフトなどと違って、A4の大きさの用紙を用意して左から何センチのところにどの線を引く、その何センチ右側に何ポイントの大きさで文字を書く、みたいな、物理的なレイアウトを記述する言語ではありません。あくまでも、「この部分は見出し」「この部分は段落」「この部分は引用文」「この部分は箇条書き」などといった、文章の構造を記述する言語に過ぎません。
その文章の構造にのっとってさえいれば、User Agent(IE、Netscapeのようなブラウザや携帯等)は、どんな物理的レイアウトで出力しても構わないことになっています。例えば、PC用のブラウザは見出し部分を大きなフォントで表示するかもしれませんが、携帯は大きなフォントの代わりに太字を使うかもしれません。
これはちょうど、小説を書く事にたとえられます。例えば、夏目漱石は「坊っちゃん」を書く時に、「ページの右上端から何ミリずつのところから、何号の大きさの活字を使って、一行何文字分で一ページ何行に収まるようにして、そこから『親讓りの無鐵砲で小供の時から損ばかりしてゐる。……』と入れる」などと原稿用紙に書いたでしょうか？ あるいは、「実際に活字になる時は一行２２文字だが、原稿用紙は２０文字分しかないから、下に入らない２文字分はもう一枚の原稿用紙を貼り合わせてそこに書こう」なんてことをしたでしょうか。
いいえ、あくまでも小説の作者がすべきなのは文章を見出しや副見出し、段落などの構造（文章の論理構造）に従って書くことであって、体裁は出版社とか印刷屋が決めることです。実際、同じ夏目漱石の「坊っちゃん」でも、どの出版社が出しているかとか、単行本サイズか文庫本サイズかによって体裁は違いますし、全集では二段組みになっていることもあります。電子ブックなら横書きになっているかもしれません。
つまり、同じ「坊っちゃん」の原稿も、「新潮文庫」「角川文庫」「夏目漱石全集」「電子ブック」の各体裁に流し込むと、違ったデザインになります。ここで小説家の書いた原稿に相当するのがHTML、体裁に相当するのがスタイルシートです。ホームページの場合は、ブラウザ等によってデフォルトのスタイルシートが決まっています。あるいは、スタイルシートを自分で作ることもできるので、原稿が流し込まれた時に別の体裁で表示させることもできます。
もう少し小説のたとえ話を続けるなら、なるほど普通の小説ならこれで大丈夫です。しかし、もっと凝ったデザインをこちらで指定したい場合はどうでしょう。例えば写真やイラストなども取り入れたカラフルな雑誌記事を作るとなると、これでは困ります。文章を構造に従って書くだけでなく、文字の大きさや書体、文章や画像の配置などをきちんと細かく指定する必要があります。
この場合、原稿用紙一枚（またはつなぎ合わせて数枚）を雑誌の一ページに見立てて、ちょうど印刷されるのと同じイメージで原稿を作るのでしょうか。いいえ。本来原稿用紙とは、あくまでも文章のためのものであって、細かなレイアウト指定のためのものではありません。そこで、原稿用紙とレイアウト用紙を両方使い、原稿用紙には本文、レイアウト用紙は一枚を雑誌の一ページに見立てて、文字や画像のレイアウトを指定します。（ただし、文字の書式指定くらいなら原稿用紙にも書かれますが、その場合も、印刷する本文は黒色、書式指定は赤色を使って書く決まりになっています。）
HTMLとスタイルシートの関係も、ちょうど原稿用紙とレイアウト用紙に似ています。HTMLファイル中のそれぞれの段落や画像をどう配置するのかを、スタイルシートファイル、またはHTML中に埋め込んだスタイルシート定義で指定すればいいのです。
こんなに便利なスタイルシートなのですが、本格的に普及してきたのはつい最近のことです。スタイルシートが使われる以前は、HTMLに物理レイアウトを指定するタグも色々あって、それを使う方法が一般的でした。しかしこれは元々物理レイアウトの記述を想定してないHTMLで、物理レイアウト指定を使えるよう拡張したものであり、少々無理がありました。
例えば文章で「見出し」「強調」「引用」部分がある場合、HTMLでは"h1〜h6", "em", "blockquote"を使って記述することができます。しかし、ブラウザの持っているデフォルトのスタイルが気に入らない場合はどうでしょう。例えばIEではh1はゴシック体の大きな文字、emは斜体、blockquoteはインデント表示になりますが、これではダサい、見出しは枠付きで中央揃え、強調部分は一回り大きな赤い文字、引用は枠付きで斜体にしたい、と思ったら、h1やemやblockquoteは使えません。本来はそのタグを使うべきなのに、あえて避けて、fontタグで物理レイアウト指定せざるを得ませんでした。
結局、"h1〜h6", "em", "blockquote"のような文章の論理構造を記述するためのタグが、ただ「ブラウザのデフォルトのスタイルがダサい」という理由で使われなくなり、代わりに物理レイアウトのためのタグが濫用される結果となったのです。
また、ブラウザのデフォルトのスタイルに依存してしまう傾向もありました。例えば、どうせIEとNetscapeで表示できればいいやと、h1〜h6は文字の大きさ変更、blockquoteはインデント表示、pは２行改行の目的に誤用することがありました。
これは本来のHTMLの姿ではありませんでした。そこで、HTMLはバージョン4.01以降、文章の論理構造を記述するための言語という原点に立ち返り、物理レイアウトは「スタイルシート」を使って制御するという方針に変わりました。これは以下のようなメリットがありました。
私がかつて書いていた（今でも修正してないページにまだ残っているかもしれない）記法や、時々見かける記法から、幾つかの例を挙げます。
元々<h1>〜<h6>タグは見出し・副見出しのためのものであって、文字の大きさを変えるという意味ではありません。
元々<p>タグは段落のためのものであって、改行の意味ではありません。
それぞれ引用やリストのためのものであって、インデントの意味ではありません。
問題外です。そこできちんと改行されたり、中央揃えになっているのはあなたのパソコンだけですよ、と言いたくなります。それが本当かどうか説明す
るために、この段落はあえてその間違った仕方で書いてみました。試しに、ブラウザのウィンドウの大きさを変えてみてください。変な場所で改行されて見
苦しいでしょう。ワープロソフトみたいに紙に印刷するのが最終結果なら、そんな書き方でもまだ許せますが、ホームページの出力対象はありとあらゆる
パソコンの画面です。画面が狭いパソコン・広いパソコン・フォントサイズの大きいパソコン・小さいパソコンとあります。やや古い書き方では
<center>〜</center>とか<div align="center">〜</div>と書くことがありましたが、できればスタイルシートを使用した方がよいでしょう。CSSファイルに
.center {text-align :center;}という一行を入れた後、<p class="center">〜</p>などとすれば中央揃えになります。ホームページ作成ソフトでも、段落を中央
揃えするツールバーがちゃんとあるはずですが……？
問題外です。
例えばあなたがYahoo!JAPANのサイトをデザインすることになったとします。「自分の1280x1024ピクセルのモニタでは、現状のデザインだと左右の無駄な空間が空き過ぎてもったいないので、２段じゃなくて５段の段組にして、上のメニューにもボタンを六つから十数個に増やしてみよう」などと考えて、1280x1024ピクセルのモニタにびっしり入るようにデザインしてはいけません。このデザインで使い勝手が良いのはあなたのパソコンだけです。800x600ピクセルや640x480ピクセルのPCでは画面からはみ出てしまいます。
ホームページをあなたのパソコンだけで見るものにしたければ、どうぞ御勝手に。せっかく作った自分のホームページ、できるだけ多くの人に見てもらいたいでしょうに。「色々な検索エンジンに載せて知名度を上げる」ことも確かに大切ですが、「800x600ピクセルのPCやIE以外のブラウザをインストールした他人のPCでも、大きな障害なく見られる」ことにも少しは気を遣ってください。
1996年頃までのパソコン雑誌でこの記法をよく見かけましたが、今では古い記法です。<p>と</p>の中に段落を記述するのが正しい記法です。
例えば<h1>題名<p></h1>と書く事はできません。逆に<p><h1>題名</h1></p>も間違っています。h1〜h6要素とp要素は入れ子にして使う事ができません。ブロックレベル要素には入れ子にして使えないものが多いので注意が必要です。
文章は<p>要素などの中に入れて書かなくてはなりません。
titleは必ず指定することになっています。あえて題名無しにしたい時でも、<title></title>と書きます。
alt属性には、画像が表示されない時に代わりに表示したい文を指定します。これがないと、画像を表示出来ないUser Agentでは何の事かわからないし、画像をリンクボタンに使っている時は、遅い回線やサーバが混んでいて画像がなかなか表示されないと、どのボタンを押せば良いのか困ってしまいます。あえて名無しの画像にしたい時でも、alt=""と書きます。
昔はシフトJISはHTMLの規格に正式に定められていなかったので、x-sjisと記述していましたが、今ではshift_jisと書く事になっています。
ExcelをDTPソフト代わりに使うようなものです。もっとも、すべてが間違っているとも言えません。特に、表の意味もちゃんと持ったものは問題ないでしょう。例えば私はサイトのメニューに表を使っていますが、列が各項目、行が各レコードという、れっきとした表にもなってます。
フォントサイズや色、背景色等を変更したい時は、<body>タグの色指定や背景色指定や<font>タグよりもスタイルシートを使う方が柔軟性があります。デザイン重視でサイトを構築しているにしても、ファイルを一つ入れ替えるだけで、サイト全体のフォントや配色を入れ替えるなどという芸当は、<body>タグや<font>タグにはできませんから便利です。
他のタグやスタイルシート等で代用します。特に気を付けるべきなのは：bgsound, blink, embed, marquee, multicol, nobr, plaintext, xmp
特に気を付けるべきなのは：u, strike, s, font, basefont, center, applet