Another HTML-lintで100点満点

2012-01-10

Another HTML-lintで100点満点かつ減点ゼロのグレーのエラーもなく、W3C Markup Validation Service(html)とW3C CSS Validation Serviceのチェックでもvalidにした時の顛末です。

どうすればHTML-lintで100点満点にできるのか
実際に修正したhtml
アドセンスコードを変更せず100点満点にするには
結論
XHTMLではアドセンスコードで必ず軽度のエラー発生
cssをvalidにするためにした修正
ついでにjavascriptの構文チェック
最後に（雑感）

どうすればHTML-lintで100点満点にできるのか

Another HTML-lintでチェック後に出てくるエラーを順番に改善するだけです。Another HTML-lintで100点ならW3C Markup Validation Serviceでもvalidです。
文法しか採点しません。内容の良し悪しは採点されません。
エラー内容の横に表示される解説を確認すれば、改善方法が載っています。一つ一つ攻略していけば、100点に確実に近づけます。
チェックされる文法の部分は限定されています。cssやjavascriptなどで後からhtmlが修正される部分はチェックされません。
ということは、諸事情で改善方法をそのまま実施できない場合は、エラーになる部分をjavascriptなどにすれば、とりあえずばエラー判定されません。しかしこれでは本末転倒です。Another HTML-lint FAQでも明言されています。
- Q.満点を取るにはどうすればいいのですか。
- A.満点を取ることを目標にしてはいけません。例えば以下のような修正は、あなたのHTMLを満点に導きます。
  1. <font color="red"> ⇒ <span class="red">
  2. <div align="center"> ⇒ <div style="text-align:center">
  3. <br /><br /> ⇒ <br /> <br />
  4. <a target="..."> ⇒ <a onclick="window.open(...)">
  でも、これらは表現方法を変えてはいるものの、相変わらず物理的な記述をしており、とてもよいHTMLとは言えません。文章に論理的な意味を与えていません。なぜ文字を赤くしたいのか、なぜ中央寄せしたいのかを考えましょう。<br /> の例などはとてもひどいもので、涙が出ちゃうくらいです。targetによる方向付けは、そういう行為自体を戒めているものなのに、targetじゃなければいいなどという発想自体がおかしいのです。
とはいえ、一度くらいは100点満点を表示してみたいと思うのが人情です。100点満点にしたからといって、何ももらえません。SEOで有利になるということもないでしょう。しかし、自己満足はできます。ゲームでハイスコアを出すようなものです。
以上のことから、このページではこのサイトの管理人が100点満点にした時の具体的な手法を公開しています。

実際に修正したhtml

100点満点を目指す前の段階から既に100点に近かったので、修正したhtmlは少ないです。軽度のエラーばかりの改善でした。ちなみに、ez-HTMLを使ってhtmlを手打ちでサイト作成すれば、構文エラーのない綺麗なhtmlを書きやすくなります。
＜head＞～＜/head＞内にダミーのメールアドレスを入れました。
＜head＞～＜/head＞内に＜link rev="made" href="mailto:～" /＞が含まれていません。
＜head＞～＜/head＞内に次のページへのリンクなどを追加しました。
＜head＞～＜/head＞内に＜link rel="next" href="?" /＞などのナヴィゲーション用のリンクが含まれていません。
IEのバージョン別に分岐させるコメントはjavascriptに書きました（<![IGNORE[]]>～など）
＜SCRIPT＞～＜/SCRIPT＞内に XX を書くときは外部にスクリプトを用意しましょう。
コメント中に ＜ や ＞ を書くと、いくつかのWWWブラウザを混乱させることがあります。
外部ファイル化していないjavascriptの記述をでくくるのを極力やめました。しかし、google adsenseのコードは変更不可なので、その部分は仕方なくそのまま残しました。アドセンスコードを取り除けば100点満点です。
＜SCRIPT＞～＜/SCRIPT＞内にコメントを書くと、本当にコメントとして扱われます。
当サイトのhtmlをW3Cでチェックした結果です。この記事作成時は valid でした。
This document was successfully checked as XHTML 1.0 Transitional!

アドセンスコードを変更せず100点満点にするには

結論

当サイトではこの方法を使っていませんが、アドセンスコードを変更せずにHTML-lintで100点満点にすることはできます。
HTML4.01 transitionalなどでマークアップすればアドセンスコード内のの部分に関してエラー判定されません。HTML5やXHTMLではなく、HTML4.01に戻るという逆転の発想です。
なお、どうでもいいことですが、HTML4.01やXHTML 1.0の後は Traditional（伝統的な）ではなく Transitional（過渡期の）です。Traditionalでも日本語の意味的にそう間違ってはなさそうですが。

XHTMLではアドセンスコードで必ず軽度のエラー発生

アドセンスコードを変更するのは規約違反なのでできません。
iframeでのアドセンス広告掲載は規約違反の可能性があるため、iframeを使うことによってアドセンスコードを直接書かないという策は避けるべきでしょう。
- iframeに関するポリシーが一部変更されたようです。
phpやssiのincludeでは、直接記述した場合と同じでアドセンスコードが表示されるので意味がありません。jquery.loadではjavascriptをロードできません。
1. アドセンスコードの外部ファイル（拡張子「ad」）からの読み込みについて
2. jQuery.load() wont show Google ads（英語）
アドセンスコードをテキストファイルに記載し、それをJavaScriptでヒアドキュメントとして読み込んでも、肝心のアドセンス広告が表示されませんでした。少なくとも当サイトの管理人にはできませんでした。上手く設定すればできるのかもしれません。
- Javascriptのdocument.writeに改行があるコードを大量に楽に書く方法は？
- JavaScriptでヒアドキュメントを使うライブラリを作った。

cssをvalidにするためにした修正

HTML-lintではcssはチェックされませんので、W3C CSS Validation Serviceでvalidにするためにしたことです。
W3C CSS Validation Serviceはデフォルト設定ではCSSレベル2.1ですが、オプションのProfile:でCSSレベル3を選択すれば、CSS3のプロパティがエラーと判定されません。
cssハックで、ieのバージョン別にcssを適用させていた部分を別ファイルにしました。以前はstyle.cssにすべてのcssを書いていました。一部のcssハックがあるとvalidになりません。また、ie用のプロパティ（zoomなど）があってもvalidにならないので別ファイルにしました。invalidの部分を分割したことによりstyle.cssはvalidになりました。赤字部門の分社化みたいなものです。
ie用のcssファイルはphpでブラウザ判定し、ieのみに表示させました。なお、WordPressの関数でブラウザ判定しieのみに適用させる方法は次のとおりです。下記のget_css_ie_uri()はfunctions.phpで別途定義する必要があります。
```
<?php
global $is_IE;
if($is_IE) {
echo '<link rel="stylesheet" type="text/css" media="all" href="';echo get_css_ie_uri();echo '" />';
}
?>
```
- ☞ WordPress のグローバル変数でブラウザ判別 ≪ メモとか
上のget_css_ie_uri()をfunctions.phpに定義する場合の一例です。現在のテーマのフォルダ内にcssフォルダを作成し、その中にie.cssを作成する場合の定義です。
```
function get_css_ie_uri() {
$css_uri = get_stylesheet_directory_uri() . "/css/ie.css";
return $css_uri;
}
```
CSS3で標準採用されるかもしれないものの、現在はまだ採用されていないinvalidのプロパティはjavascriptに書きました（word-wrapなど）。jqueryを使えば次のとおりシンプルにコーディングできます。
```
$(function(){
$("p,pre").css("word-wrap","break-word");
});
```
ちなみに、pre要素にword-wrapでbreak-wordを定義していないと、上述のサンプルコード（WordPressの関数でブラウザ判定）がサイドバーにはみ出てしまいます（WordPressならプラグインのSyntaxHighlighterを使うのもありです）。
当サイトのcssをW3Cでチェックした結果です。この記事作成時は valid でした。
おめでとうございます！この文書は正当な CSS レベル 3 として検証できました!
あなたがこのWebページを作るにあたって、高度な相互運用性(Interoperability)に対する配慮を行った事を読者に示すため、このアイコンを張る事をお勧めします。あなたのWebページにこのアイコンを張るためには、次のHTMLの断片を利用すると良いでしょう。

ついでにjavascriptの構文チェック

今回はじめてjavascriptの構文チェックをしてみましたが、セミコロンの付け忘れなどのエラーしかありませんでした。構文チェックの仕方は次のページで詳しく解説されています。
- ドラッグ&ドロップするだけでJavaScriptの構文チェックができるbkhvalid - 大人になったら肺呼吸

最後に（雑感）

気軽にやり始めたら結構時間がかかりました。W3C Markup Validation Service(html)とW3C CSS Validation Serviceはもともとvalidでしたが、HTML-lintでグレーのエラーなし100点満点は今回が初めてでした。

当サイトはez-htmlで作成しているので、記事本文にはエラーはほとんどありませんでした。テンプレート部分のエラーを修正するだけでした。それでも時間がそれなりにかかりましたので、記事本文の修正もあったのなら大作業だったと思います。これから100点満点を目指す方はまとまった時間がある時にすることをお勧めします。