クロスブラウザ開発体験のまとめ（I）HTMLタグ

ページにDOCTYPEを追加する
ブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブラウザが統一された HTML 標準に従ってページを解析およびレンダリングできるように、HTML ファイルの標準ドキュメントタイプを定義する必要があります。

!DOCTYPE 宣言は、次のようにドキュメントが準拠する DTD を指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準 HTML タグの正しい使用: レイアウトにはテーブルではなく div+css レイアウトを使用するようにしてください。
レイアウトにテーブルを使用すると、コードが冗長になりやすく、<div></div> を使用して記述するよりもコードが複雑になります。さらに、テーブルでは、表示する前にすべての要素をダウンロードする必要があり、対応する Web ページの開きが遅くなります。

標準化されたページ構造 (DIV + CSS) を使用する必要があります。このレイアウト方法は、コードが簡潔で、ページの閲覧速度が速く、ページレイアウトが柔軟です。ページを修正するときは、プログラムを変更せずに CSS スタイルを変更するだけでページを再レイアウトできるため、Web サイトの修正コストが削減されます。

特にフォームタグ内に div などの他のタグをネストする場合は、タグの閉じ関係に注意してください。
場合によっては、余白をリセットしても避けられない余分な空白がページに表示されることがあります。これは、ページ要素の終了タグが一致していないことが原因である可能性があります。たとえば、次のようになります。

<div class="outer">
<フォーム名=”testForm”>
<div class="inner">
<入力名=”タイトル” タイプ=”テキスト” />
</フォーム>
</div>
</div>

テーブルを定義するときに tbody 要素を使用すると、IE を含むすべてのブラウザーで正しく使用できるようになります。テーブルで tbody 要素が明示的に定義されていない場合でも、ブラウザーは tr ノードの親ノードが自動的に追加されたデフォルトの tbody ノードであると想定します。JavaScript を使用して tr ノードを操作するときに誤解を避けるために、次のように手動で追加することをお勧めします。

<テーブルid=”myTable”>
<tbody id=”myTableBody”>
<tr>
<td>
</td>
</tr>
</tbody>
</テーブル>

タグと属性の大文字/小文字に注意してください。<br />要素にバインドされた一部のイベントは、IE ブラウザーでは応答しますが、Safari や他のブラウザーでは応答しないことがあります。このとき、イベントバインディングメソッドの正確性を確認する必要があります。高度なイベントのバインディングでは、IE と他のブラウザーを区別するために 2 セットの JavaScript を記述する必要がありますが、シンプルなイベントモデルでは、バインドされたイベント名の大文字と小文字に注意する必要があります。のように：

<input type=”text” name=”keywordSearch” onFocus=”clearValue()” >

ここでは小文字の onfocus を使用し、標準的な書き方としてタグ終了記号を明示的に追加する必要があります。

<input type=”text” name=”keywordSearch” onfocus=”clearValue()” />

タグの属性値の設定に注意してください
<script>タグの言語属性とタイプ属性
<script> タグの language 属性は、スクリプト言語のバージョンを定義するために使用されます。正しい割り当ては <script> の形式です。これは、ブラウザ (主に IE) に JavaScript 構文の 1.2 バージョンを使用して解釈するように指示するために使用されます。type 属性は、スクリプトの種類を定義するために使用されます。これは W3C の標準属性であり、小文字の属性を使用することは標準に準拠しています。ブラウザに JavaScript 言語の下位バージョンに従って解釈するように指示する必要がある特別な状況がない場合は (ほとんどのブラウザは現在 JavaScript バージョン 1.5 をサポートしています)、通常、language 属性を定義する必要はありませんが、type 属性は定義する必要があります。だからコードを

<SCRIPT Language="JavaScript">を<script>に変更します

<a>タグのalt属性とtitle属性<br />IEでは要素にマウスを合わせると、alt属性とtitle属性の値がツールチップとして表示されますが、両者の間にはまだ違いがあります。 alt は画像が表示されていないときの代替表示であり、title はマウスを画像の上に置いたときのプロンプトです。

<input> タグの checked 属性と readonly 属性<br />HTML の初期のバージョンでは、すべての属性に値を割り当てることが必須ではありませんでした。選択されたチェックボックスを表す場合、<input selected > が認識されました。ただし、XHTML 標準によれば、このような文法は厳密な XML 形式ではありません。属性の割り当てとタグの閉じに注意して、HTML 標準の開発動向に準拠し、次のように記述する必要があります。

<input チェック済み="チェック済み" />

<input readonly="読み取り専用" />

<option>タグの選択された属性

前と同じ理由で、<select> オプション内の <option> タグの selected 属性にも値を割り当てる必要があります。

<オプションが選択されました="選択されました" />

<img> タグの align="absmiddle" 属性<br />XHTML 標準によれば、HTML タグはスタイルの制御よりもコンテンツの表示に重点を置く必要があり、スタイルは CSS によって調整する必要があります。そのため、古いタグや属性の一部は廃止されました。たとえば、<em> タグと <i> タグを使用すると、タグコンテンツ内のテキストが斜体で表示されます。ただし、単にスタイルにちなんで名付けられた <i> タグは廃止された標準になりました。強調を意味する <em> タグに置き換えられました。同様に、<img> タグの align="absmiddle" 属性は、画像と隣接するテキストが中央に垂直に配置されていることを示します。これもスタイルを表す属性です。2 つのスタイルコントロールの相互影響を避けるために、画像の配置スタイルを制御するには、この属性の代わりに CSS を使用する必要があります。

<iframe> タグの frameborder 属性<br />iframe を使用する場合、IE で iframe の境界を非表示にするには border="0" を設定するだけでよいかもしれませんが、フレームウィンドウの境界を制御する標準属性は frameborder です。IE 以外のブラウザーでフレームの境界を非表示にするには、frameborder="0" を設定する必要があります。

<iframe フレームボーダー="0" />

<table> タグの cellpadding 属性<br />この属性は、<img> タグの align 属性と同様に、コンテンツを表現し、スタイルを制御するという HTML 自身の役割を超えた属性です。セル間のスペースを指定します。実用的な観点からは、セルパディングを指定するのではなく、CSS を使用してセルのパディングを制御する方が適切です。

<td> タグの nowrap 属性

Nowrap はコンテンツが自動的に折り返されないことを示す属性ですが、上記の属性と同様にスタイルを制御する属性です。 HTML 4.01 では、<td> タグの「bgcolor」、「height」、「width」、および「nowrap」は非推奨です。 XHTML 1.0 Strict DTD では、<td> タグの「bgcolor」、「height」、「width」、および「nowrap」はサポートされていません。