サイトを HTML 5 にする

今までこちらのサイトは、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 0

    Another HTML-lint よりチェックが甘い (推奨された属性はなくても警告しない) 気もするが、style 属性の中身までチェックしてくれるのはありがたい

    その影響か次のどちらかで、CSS ファイルもチェックできる。ただこれはコメント未対応なので別のツールを使ったほうが良い

    現状の問題は、htmllint でやってくればローカルファイルへのリンクをチェックしてくれない点。

    java -jar ~/bin/vnu/vnu.jar --css hoge.htm
    java -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">

ウェブ サイト内
RSS 配信