HTML 入門
HTML 文書を検証しよう
Nu HTML Checker で HTML 文書を検証する
HTML Validation を行えるサイトはいくつかありますが,ここでは WHATWG - HTML Conformance Checkers で紹介されている Nu Html Checker (https://validator.w3.org/nu/) を利用してみましょう.このサイトは Google 等の検索サイトで「nu html checker」と入力して検索して見つけることもできるはずです.
検索結果から Nu Html Checker (https://validator.w3.org/nu/) へ移動し,「Check by」の「text input」を選択します.
テキストエリアの中身をいったん削除します.このとき,Ctrl + A キー(macOS では ⌘ + A)ですべてを選択して削除すると良いでしょう.
HTML 文書の内容を貼り付けます.このとき,Visual Studio Code でも Ctrl + A キー,→ Ctrl + C ですべてコピーしたあと,ブラウザに移動して,Ctrl + V で貼り付けると良いでしょう.HTML ソースの貼り付けができたら「Check」ボタンをクリックします.
検証結果を確認すると,5つのエラーが出力されています.エラーの (1), (2) は 4行目に関するエラーです.これは charset
と書くべきところが charaset
となっているエラーです.エラーの (3), (5) は開始タグ <ul>
に対応する終了タグ </ul>
がなく,14行目が </ol>
となってしまっているエラーです.エラーの (4) は (3), (5) に関連して表示されたエラーですので,14行目を正しく修正すると消えるはずです.
下方向に画面をスクロールすると,ハイライトされているのでエラーの箇所を簡単に確認できます.
エラーの箇所を修正し(エディタ上で修正し,修正したものをここに貼り付け),「Check」をクリックします.
すると,すべてのエラーが修正されたことを確認できました.
このような手順で,自身で作成した HTML ファイルに文法エラーがないことを確認するようにしよう.
なお,Visual Studio Code を利用する場合は,次のページの手順にしたがって「W3C Web Validator」という拡張機能をインストールすると,Visual Studio Code 内で HTML 文書のエラーチェックができるようになります.