12. HTML の検証とデバッグ

HTML を作成する際には、コードが正しく動作することを確認するために検証とデバッグが必要です。この章では、HTML の検証とデバッグの基本手法について学びます。

12.1 検証の重要性

HTML の検証は、コードが標準に準拠しているかどうかをチェックするプロセスです。検証することで、以下のようなメリットがあります。

W3C の公式検証ツールを使うことで、HTML コードの構文エラーを簡単にチェックできます。以下の手順で使用します。

<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
    <p>これはテストページです。</p>
  </body>
</html>

このコードを W3C の検証ツールにかけると、エラーがなければ「Document checking completed. No errors or warnings to show.」と表示されます。エラーがある場合は、エラーの詳細が一覧表示されます。

ほとんどのモダンブラウザには開発者ツールが組み込まれています。

検証ツールを使うことで、DOM の構造をリアルタイムでチェックしたり、スタイルやスクリプトのエラーを確認できます。

デバッグとは、エラーや問題点を見つけて修正するプロセスです。効果的なデバッグのステップは以下の通りです。

以下に、典型的な HTML エラーのデバッグ例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>テストページ</title>
</head>
<body>
    <h1>こんにちは、世界！
    <p>これはテストページです。
</body>
</html>

この HTML コードには二つのエラーがあります：<h1>タグと <p>タグが閉じられていません。

<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
    <p>これはテストページです。</p>
  </body>
</html>

問題を特定し、必要な修正を施すことで、ページが正しく表示されるようになります。

コード内にコメントを残すことで、後から見直した際に理解しやすくなります。

<!-- これはページのタイトル -->
<title>テストページ</title>

Git などのバージョン管理ツールを使うことで、変更履歴を追跡・管理できます。

git init
git add index.html
git commit -m "初回コミット"

以下の HTML コードを修正し、W3C の検証ツールでエラーが出ないようにしてください。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
<body>
    <h1>間違ったHTMLコード</h1>
    <p>いくつかのエラーがあります。</p>
</body>
</html>

ブラウザの開発者ツールを使って、任意のウェブページの HTML 構造を確認し、その中で見つけたエラーを報告してください。

これで、「HTML の検証とデバッグ」についての説明は終了です。検証とデバッグは HTML 開発において不可欠なスキルですので、しっかりマスターしておきましょう。