1. 改善の第一歩
正しい DOCTYPE をページに追加します
DOCTYPEはドキュメントタイプの略称です。主に、使用されている XHTML または HTML のバージョンを示すために使用されます。ブラウザは、DOCTYPE で定義された DTD (Document Type Definition) に従ってページ コードを解釈します。
(1) 過渡期（過渡期）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) 厳格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)フレームタイプ(フレームセット)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ネームスペースを設定する（ネームスペース）
DOCTYPE 宣言の直後に次のコードを追加します。
<html XMLns="http://www.w3.org/1999/xhtml" >
ネームスペースは、要素タイプと属性名を収集する詳細な DTD であり、ネームスペース宣言を使用すると、オンライン アドレス ポインターを通じてネームスペースを識別できます。いつものようにコードを入力するだけです。
コーディング言語を宣言する
ブラウザーで正しく解釈され、マークアップ検証に合格するには、すべての XHTML ドキュメントが使用するエンコード言語を宣言する必要があります。コードは次のとおりです。
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
ここで宣言されているコーディング言語は簡体字中国語 GB2312 です。繁体字中国語のコンテンツを作成する必要がある場合は、それを BIG5 として定義できます。
すべてのラベルを小文字で書きます
XML では大文字と小文字が区別されるため、XHTML でも大文字と小文字が区別されます。すべての XHTML 要素および属性名は小文字である必要があります。そうしないと、文書は W3C 検証によって無効とみなされます。たとえば、次のコードは正しくありません。
<TITLE>会社概要</TITLE>
正しい書き方は次のとおりです。
<title>会社概要</title> 同様に、<P> を <p>、<B> を <b> などに変更します。この変換手順は簡単です。
画像にalt属性を追加する
すべての画像に alt 属性を追加します。 alt 属性は、画像が表示できない場合に代替テキストを表示することを指定します。これは通常のユーザーには必要ありませんが、テキストのみのブラウザーやスクリーン リーダーを使用するユーザーにとっては重要です。 alt 属性が追加された場合にのみ、コードは W3C の正当性チェックに合格します。意味のある alt 属性を追加する必要があることに注意してください。次のような記述は無意味です。
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
正しい書き方:
<img src="logo_unc_120x30.gif" alt="UNC 会社のロゴ、クリックしてホームページに戻ります">
すべての属性値を引用符で囲む
HTML では属性値を引用符で囲む必要はありませんが、XHTML では属性値を引用符で囲む必要があります。
例: height=100 ではなく、height="100"。
すべてのタブを閉じます
XHTML では、すべての開始タグを閉じる必要があります。このような：
<p>開いているタブはすべて閉じる必要があります。 </p> <b>HTML は閉じられていないタグを受け入れることができますが、XHTML は受け入れることができません。 </b>
このルールにより、HTML の混乱やトラブルを回避できます。例: 画像タグを閉じないと、一部のブラウザで CSS 表示の問題が発生する可能性があります。この方法を使用すると、ページが設計どおりに表示されるようになります。空のタグ自体を閉じるには、タグの最後にスラッシュ「/」を使用する必要があることに注意してください。例えば：
<br /> <img src="webstandards.gif" />
上記の 7 つのルールに従って処理されたページは、基本的に XHTML1.0 の要件を満たします。しかし、それが本当に基準を満たしているかどうかはまだ検証する必要があります。 W3C を使用して、無料の検証サービス (http://validator.w3.org/) を提供できます。エラーを発見したら、一つずつ修正してください。
2. 改善の第 2 ステップ
次の改善は、主に構造とパフォーマンスの分離にあります。このステップは、最初のステップほど簡単に達成できるものではなく、CSS2 テクノロジーの学習と応用が必要です。でも、何か新しいことを学ぶには時間がかかりますよね？コツは実践しながら学ぶことです。いつもテーブル レイアウトを使用していて、CSS をまったく使用したことがない場合は、急いでテーブル レイアウトに別れを告げる必要はありません。まず、フォント タグをスタイル シートに置き換えることができます。学ぶほど、より多くのことができるようになります。さて、何をする必要があるかを見てみましょう:
CSSで要素の外観を定義する
私たちはロゴを書くときに、フォントを大きくしたいときは <h1> を使い、前にドット記号を追加したいときは <li> を使います。私たちは常に <h1> を大きく、<li> をドット、<b> を「太字テキスト」と考えます。実際、<h1> は CSS を通じて任意のものにできます。<h1> は小さなフォントになり、<p> テキストは大きく太字になり、<li> は画像などになります。構造要素にプレゼンテーションを強制することはできません。これらの要素の外観を決定するには CSS を使用する必要があります。たとえば、元のデフォルトのレベル 6 見出しを同じサイズに見せることができます。
h1, h2, h3, h4, h5, h6{ フォントファミリー: フォントサイズ: 12px;
無意味なジャンクを構造化された要素に置き換える
多くの人は、HTML 要素と XHTML 要素が構造を表現するために設計されていることを知らなかったかもしれません。私たちの多くは、構造ではなく要素を使用してプレゼンテーションを制御することに慣れています。たとえば、リストは次のようにマークされる場合があります。
文1<br /> 文2<br /> 文3<br />
代わりに順序なしリストを使用した方がよいでしょう。
<ul> <li>文 1</li> <li>文 2</li> <li>文 3</li> </ul>
「でも <li> はドットを表示するので、ドットは使いたくない」と言うかもしれません。実際、CSS は要素の外観を指定しません。CSS を使用してドットをオフにすることができます。
各テーブルとフォームに ID を追加します
テーブルを指定するか、独自の構造的なマークアップを作成します。
<table id="メニュー">
次に、スタイル シートを記述するときに、「メニュー」セレクターを作成し、それを表のセル、テキスト ラベル、その他すべての要素に表示方法を指示する CSS ルールに関連付けることができます。この方法では、高さ、幅、配置、背景色など、帯域幅を消費する冗長なプレゼンテーション層属性を各 <td> タグに付加する必要がなくなります。タグ (「メニュー」をタグ付けする ID タグ) を添付するだけで、別のスタイルシート内でクリーンでコンパクトなコード マークアップのアドホック プレゼンテーション処理を実行できます。
中級レベルの改善については、主な 3 つのポイントを先に挙げますが、最終的にテーブルをまったく使用せずに完全に CSS を使用したレイアウトを実現するまで、段階的に学習してマスターする必要がある多くの内容と知識が含まれています。