神戸学院大学 経営学部 林坂ゼミ

HTML 入門トップページ

« 戻る 次へ »

HTML 入門

HTML 文書を検証しよう

Nu HTML Checker で HTML 文書を検証する

HTML Validation を行えるサイトはいくつかありますが,ここでは WHATWG - HTML Conformance Checkers で紹介されている Nu Html Checker (https://validator.w3.org/nu/) を利用してみましょう.このサイトは Google 等の検索サイトで「nu html checker」と入力して検索して見つけることもできるはずです.

2004web00070

検索結果から Nu Html Checker (https://validator.w3.org/nu/) へ移動し,「Check by」の「text input」を選択します.

2004web00071

テキストエリアの中身をいったん削除します.このとき,Ctrl + A キー(macOS では + A)ですべてを選択して削除すると良いでしょう.

2004web00072

HTML 文書の内容を貼り付けます.このとき,Visual Studio Code でも Ctrl + A キー,→ Ctrl + C ですべてコピーしたあと,ブラウザに移動して,Ctrl + V で貼り付けると良いでしょう.HTML ソースの貼り付けができたら「Check」ボタンをクリックします.

2004web00073

検証結果を確認すると,5つのエラーが出力されています.エラーの (1), (2) は 4行目に関するエラーです.これは charset と書くべきところが charaset となっているエラーです.エラーの (3), (5) は開始タグ <ul> に対応する終了タグ </ul> がなく,14行目が </ol> となってしまっているエラーです.エラーの (4) は (3), (5) に関連して表示されたエラーですので,14行目を正しく修正すると消えるはずです.

2004web00074

下方向に画面をスクロールすると,ハイライトされているのでエラーの箇所を簡単に確認できます.

2004web00075

エラーの箇所を修正し(エディタ上で修正し,修正したものをここに貼り付け),「Check」をクリックします.

2004web00076

すると,すべてのエラーが修正されたことを確認できました.

2004web00077

このような手順で,自身で作成した HTML ファイルに文法エラーがないことを確認するようにしよう.

なお,Visual Studio Code を利用する場合は,次のページの手順にしたがって「W3C Web Validator」という拡張機能をインストールすると,Visual Studio Code 内で HTML 文書のエラーチェックができるようになります.

目次に戻る