今までこちらのサイトは、HTML 4.01 か XHTML を使っていたけれど、殆どのブラウザが対応しているということで、全て HTML 5 に変更
ほとんどヘッダの書き換えですんだけれど、
- 今まで文法チェッカに Another HTML-lint を使っていたのだけれど、HTML 5 に対応していない
一応これをフォークして HTML 5 に対応させた Another HTML-lint 5 が有るが、ローカルで実行するための環境が用意されていない
オリジナルは、Perl さえ有ればローカルで実行できたのに
簡易チェックとしては、HTML tidy が使える
しかし HTML 5 に準じたチェックが出来ず、HTML 5 で廃止された属性が有っても、警告を出さないようなので、W3C 純正の Nu Html Checker を使うことにする
これは JAVA が有れば、GitHub のレポジトリからダウンローとして、次の要領でローカルで動かせるjava -jar ~/bin/vnu/vnu.jar hoge.htmただ次の理由で、下記の様のシェルスクリプト化している
- サブディレクトリも含めた一括処理も同じ UI でやりたい
- エラー結果をエディタで取り込んで、タグジャンプなどで再利用しやすいようしたい
#!/bin/sh case "$(uname)" in Darwin|*BSD) sed="sed -E";; *) sed="sed -r";; esac java -jar "$HOME/bin/vnu/vnu.jar" --skip-non-html "$1" 2>&1 | \ $sed -e 's/^"file:(.+)":([0-9]+)\.([0-9]+)([^:]+)/\1:\2:\3/g' exit 0Another HTML-lint よりチェックが甘い (推奨された属性はなくても警告しない) 気もするが、style 属性の中身までチェックしてくれるのはありがたい
その影響か次のどちらかで、CSS ファイルもチェックできる。ただこれはコメント未対応なので別のツールを使ったほうが良い
現状の問題は、htmllint でやってくればローカルファイルへのリンクをチェックしてくれない点。
java -jar ~/bin/vnu/vnu.jar --css hoge.htmjava -jar ~/bin/vnu/vnu.jar --skip-non-css hoge_dir/ - より一層、構造と見栄えの分離が行われており、やはり書き換え必要な属性が有った
img タグの width, height でピクセル単位の指定は OK だけど、% 指定だと上記の文法チェッカでエラー扱いになるのは驚いた
- 文字コードの指定は、省略可能になったけれど、ここ一年 (2018/03/29) で、まだ文字化けしてるケースを見た (特にシェアされているケースで) ことが有るので、次の旧形式の記述はそのままにする
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- 同じ理由で省略可能な次の標準スタイル・シート、スクリプト形式の記述も書いておくことにする
<meta name="Content-Style-Type" content="text/css"> <meta name="Content-Script-Type" content="text/JavaScript">