HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
    1. HTML 文書を準備する
    2. Nu HTML Checker で HTML 文書を検証する
    3. Visual Studio Code で HTML 文書を検証する
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

HTML 文書を検証してみよう

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

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

03-01-2022

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

03-02-2022

テキストエリアの中身を一旦削除して，HTML 文書の内容を貼り付けます．このとき，Ctrl + A キー（macOS では ⌘ + A）ですべてを選択して削除したり，コピーしたりすると良いでしょう．

03-03-2022

HTMLソースの貼り付けができたら「Check」ボタンをクリックします．

03-04-2022

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

03-05-2022

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

03-06-2022

エラーの箇所を修正し（エディタ上で修正し，修正したものをここに貼り付け），「Check」をクリックします．

03-07-2022

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

03-08-2022

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

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

« 戻る 次へ »