• このエントリーをはてなブックマークに追加

本の一例です。HTMLの決まりを全て記憶しなくてもいいです、ただ大まかには覚えたほうがいいですね。後々直しが面倒なので、ルールにそって作ったほうが効率的です。
組み終わったあとにThe W3C Markup Validation Serviceとかで「チェックして、修正」を繰り返していけばいいんじゃないでしょうか。

駄目なパターン

<h2><div><span>見出し</span></div></h2>

<h2>内に<div>を入れてはいけない

<h2><em>見出し</em></h2>

<h2>内に<em>を入れてはいけない

<address><div><span>住所</span></div></address>

<address>内に<div>を入れてはいけない

<address><ul><li>見出し</li></ul></address>

<address>内に<ul>や<li>を入れてはいけない

<form action="#" method="post">
<input type="text" value="" accesskey="k" tabindex="1" />
</form>

<form>内に直接<input>を入れてはいけない

<body><img src="xxx.jpg" alt="2011年10月1日に東京に旅行に行った時の集合写真" width="100" height="100" /></body>

<body>内に直接<img>を入れてはいけない

OKなパターン

<ul>
<li>
<dl>
<dt>定義リスト</dt>
<dt>定義リスト内容</dt>
</dl>
</li>
</ul>

<ul><li>内に<dl>は入れてもいい

<ul>
<li>
<p>定義リスト</p>
</li>
</ul>

<ul><li>内に<p>は入れてもいい

<ul>
<li>
<h1>定義リスト</h1>
</li>
</ul>

<ul><li>内に<h1>は入れてもいい

<h3><span>見出し</span></h3>

<h3>内に<span>は入れてもいい

<dl>
<dt>定義リスト</dt>
<dd><h2>定義リスト内容</h2><p></p></dd>
</dl>

<h3>内に<span>は入れてもいい

<dl><dd>内に<h2>や<p>を入れてもいい
※<dt>の中には入れられません

<table cellspacing="0" cellpadding="0">
<tr>
<td>
<h2>ああ</h2>
<ul>
<li>aaaa</li>
</ul>
<dl>
<dt>aaa</dt>
<dd>aa</dd>
</dl>
<ol>
<li>ああ</li>
</ol>
</td>
</tr>
</table>

<table><tr><td>内に<h2>、<ul><li>、<ol><li>、<dl><dt><dd>は入れてもよい

<form action="#" method="post">
<div><input type="text" value="" accesskey="k" tabindex="1" /></div>
<div><input type="submit" value="" accesskey="s" tabindex="2" /></div>
</form>

<form>内に<div>を入れてもいい

<form action="#" method="post">
<table summary="アンケートの内容です">
<tr>
<th abbr="年齢を入力">年齢</th>
<td><input type="text" value="" accesskey="y" tabindex="1" /></td>
</tr>
<tr>
<th abbr="趣味を入力">趣味</th>
<td><input type="text" value="" accesskey="h" tabindex="1" /></td>
</tr>
</table>
<div><input type="submit" value="" accesskey="s" tabindex="2" /></div>
</form>

たとえ文法的にあっていて、エラーが出なくても、テーブル内にページ内に複数のブロックを入れてレイアウトしたり、リスト化する必要もないのにリスト化したり、見出しでなくても見出しになっていたりすると変ですね。それぞれ正しいところに正しいマークアップを行わないとだめです。しらべてみたら、1番目のパターンである