HTML講座 / HTMLのエラーを探して文書を検査する

HTMLの文法は、最新のファイルを保存したうえでNu HTML Checkerなどを使って確認します。ブラウザーが表示を補修することがあるため、画面が見えるだけでは正しさの証明にはなりません。構文の検査とリンク・フォームなどの動作確認を分けて行います。

まず保存した文書を開く

エディターで保存し、意図したファイルをブラウザーで開きます。見出し、段落、画像、フォームが予定した場所へ出るかを見ます。見た目に問題がなくても、DOMが意図と違う構造になっていることがあります。

修正を始める前に元ファイルのコピーを残すと比較しやすくなります。開いている場所と保存場所が違えば、正しい修正も反映されません。まず同じファイルを見ていることを確認してください。

Nu HTML Checkerを使う

Nu HTML Checkerでは公開URL、ファイル、直接入力したコードなどを検査できます。未公開のローカル文書ならファイルか直接入力を使います。秘密情報を含むソースを公開サービスへ送らないようにします。

保存、入力方法の選択、検査、指摘箇所の修正、再保存、再検査の順で進めます。指摘が多い場合は最初のエラーと直前のタグや属性から確認します。引用符の閉じ忘れなどが後の行へ影響し、検出された行が原因そのものではない場合があります。

次は同じIDを二度使った例です。二つ目のidをemail-checkにし、対応するlabelのforも変えます。

<label for="email">Email</label>
<input id="email" name="email" type="email">
<label for="email">Confirm email</label>
<input id="email" name="email_check" type="email">

古いファイルを検査し直さず、保存済みの修正版を使ってください。短い記述が常に誤りではなく、文脈によって終了タグを省略できる要素もあります。構文の基礎はタグ・属性・入れ子で確認できます。

意図的な失敗例と修正例を比較する

次の完全な文書は重複IDを含む失敗用の例です。invalid.htmlに保存して検査し、emailの重複についての指摘を探します。そのまま本番へ使うコードではありません。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document-validation practice</title>
</head>
<body>
  <h1>Label-validation practice</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Confirm email</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

次をvalid.htmlに保存します。二つ目のIDとラベルの参照先を同時に修正しています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document-validation practice</title>
</head>
<body>
  <h1>Label-validation practice</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Confirm email</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

修正例を検査し、重複IDの指摘が解消したか確認します。各ラベルをクリックし、それぞれ正しい欄へフォーカスするかも比べます。具体的な診断文は検査サービスやファイルの内容で変わる場合があります。構文が直っても、参照先を変え忘れていれば使い勝手の問題は残ります。

文法検査だけで完了とはしない

検査では、リンクが意図した記事へ接続するか、altが適切か、サーバーがフォームを処理するかまでは保証されません。リンク、画像のパス、キーボード、狭い画面での表示も確認します。実践は複数ページサイトの確認で行えます。

ファイル検査はそのファイル、URL検査はサーバーが返す文書を対象にします。WordPressではテーマやプラグインが本文を包むため、原稿の断片と公開ページ全体では結果が違う場合があります。本文の問題と外側の生成HTMLの問題を区別して調べてください。