私のサイトが、Another HTML Lint - Gateway (HTML5) でメッチャ減点されるのは何故なの?と云う理由がようやく分かったのでメモ更新。

とりあえず「別館」と「バックステージ」の2サイトは、大きな減点部分を修正した。
↓修正後の採点結果
Another HTML Lintで高得点
▲クリックで拡大
ほとんどのページで 0~40点 程度だったものが、95~99点が出るようになった。
2007~2008年頃の古い記事はまだ大きな減点が発生するが、今回はとりあえずコレでOKとする。(※ 小さな原点は修正する気はない)

余談

2017年当時、なかなか情報が集めにくかったり、Another HTML Lint - Gateway が一時的に使えない時期があった(ような記憶)もあり、さらにサイトリニューアルが中途半端な状況のまま多忙時期に突入してしまい、そのまま放ったらかしにしてしまっていた。

まえおき おわり。
以下、私が大きく間違えていた原因 2点の紹介。

原因1: <article> が間違ってた

<article>タグは、(ざっくり説明すると)HTML文書内の、メインとなる情報の部分を指定するタグ。ここの直下に Hタグ が無いと、減点の対象となるらしい。

正しい記述例(※この場合DIVは関係ない)

<article> タグの直下にHタグが存在することが重要。
<article> タグ内のHタグは、(HTML内で順序が守られているならば)H1からスタートしてなくてもOK。

減点される記述例

<article> タグの中に<div>タグを入れると、その中にちゃんとHタグが存在してても「Hタグがない!」と判断して大きく減点される。

原因2: SVG が間違ってた。

SVGファイルは、「スタイルシート用」と「HTML内にインラインで設置する場合」とで、ビミョーに記述形式が違う。私は、その辺を理解していなかった。
当時お手本にしていたサイトが間違っていた事もあるが、今まで全く気が付かなかった。完全に私のミス。

正しい記述例(インライン形式)

減点される記述例(css形式)

私は、HTML内に直書きしてるのに、css形式を用いて<style>や<defs>のタグを追加していた。Another HTML Lint - Gateway は、こいつらを「不明なタグ」として減点する。インライン形式に変更すれば、これらのエラーは解消する。

とりあえず、この2点が、私の中で長い間「原因不明の減点」であった。

あとがき

併設の「ぼくんちのTV別館」は、
2017年3月 に HTML5化&レスポンシブ化
2017年8月 に SSL化
(このバックステージは、そこから半年~1年くらい後にHTML5化&SSL化)
という感じだったけど、ずいぶん長い事放置してしまった。

というか HTML Lint - Gateway で「ココが違うよ!」と指摘されても、心に余裕が無い状態だと、そのエラーを受け止めて理解する事すらできないのだな・・・とつくづく感じてしまった。

今回の更新は以上。