1.SEOに適したHTMLとは？

基本的には、(X)HTML＋CSSのマークアップ理念に従っておけば大きな差異はありません。
そしてその上で、いくつかある「SEO的に有利な（またはSEO的に不利な点をなくした）」ポイントを押さえる、という形になります。

• (X)HTML＋CSSのマークアップ理念に従う
• SEOを考慮したポイントを押さえる

(X)HTML＋CSSのマークアップ理念というのはつまり、「それぞれのHTMLタグが持つ本来の意味でマークアップする」ことです。
例えば、レイアウト目的でtableタグを使用する、というのはNGで、そういった「レイアウト目的で」使用するタグを選ぶのではなく、本来の「タグの意味で」使用するタグを選ぶことで、そのWebページが持つ本来の意味（文書構造）を検索エンジンへ伝えやすくなるのです。
また同時に、装飾目的で不要な（不適切な）タグがHTMLから削除されるため、結果的にHTMLのファイルサイズへ軽量化をもたらします。これもまたSEOに適している理由になります。

もちろん、SEOを考慮するのであれば外せないポイントもあります。
これは前述の(X)HTML＋CSSのマークアップ理念から逸脱するものではなく、プラスアルファとして付与する形になります。

2.(X)HTML＋CSSで組む

HTMLのタグはそもそも、ページのレイアウトや装飾のために用意されたものではなく、本来は文書構造を明確にするためのものです。
タグ本来の役割を果たすため、HTMLは文書構造通りにマークアップを行い、レイアウトや装飾はすべてHTMLから切り離してCSSとしてまとめるのが(X)HTML＋CSSで組む、ということです。

• レイアウトや装飾目的でHTMLタグを使用しない
• タグ本来の役割でマークアップを行う
• レイアウトや装飾についての記述はHTMLではなくCSSに切り分ける
  （JavaScriptも文書の一部ではなくUIの補助が目的のものなので、外部ファイル化してHTMLから切り離す）

例えば、下記のようなページがあったとします。

よくある2カラム構成で、右カラムにカテゴリのメニューが、メインである左カラムにページのコンテンツがあるようなレイアウトですね。
上記のようなページをtableタグを用いてHTMLに起こそうとした場合、こうなってしまいます。

<table border="0" cellspacing="0" cellpadding="0" width="760">

	<tr>

		<td width="540" valign="top"><font size="7" color="#ff0000">ページ名</font><br>

		<br>

		ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。<br>

		<br>

		<table border="0" cellspacing="0" cellpadding="0" width="100%">

			<tr>

				<td bgcolor="#ffeecc"><font size="5" color="#660000">○○○ 商品一覧</font></td>

			</tr>

			<tr>

				<td>○○○の商品の一覧です。20件表示しています。</td>

			</tr>

			<tr>

				（以下略）

			</tr>

		</table></td>

		<td width="10"><img alt="" src="img/spacer.gif" width="10" height="1"></td>

		<td width="210" valign="top"><font size="4">カテゴリーから探す</font><br>

		<font size="2">○○の商品をカテゴリーから探すにはこちらからチェック</font><br>

		<br>

		・<a href="###">カテゴリーA</a><br>

		・<a href="###">カテゴリーB</a><br>

		・<a href="###">カテゴリーC</a><br>

		・<a href="###">カテゴリーD</a><br>

		・<a href="###">カテゴリーE</a><br>

		・<a href="###">カテゴリーF</a></td>

	</tr>

</table>

上記のようなシンプルなレイアウトだけで、こんな状態になってしまいます。
もっと画像や装飾などを入れるとさらに膨れ上がるでしょう。

ではこれを(X)HTML＋CSSで組みなおすとどうなるでしょうか。
答えは下記を見てください。

<div id="Contents">
	<div id="Main">
		<h1>ページ名</h1>
		<p>ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。ページのリード文が入ります。</p>

		<div id="ItemList">
			<h2>○○○ 商品一覧</h2>
			<p>○○○の商品の一覧です。20件表示しています。</p>

			（以下略）
		</div>
	</div>
	<div id="Sub">
		<div id="CategoryNav">
			<h2>カテゴリーから探す</h2>
			<p>○○の商品をカテゴリーから探すにはこちらからチェック</p>
			<ul>
				<li><a href="###">カテゴリーA</a></li>
				<li><a href="###">カテゴリーB</a></li>
				<li><a href="###">カテゴリーC</a></li>
				<li><a href="###">カテゴリーD</a></li>
				<li><a href="###">カテゴリーE</a></li>
				<li><a href="###">カテゴリーF</a></li>
			</ul>
		</div>
	</div>
</div>

いかがでしょうか。
tableタグで組んでいた時に比べて、だいぶ見やすくすっきりとしたかと思います。

• 各要素の意味（役割）がわかりやすくなる
• HTMLのファイルサイズが小さくなる
• HTMLがシンプルに見やすくなる

これが(X)HTML＋CSSのメリットです。

装飾目的のタグばかりを使用していても、文書の意味合いは「ただのテキスト」という位置づけから変わることはありません。例え見た目が見出しのようになっていても「ただのテキスト」であり、文中のそこらの「ただのテキスト」と重みが変わらないのです。これでは検索エンジンへ対して各要素がきちんと伝わりません。
検索エンジンへきちんと各要素を「このテキストは見出しである」「このテキストは文書である」などのように伝えるには、正しい役割でHTMLタグを使用する必要があります。

また、検索エンジンはファイルサイズが巨大で複雑なHTMLよりも、ファイルサイズの軽いシンプルなHTMLを好みます。
そしてきちんと（タグで）構造化されていて意味がわかるHTMLでなければ、検索エンジンへWebページの内容がきちんと伝わりません。

そういう意味で、(X)HTML＋CSSでWebページを作成することは、SEOの観点で言えば非常に重要なのです。

3.SEOを意識したちょっとしたコツ

(X)HTML＋CSSでページが組まれていれば、基本的にはそれでOKです。
ですが、それだけでは「検索エンジンへWebページの内容が伝わりやすい」という前提をクリアしているというだけであり、「Webページの内容をより魅力的に伝える」というSEOの観点で考えるといささかパワー不足ではあります。

では、SEOを考慮したポイントとはどのようなものがあるでしょうか。

• h1タグはページ内で1か所のみ、ページ大見出しに使用する
• 論理強調タグ（em/strongタグ）はページのキーワード以外には使用しない
• メインカラムを先に記述する
• 同一リンク先のリンクは極力1つのaタグにまとめる
• ページ内で最初のリンクはテキストにする
• 非表示要素はHTMLに記述しない