拝啓

最近ちょっとしたアクセシビリティに関わるテストを行っていた。テストなので文法的に正しいHTMLを書く必要があった。その昔はどの要素の子供にどの要素を入れてはいけないかということがある程度覚えられていたのだが、私が怪しくなってきたことと世の中が複雑になってきたことで、やはり計算機に教えてもらったほうが良いような気がしてきた。

ということで、VSCodeでHTMLをチェックしてくれるものを探してみたので、その時の記録である。

比較したもの

テストコード

下記のコードでテストを行った。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Simple HTML validation check</title>
</head>

<body>
    <ul>
        <li>Hello</li>
        <ul>
            <li>Good morning</li>
        </ul>
    </ul>
</body>

</html>

UL要素の中に直接ULを入れてはいけない。

結果

HTMLHintでは、上記のHTMLはエラーにならない。よって、HTMLとして正しいかどうかを確認するために使うには注意が必要となる。

Web Validatorはちゃんとエラーにしてくれる。

なお、W3C Validationは、私の設定方法が悪いのだろう、正しく動作させることができなかった。

なぜ正しいHTMLを書くのか

ブラウザはある程度正しくないHTMLでもちゃんと表示してくれる。上記のコードでも問題なく表示されるだろう。なのに正しいHTMLを書こうとしている。それには次のようなメリットがあると私は思っている。

機械が理解しやすいHTMLになる
検索エンジン対策になるかもしれない
翻訳・要約・言い換えなどのサービスで利用しやすくなるかもしれない
アクセシビリティの向上に案外貢献できる

HTMLは、文書の構造を表そうとしているマークアップ言語である。この構造を正しく表現することで、機械（コンピュータ）は作者の意図を正しく理解することができる。ここまでいけば、検索エンジン対策、翻訳や要約、あるいは音声での読み上げなど、機械が介在するサービスやアプリケーションとは相性が良くなるはずだ。

ということで、文法的に正しいHTMLを書くことのできそうな拡張機能の紹介である。