HTMLは本来、文章中のある部分が持っている意味を明示するためのものです。例えば、font要素で文字色がdeeppinkに指定されている部分があるとします。文字色を変えてあるのは「強調」のためでしょう。ですから、本来のHTMLでは<em>という開始タグと</em>という終了タグで囲んでem（強調）要素として明示するのが正しいということになります。
するとちょっとした問題が起きます。IEというブラウザはem要素を「斜体」で表すことにしています。たしかにそれでも地の文とは区別され、強調されるわけなのですが、やっぱり不満ですよね。強調部分は「標準の文字」で、しかも「文字色deeppink」にしたいわけです。じゃあどうしたらいいんだろう? こんなとき、CSSを利用するわけです。
例えば、外部CSSファイルに以下のように記述します。
em {font-style:normal; color:deeppink;}
これで、em要素はすべて「標準の文字」かつ「文字色deeppink」で表示されるようになります。
ふつうにfont要素で色を指定するのに比べて面倒くさいと思われたでしょうが、この発想はアクセシビリティーの面から非常に重要です。といいますのは、例えば音声読み上げブラウザの場合、font要素で文字色deeppinkが指定されていても、読み方は変わりません。色を声に表すことは不可能だからです。しかしem要素でマークアップされた部分を読む場合はどうでしょうか。em要素は強調を意味しているわけですから、ちゃんと大きな声でゆっくりと読んでくれます。
HTMLはこのように、見た目を制御するためではなくて、文章のある部分が、どのような意味なのか、役割なのかを明示するものなんです。
HTML4.01ではfont要素は非推奨になりました。font要素はどんな意味も明示しないからです。だから、HTMLとしては価値がないということになったのです。font要素で行っていた見た目の制御は、CSSを使えば、全て代替できます。例えば先ほどのem要素について、文字のスタイルと色を指定したように、です。
標準の文字色とは違う文字色や文字サイズを一部に指定する場合、それは大抵、強調を意味します。強調を示す要素は2種類あり、ひとつはem要素ですが、より強い強調を strong 要素で示すことができます。たった2段階ではつまらないとお考えであれば、CSSの設定で、<em><em>～～～</em></em>というように二重強調にした場合の表示方法なんかも決めることができますので安心です。
em em
{font-size:150%; font-weight:bold; color:red; border:4px double #red;}
と指定すれば、em要素の二重強調は文字サイズが通常の1.5倍、太字、文字色red、太さ4pxの赤色二重枠線付きで表示されるようになります。同様に、三重強調でも四重強調でも指定可能です。そうしたゴテゴテした意味付けがよいか悪いかは別として。
font要素では枠線なんてつけられませんよね。CSSの方がデザインの自由度は高いということも要チェックです。
HTMLを正しく使えば、HTML文書の表現方法は（基本的に）ブラウザが用意したデフォルトスタイルに規定されます。IEではhn要素による見出しは自動的に太字になってしまいます。すべての文字色は黒、背景色は白です。em要素による強調は斜体、strong要素によるより強い強調は太字で表現されます。他の表現方法を選択できません。
別にそれでもいいや、と思えば何の苦労もいらないわけですが、ほとんどの方は不満があると思います。だからこれまでは、font要素などで自由な表現する道を選び、HTMLによる論理構造の記述をあきらめてきました。その結果、視覚障害の方などには見出しも段落も判断できない、論理構造がのっぺらぼーのHTML文書が作られてきたのです。
しかし、これからはCSSの時代です! 長い時間をかけてようやく、CSS対応ブラウザは十分に普及しました。対応のレベルは様々ですが、98％のブラウザがCSSを解釈できる状況になったのです。CSSを勉強しましょう! 誰もが使いやすいHTML文書とお望みの表現方法を両立させましょう!
しかも、CSSと正しいHTML記述には、さらにいいことがあります。リニューアルが楽になるのです。
例えば、強調部分の色をblueに変更したいな、と思ったとしますよね。font要素を使っている場合、いちいち全部のdeeppinkをblueに書換えなければいけません。これは面倒です。
CSSと正しいHTML記述を使っていれば簡単です。たったひとつのCSSファイルを書き換えるだけで、全部のem要素の色が変わります。em要素自体には色の情報は入っていない、というのがミソなんです。
これを応用すると、HTML文書はそのままに、ページのレイアウトまで変更することが可能です。本ページを特定の環境（ほとんどの方があてはまると思います）で閲覧されている場合、ページどこかにセレクトメニューが表示されているはずです。このメニューを選択することで、ページのデザインがどんどん変わります。けれども、ソースを見ていただければ、どのデザインであっても同じHTML文書であることに気付かれるでしょう。
これがどういうことを意味するかといいますと、これまではリニューアルのたびに全HTML文書の記述を見直していたものが、CSSファイルひとつを書き換えるだけですんでしまうということなんです。しかも私のサイトのように、閲覧者に好きなデザインを選んでもらうことさえ可能なんです。
テーブルでレイアウトしたり、font要素で装飾したりするのは、古いやり方です。CSS未対応のブラウザにも配慮しなければならない一部企業のサイトはともかく、個人サイトなら! もうCSSを使うしかない! そう思いませんか? これからは、意味のあるHTMLとCSSによる表現でWebサイトを作りましょう。