文書構造とレイアウトの分離

HTMLの文法って？

HTMLには、規格団体（W3Cなど）が定めた文法があります。文法を守っていないからと言ってブラウザで全く表示されない、ということはあんまりありませんが、ブラウザによっては思ったように表示されなかったりサイト作成者の意図と違うように解釈されてしまうことがあります。

HTMLファイルを作ったら文法をチェックしてみるといいでしょう。以下に文法チェックが出来るwebサービスを紹介します。

The W3C Markup Validation Service … W3Cによる文法チェックサービス。英語。
WDG HTML Validator … サイトURLを入力するとサイト内の全ファイルのHTML文法チェックをすることが出来る。英語。
Another HTML-lint gateway … 日本語で文法チェックが出来ます。一部Strict信者的な指摘もされるのでチェックオプションの「宗教的なチェックをすべて無効にします。」にチェックをつけておくといいかも。

これらのサービスで出来るチェックはHTMLの文法的に間違いはないかだけです。マークアップされた内容と、そのタグ付けが妥当かどうかまでは判断できません。極端な話、100点を取るだけならdiv要素とspan要素だけでマークアップするようにすれば可能です。でもそれじゃぁ正しいマークアップ（意味づけ）とはいえません。

HTMLタグの意味を考慮したマークアップをしよう

A子ちゃんの「小説サイト」をサンプルに「HTMLタグの意味を考慮したマークアップ」とはどういうものか説明します。

A子: 基本構造テンプレートを使って、<body>～</body>の間にタグを打って小説のページが出来たよー！ブラウザ君見てみて！
ブラウザ君: A子ちゃんの「ここはお気に入りに入れないでください！」というホームページだね。
A子: えー！ホームページの名前は「A子の小説の森」だよ！？
ブラウザ君: 「ガッシャーーーン！」というのが小説の見出しかな？
A子: えぇー！小説の名前は「ドキドキ♥転校生」だよ！？
ブラウザ君: しかもこの小説は他の誰かが書いたものなんだね。
A子: えぇー！ちゃんと自分で書いた小説なんだけど！？

HTMLの例

A子の書いたHTMLは図のようなものでした。

トップページ以外はお気に入りに入れてほしくないから<title>ここはお気に入りに入れないでください！</title>にした。
効果音を強調するために大きな文字で表示したいので<h1>ガッシャーーーン！</h1>にした。
小説は左右に余白をとって見やすくしたかったので<blockquote>～</blockquote>で囲んだ。

A子は以上のような考えでタグを打ちましたが、それをブラウザはこのように解釈します。

<title>ここはお気に入りに入れないでください！</title>はそのwebページ（webサイト）のタイトルである。
<h1>ガッシャーーーン！</h1>はそのページの中の一番大事な見出しである。
<blockquote>～</blockquote>で囲まれたテキストは引用（他人の言葉や事例を引いてくること）である。

改善案

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="サイト作成者名">
<meta name="keywords" content="サイト内容に関するキーワード">
<meta name="description" content="サイト内容説明文">
<link rel="shortcut icon" href="favicon.icoまでのパス">
<link rel="stylesheet" type="text/css" href="cssファイルまでのパス">
<title>A子の小説の森｜ドキドキ&hearts;転校生</title>
</head>
<body>
<p>ここはお気に入りに入れないでください！</p>
<h1>A子の小説の森</h1>
<h2>ドキドキ&hearts;転校生</h2>
<h3>第一章</h3>
<p>「遅刻しちゃうー！」</p>
<p>花子は慌てて玄関を飛び出した二学期の初日だというのに夏休み気分が治らなくて寝坊したのだ。お母さんが作ってくれた朝ごはんに手もつけず、かろうじて食パンを一枚口にくわえて花子は走った。</p>
<p>あの角を曲がればあとは直線100メートル。全力ダッシュすれば始業のチャイムがなり終わる前に席につける――！</p>
<p>トップスピードに乗って角を曲がった瞬間、</p>
<p><strong>ガッシャーーーン！</strong></p>
<p>花子は誰かにぶつかって転んでしまった。</p>
<p>「いたたたた……。ちょっと、どこ見て歩いてるのよっ！！」</p>
<p>「ご、ごめん！　大丈夫かい？」</p>
<p>花子が頭をさすりながら見上げると、そこには心配そうな顔をしたイイ男が立っていた。</p>
<p>　続く　</p>
</body>
</html>

ブラウザ君: こんな感じに「HTMLタグの意味を考慮した」マークアップだと僕も内容が理解しやすいね。
A子: だけど実際にブラウザで表示してみるとA子が考えてるのと全然違うふうに表示されるんだけど…。
ブラウザ君: そういう時のためにCSSがあるんだよ。