この記事は2005年頃の状況を基準に書かれたものです。汎用的なブログツールが普及した現在、この記事の内容は風化し、役目を終えたと言って良いと思います。
まずは以下のマーク付け例を見てください。テーブルレイアウト+物理マーク付けの典型的な例です。
<table>
<tr><td><font size="7">颱風情報</font></td></tr>
<tr><td>日本の南海上に発生した<font color="red">颱風18号</font>は、今後徐々に勢力を強めながら北上し、
場合によっては<font color="red">来週明け頃日本に接近ないし<b>上陸</b></font>する虞があります。
今後の颱風情報にご注意下さい。<br></td></tr>
<tr><td>なお、明日は西日本では<font color="red">晴れ</font>、東日本で<font color="red">は曇り時々雨</font>の見込みです。
気温は何れも<font color="red">平年並み</font>でしょう。<br></td></tr>
</table>
これは、現在Web上でよく用いられるHTML文書の記法です。しかし、この記法にはある重大な欠点を含んでいます。それを理解するために、次のマーク付け例を見てください。
body { background:silver; margin:0 10%;} #背景色は銀色で、本文内は左右に10%の余白を設ける
h1 { font-size:xx-large; } #見出しは一番大きな文字で
p { line-height:200%; } #行間は2行分空ける
em { color:red; } #強調部分は赤色
em em { font-weight:bold; } #強調部分中のさらなる強調は太字にする（赤色はそのまま）
<h1>颱風情報</h1>
<p>
日本の南海上に発生した<em>颱風18号</em>は、今後徐々に勢力を強めながら北上し、
場合によっては<em>来週明け頃日本に接近ないし<em>上陸</em></em>する虞があります。
今後の颱風情報にご注意下さい。
</p>
<p>
なお、明日は西日本では<em>晴れ</em>、東日本では<em>曇り時々雨</em>の見込みです。
気温は何れも<em>平年並み</em>でしょう。
</p>
こちらはHTMLとCSSを組み合わせた例です。
これを見て、まず最初に気づいて欲しいのは、デザインに関する記述部と本文に関する記述部が分離されているという点です。これによって、本文を変更したい時と、配色や行間などのデザインを変更したい時と、お互いが錯綜せずにすっきりとした状態で作業が出来ることです。
前の例では、テキストを直したい時にfont要素やtable要素が邪魔になり、逆にtable要素やfont要素を直したいときにはテキストが邪魔になるのです。ちょっと修正したい時にでも必要なtd要素やtr要素を長いテキストの中から見つけ出さなければならないというのは、非常に効率が悪いことです。
一方、「これは強調]]>」のように、色や大きさを具体的に指定するのではなく、その理由（意味）を指定するマーク付けの手法を論理マークアップと呼びます。普通に、テキストは段落。強調は強調とマーク付けし、レイアウトは後でCSSでまとめて指定した方が、メンテナンス性は断然向上するのです。
上と似たような話ですが、普通Webサイトを長く更新していると、そのうちにサイト独自のレイアウトの「テンプレート」のようなものが出来上がってきます。何故なら、一々ページを作る毎に一からtableを組むのは非常に面倒だからです。
しかしながら、テーブルレイアウトや物理マークアップの場合、気分によって「ちょっとサイト全体の模様替えでもしようかな」と思った時、テンプレートを使った全てのページのtable要素やfont要素を全部書き直さなければなりません。ああ、考えるだけで面倒。スタイルシートギャラリーを見てください。中のHTMLには殆ど触れることなく、レイアウトを劇的に更新することが出来ます。気分屋な私には本当に便利な話です。
上の例で言えば、正しいHTML+CSSを使った例では、HTMLファイルと、CSSファイルを以下のように分割して管理することが出来ます。そして、text.htm内のlink要素の記述を書き換えるだけで、ページのレイアウトを一気に変更することが出来るのです。
<link rel="stylesheet" href="style.css">
<h1>颱風情報<h1>
<p>
日本の南海上に発生した<em>颱風18号</em>は、今後徐々に勢力を強めながら北上し、
場合によっては<em>来週明け頃日本に接近ないし<em>上陸</em></em>する虞があります。
今後の颱風情報にご注意下さい。
</p>
<p>
なお、明日は西日本では<em>晴れ</em>、東日本では<em>曇り時々雨</em>の見込みです。
気温は何れも<em>平年並み</em>でしょう。
</p>
body { background:silver; margin:0 10%;} #背景色は銀色で、本文内は左右に10%の余白を設ける
h1 { font-size:xx-large; } #見出しは一番大きな文字で
p { line-height:200%; } #行間は2行分空ける
em { color:red; } #強調部分は赤色
em em { font-size:large; } #強調部分中のさらなる強調は文字を少し大きくする（赤色はそのまま）
HTMLファイルの量が多くなればなるほど、レイアウト情報の一括管理は必須の事項と言えるでしょう。
今更言うまでのこともないとは思いますが、HTML文書はWebブラウザで「見る」だけのものではありません。なにも障碍者用の音声読み上げ式ブラウザなんて例を出さずとも、Lynxのようなテキストのみを表示するブラウザを使っている人もいますし、Internet Explorerでも印刷することはあります。
これらの全てに対して、font要素やtable要素などで柔軟に対応することはおよそ現実的ではありません。元々そういうために考えられた仕組みでないのもそうですが、仮に実装するにしても、ただでさえ一つのファイルに元テキスト＋ブラウザ用レイアウト情報が混在している中に、さらに印刷用や読み上げ用の情報を詰め込めむとなると、もはや手が付けられなくなるでしょう。
では、CSSならそれが可能なのか？ 勿論出来ます。見た目の装飾。音声用の指定。印刷用の指定。全て個々に独立して指定可能で、ブラウザの要求に応じて必要なCSSを提供することが出来ます。（勿論、古いブラウザでは要求出来ないと言うケースもありますが）
<link rel="stylesheet" href="aaa.css" media="screen"> 一般的なPC向け
<link rel="stylesheet" href="bbb.css" media="handheld"> 携帯電話などの小画面装置向け
<link rel="stylesheet" href="ccc.css" media="print"> 印刷向け
<link rel="stylesheet" href="ddd.css" media="projection"> 映写機向け
<link rel="stylesheet" href="eee.css" media="embossed"> 点字デバイス向け
<link rel="stylesheet" href="fff.css" media="speech"> 音声読み上げデバイス向け
「ユニバーサルデザイン」（万人に使いやすい設計）の潮流がある昨今、CSSの持つ柔軟性はますます重要性を増すことでしょう。CSSの力を十分に発揮するためには、適応されるHTMLがきちんと書かれていることが大前提なのです。
さて、これは私が一番憂慮している問題です。当然のことながら、Webの技術というものは日々年々進化しています。数年前までダイアルアップだったのが、いつの間にやら固定通信料の時代になり、そうかと思えば常時接続の時代になりました。技術がめまぐるしく推移していくことについては、もはや議論の余地はないと思われます。
HTMLにしても同じようなことが言えて、今、SGMLを基にして構成されたHTMLは、SGMLをより便利なように改良したXMLを基にして構成されるXHTMLへ移行しつつあります。そのXHTMLだって、XHTML1.1からXHTML2.0に変わったときは大幅な仕様の変更が議論されています。これらは全て明日のWebをより良いものにという願いからきています。
その技術の更新期になった時、それまでまともなHTMLの書き方をしてきた人ならば、さほど苦労せずに新しい規格へと移行出来るでしょう。新しい規格だって、前の規格との互換性はある程度取られています。そうでなければ技術は机上の空論で終わってしまうでしょう。ですが、駄目なHTMLの書き方をしていては、どうしようもありません。元々からして駄目なのですから、大幅な手直しが必要になってきます。するとどうなるか。<
有益なリソースを提供するサイトというのは、大抵情報自体がかなりの量になっていることが多いでしょう。しかも、そういう人に限って色々と忙しいものです。たとえ新しい規格に移行しなかったとしても、HTMLの規格に沿った書き方さえしていれば、多少時代が変遷しても規格は残るのですから問題はありません。ですが、HTMLの規格にさえ沿っていない中途半端な書き方では、最悪そのまま情報が埋もれてしまうなんて事態も起こりかねません。そうなってしまっては何のためのWebか分かったものではありません。
私が昔テーブルレイアウトに物理マークアップを利用していて、「これではいけない」と真っ当なHTMLに書き換える時、とても苦労しました。このサイト程度のページ数でも、「もう二度とテーブルレイアウトなんてやらない……」と思わせる程の苦労だったのです。一方、HTMLからXHTMLへの移行はとても簡単でした。一括置換ソフトでまとめて手直しすれば一発です。XHTMLになればXSLTが使えるのですから、さらに簡単なことでしょう。
将来的な技術の変遷を見越した時、今の時点で今の技術をしっかりと押さえておいた方が、後で無駄な苦労をせずとも済むのです。
以前――それこそ、CSSが誕生したての頃――では、正しいHTML+CSSのサイト構成には、古いブラウザの切り捨てだという意見が強くありました。確かに、新しく登場した技術を古いブラウザで利用することは出来ません。それだけならまだしも、以前のブラウザでは「新技術を変に解釈してバグを起こす」なんて事も良くありました。そういうブラウザを使っている人がいる以上は、そういう人たちへ配慮から新技術の導入に慎重になるのも尤もな話です。
しかし、そこからさらに時代は流れ、そういう古いブラウザを利用する人が殆どいなくなってきた今なお、CSSはバグがあるから駄目、という考え方をするのは、正直どうかと私は思います。古いブラウザのために、新しい技術の恩恵に与れないのも変ですが、古いブラウザのために、印刷や読み上げブラウザを利用する人が苦労するのはおかしいと思うのです。（まあ、この辺りはユーザー層の問題ですから、印刷なんて誰もしない。目の見えない人なんて来ないだろう。というのであれば別に構わない、とも言えます）
私は何も、今すぐ全てのHTMLファイルを正しく書き直せとは言いません。というより、それは多分無理だと思います。でも、これから書くHTML文書を改善することであれば、それほど難しい話でもないと思うのです。そしてそれは、後々に必ずや有益な結果となって現れてくるものだと信じているのです。
というか、覚えてしまえば本当に楽ですよ。CSSはレイアウトという分野である以上かなり奥は深いですが、正しいHTMLは誰でも簡単に覚えられます。テーブルレイアウトの仕組みより数倍単純です。
少しでも正しいHTMLの作法に興味を持たれた方は月夜同舟にて良質な解説サイトを紹介しておりますので、肩肘を張る必要はありませんから、取り敢えず気楽に読んでみてはいかがでしょうか。