0Pricing
HTML for Kids · レッスン

HTMLを検証する

コードがHTML標準に準拠していることを確認します

「HTMLを検証する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。

HTMLを検証する理由

HTMLを検証する

次のレッスンへようこそ！今日は、HTMLコードがWeb標準に従っており、エラーがないことを確認する方法を学びます。検証を行うことで、よりよいWebページを作成できます。

HTMLを検証する — イラスト1

HTMLの検証とは？

検証とは、Web標準に従ってHTMLコードが正しく記述されているかを確認することです。

HTMLを検証するメリット:

  • コードにエラーがないことを確認できます。
  • すべてのブラウザーとの互換性を高められます。
  • アクセシビリティとSEOを改善できます。

よくあるHTMLエラー

避けるべき、よくある間違いを紹介します。

  • 終了タグがない。
  • 正しくないタグ名を使用している。
  • 属性値を囲む引用符を忘れている。

例: よくある間違い:

<a href=https://example.com>Click here<a>

修正版:

<a href="https://example.com">Click here</a>

W3C Validatorを使う

W3C Validatorは、HTMLコードのエラーや警告を確認できる無料ツールです。次の手順に従ってください。

  1. validator.w3.orgにアクセスします。
  2. 次のいずれかのオプションを選択します。
    • Direct Input: HTMLコードを貼り付けます。
    • File Upload: HTMLファイルをアップロードします。
    • URL: WebページのURLを入力します。
  3. Checkをクリックして結果を確認します。

検証エラーを修正する

コードを検証すると、検証ツールによってエラーや警告が一覧表示されます。次の方法で修正してください。

  • エラーメッセージを注意深く読みます。
  • コード内で問題のある箇所を見つけます。
  • 必要な修正を行います。

ヒント: 変更を加えたら、必ずコードを再検証してください。

検証のベストプラクティス

検証エラーを避けるため、次のヒントに従ってください。

  • 正しい文書型宣言（例: <!DOCTYPE html>）を必ず使用します。
  • すべてのタグを正しく閉じます。
  • タグ名には小文字を使用します。
  • 画像にはalt属性を含めます。

例:

<!DOCTYPE html>
<html>
  <head>
    <title>Validated Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <img src="image.jpg" alt="Description of the image" />
    <p>This is a valid HTML page.</p>
  </body>
</html>

実際の例

検証に問題があるページの例を見てみましょう。

<!-- Incorrect HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  <body>
    <h1>Welcome</h1>
    <img src="image.jpg">
    <p>This is my first page.
  </body>
</html>


<!-- Correct HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <img src="image.jpg" alt="A sample image">
    <p>This is my first page.</p>
  </body>
</html>

自分で試す

正しいHTMLページを作成してみましょう。次の例を使ってください。

<!DOCTYPE html>
<html>
  <head>
    <title>Validation Example</title>
  </head>
  <body>
    <h1>My Validated Page</h1>
    <img src="example.jpg" alt="An example image">
    <p>This page passes validation!</p>
  </body>
</html>

HTML検証のまとめ

よくできました！

おめでとうございます！HTMLコードを検証し、よくあるエラーを修正する方法を学びました。検証は、プロフェッショナルでアクセシブル、かつブラウザー互換のWebページを作成するうえで重要な手順です。次のレッスンでは、スキルを定着させるための発展的なトピックと楽しい課題に進みます。この調子で頑張りましょう！

HTMLを検証する — イラスト10

よくある質問

「HTMLを検証する」レッスンは無料ですか？

はい。「HTMLを検証する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。

「HTMLを検証する」で何を学びますか？

コードがHTML標準に準拠していることを確認します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「HTMLを検証する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 読みやすいコードを書く
  2. アクセシビリティの基礎
  3. HTMLを検証する
  4. HTMLコメント
← HTML for Kidsに戻る