クロスブラウザ開発体験談まとめ（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 ">.XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
標準的なHTMLタグの適切な使用
レイアウトにテーブルを使わず、div+cssでレイアウトするようにする。
レイアウトにtableを使用すると、コードの重複が発生しやすく、<div></div>の記述に比べ、コード量が多くなってしまう傾向があります。また、tableはすべての要素をダウンロードして表示する必要があり、対応するページの開く速度が遅くなります。
特に、formタグの中にdivなどの他のタグを入れ子にする場合は、タグクロージャーに注意してください。
ページ上に余分な余白が発生し、マージンをリセットしても避けられない場合があります。これは、次のようなページ要素タグの閉じ方の不一致が原因である可能性があります。
<div class="外側">
<form name="testForm">
<div class="inner">
<input name="title" type="text" />
</form>
</div>
</div>
IEを含むすべてのブラウザで正しく使用できるように、テーブルを定義する際にtbody要素を使用します。
テーブルに定義されたtbody要素が表示されていなくても、ブラウザはtrノードの親が自動的に追加されたデフォルトのtbodyノードであると見なします。javascriptでtrノードを操作する際に起こりうる誤解を避けるため、手動で追加したほうがよいでしょう、例えば
<table id="myTable">
<tbody id="myTableBody">
<tr>
<td>
</td>
</tr>
</tbody>
</table>
タグと属性のケースに注意
ある要素にバインドされたイベントが、IEブラウザでは反応するのに、サファリや他のブラウザでは反応しないことがあります。このとき、イベントバインディングの方法が正しいかどうかを確認する必要があります。高度なイベントバインディングでは、IEと他のブラウザで異なる2組のjavascriptを記述する必要がありますが、シンプルなイベントモデルでは、バインドされるイベント名の大文字小文字に若干の注意が必要です。例えば
<input type="text" name="keywordSearch" onFocus="clearValue() " >
ここでは小文字のonfocusと書き、表示されているaddタグの閉じ記号が正規の書き方である。
<input type="text" name="keywordSearch" onfocus="clearValue() " />
タグの属性値設定に注意
<script> タグの言語属性とタイプ属性
一方、type属性はスクリプトの種類を定義するためのもので、w3cの標準属性であり、小文字の属性を使用するのが標準的です。もし、javascripの低いバージョン（現在ほとんどのブラウザは1.5をサポートしています）に従って解釈することをブラウザに指示する必要がない場合は、language属性を定義する必要はありませんが、type属性は定義する必要があります。ですから
<SCRIPT Language="JavaScript"> read <script>
<a> タグの alt 属性と title 属性について
IEではaltとtitleの両方の値がマウスホバー時にツールチップとして表示されますが、altは画像が表示されていない時の代替表示、titleはマウスが置かれた時のチップという違いがあります。
チェック済み、<input>タグの読み取り可能な属性
以前のバージョンのHTMLでは、すべての属性に値を割り当てることは必須ではなく、チェックボックスを表す場合は <input checked > といった書き方が許容されていました。しかし、XHTML規格によると、このような文法は厳密なXML形式ではなく、HTML規格の発展の流れに沿って属性やタグの閉じ方に値を代入するように注意する必要があり、以下のように書かれています。
<input checked="checked" />
<input readonly="readonly" />
<オプション>タグのselect ed属性
前のエントリーと同じ理由で、<select>オプションの<option>タグのselected属性も値を代入する必要があります。
< option selected="selected" />
<img> タグの align="absmiddle" 属性について。
XHTML規格では、HTMLタグはスタイルの制御ではなく、内容の表現に重点を置くべきであり、スタイルの調整はCSSに委ねるべきとされています。そのため、一部の古いタグや属性は非推奨となっています。例えば、<em>タグと<i>タグはどちらもタグ内容のテキストをイタリック体で表示しますが、純粋にスタイルのために名付けられた <i> タグは非推奨規格に含まれ、代わりに強調という意味を示す <em> タグが使用されるようになりました。同様に、<img>タグの、align="absmiddle"属性は、画像が隣のテキストと縦方向に中央揃えになることを示しますが、これもスタイルを示す属性で、画像の配置スタイルを制御するのにこの属性ではなくCSSを用いて、二つのスタイル制御が相互作用することを回避すべきなのです。
<iframe>タグのframeborder属性
iframeを使用する場合、IEではborder="0"を設定すればiframeのボーダーを表示しないことがありますが、フレームウィンドウのボーダーを制御する標準プロパティはframeborderであり、IE以外のブラウザでもフレームのボーダーを隠すにはframeborder="0"を設定すべきなんですね。
<iframe frameborder="0" />
<table>タグのcellpaddingプロパティ
この属性は、<img> タグの align 属性と同様、セル間のスペースを指定することによって、内容を表現しスタイルを制御するという HTML 自身の責任を放棄した属性です。実用上は、セルパディングを指定せず、CSSでセル内余白を制御する方がよいでしょう。
タグのnowrap属性
nowrapは、コンテンツが自動的に折り返されないことを示す属性ですが、上記の属性と同様に、スタイルを制御する属性です。HTML4.01では、"bgcolor", "height", "width" and "nowrap" のタグは好まれません。XHTML 1.0 Strict DTDでは、"bgcolor", "height", "width" と "nowrap" は <td> タグでサポートされていません。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン