私のサイトが、Another HTML Lint - Gateway (HTML5) でメッチャ減点されるのは何故なの?と云う理由がようやく分かったのでメモ更新。
とりあえず「別館」と「バックステージ」の2サイトは、大きな減点部分を修正した。
↓修正後の採点結果
▲クリックで拡大
ほとんどのページで 0~40点 程度だったものが、95~99点が出るようになった。
2007~2008年頃の古い記事はまだ大きな減点が発生するが、今回はとりあえずコレでOKとする。(※ 小さな原点は修正する気はない)
余談
2017年当時、なかなか情報が集めにくかったり、Another HTML Lint - Gateway が一時的に使えない時期があった(ような記憶)もあり、さらにサイトリニューアルが中途半端な状況のまま多忙時期に突入してしまい、そのまま放ったらかしにしてしまっていた。
まえおき おわり。
以下、私が大きく間違えていた原因 2点の紹介。
原因1: <article> が間違ってた
<article>タグは、(ざっくり説明すると)HTML文書内の、メインとなる情報の部分を指定するタグ。ここの直下に Hタグ が無いと、減点の対象となるらしい。
正しい記述例(※この場合DIVは関係ない)
- <div>
<article>
<h3>~~~~~</h3>
<p>~~~~~~~~</p>
</article>
</div>
<article> タグの直下にHタグが存在することが重要。
<article> タグ内のHタグは、(HTML内で順序が守られているならば)H1からスタートしてなくてもOK。
減点される記述例
- <article>
<div> <!-- div の下に hタグ入れるとカウントされない -->
<h3>~~~~~</h3>
<p>~~~~~~~~</p>
</div>
</article>
<article> タグの中に<div>タグを入れると、その中にちゃんとHタグが存在してても「Hタグがない!」と判断して大きく減点される。
原因2: SVG が間違ってた。
SVGファイルは、「スタイルシート用」と「HTML内にインラインで設置する場合」とで、ビミョーに記述形式が違う。私は、その辺を理解していなかった。
当時お手本にしていたサイトが間違っていた事もあるが、今まで全く気が付かなかった。完全に私のミス。
正しい記述例(インライン形式)
- <?xml version="1.0" encoding="UTF-8"?>
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67">
<rect x=".5" y=".5" width="66" height="66" style="fill:#e60012; stroke:#231815; stroke-miterlimit:10;"/>
</svg>
減点される記述例(css形式)
- <?xml version="1.0" encoding="UTF-8"?>
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67">
<defs>
<style>.b{fill:#e60012;stroke:#231815;stroke-miterlimit:10;}</style>
</defs>
<rect class="b" x=".5" y=".5" width="66" height="66"/>
</svg>
私は、HTML内に直書きしてるのに、css形式を用いて<style>や<defs>のタグを追加していた。Another HTML Lint - Gateway は、こいつらを「不明なタグ」として減点する。インライン形式に変更すれば、これらのエラーは解消する。
とりあえず、この2点が、私の中で長い間「原因不明の減点」であった。
あとがき
併設の「ぼくんちのTV別館」は、
2017年3月 に HTML5化&レスポンシブ化
2017年8月 に SSL化
(このバックステージは、そこから半年~1年くらい後にHTML5化&SSL化)という感じだったけど、ずいぶん長い事放置してしまった。
というか HTML Lint - Gateway で「ココが違うよ!」と指摘されても、心に余裕が無い状態だと、そのエラーを受け止めて理解する事すらできないのだな・・・とつくづく感じてしまった。
今回の更新は以上。