lint 対策の具体案

HTML-lint 対策の具体案

－－－－－開設 2005.1.16　更新 2005.3.3

Another HTML-lint ・・・ここでチェックができます。

DOCTYPEを指定しよう（下記の１行を冒頭に記載する。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
　
簡略→ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
　
htmlタグにはlang属性指定
<html lang="ja">
　
下記METAを指定しよう（headタグの直後に記載する。）
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="span">
　
（注）１行目は必須。css使用時は２行目、JavaScript使用時は３行目、 span使用時は４行目を追加のこと。
　
titleタグはMETAの後に置く
　
bodyタグには背景色や文字色の指定（このページの例ですが、色度差を工夫してようやくエラー３を消しました。）
<body bgcolor="#fffff5" text="#000000" link="#0000ff" vlink="#ff0000" alink="#ff0000">
色の組み合わせをチェックしてみる←評価は文字色１と背景色しか出来ません。
　
tableタグにはsummary属性指定
<table summary="table">
　
brタグ過剰対策１（日本語の場合は全角スペースをはさむ。）
<br>[全角スペース]<br>
　
brタグ過剰対策２（英文の場合は をはさむ。半角スペース不可。）
<br> <br>
height対策（CSSを使用できる場合は、height="100"の代わりに style="height:100px"とする。）
hr color対策（CSSを使用できる場合は、color="gold"の代わりに style="border-style:solid;border-color:#ffd700"とする。）
table bordercolor対策（CSSを使用できる場合は、bordercolor="blue"の代わりに style="border-style:solid;border-color:#0000ff"とする。）

外枠はblue

罫線は黒
NN4.7 互換対策
NN4.7はCSS2では完全な動作をしないので次の処理を行う。
1. styleタグ内にはNN4.7で動作する部分(CSS1)を記載する。
2. NN4.7で動作しない部分(CSS2)をlinkタグで読み込む。
  （例）<link rel="stylesheet" href="style_mk.css" type="text/css" media="screen,print">
（注）NN4.7以外では上記aにbを上書きしたものとなる。→ （実施例）
HTML-lint 対策事例（Transitional編）
- 対策前
- 対策後