W3C Markup Validator
W3C Markup Validation ServiceでHTMLのエラーを見つけて修正します
「W3C Markup Validator」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
バリデーターがチェックする内容
W3C Markup Validator（validator.w3.org）は、公式仕様に照らしてHTMLを解析し、仕様違反をすべて報告します。閉じられていないタグ、無効な入れ子（<p>の中に別の<p>がある）、必須属性の欠落（alt属性のないimg）、認識されない要素など、多くの問題を検出します。
バリデーションが重要な理由
無効なHTMLでも現在のどのブラウザでも表示できる場合があります。しかし、各ブラウザは異なる方法でエラーを補正できるため、Chromeで問題なく見えてもFirefoxでは壊れることがあります。正しいHTMLを使えば、予測可能で一貫した表示になり、スクリーンリーダー、検索クローラー、メールクライアントでの予期せぬ動作も避けられます。
送信する3つの方法
URLによる検証（ページのURLを貼り付ける）、ファイルのアップロードによる検証、直接入力による検証（HTMLを貼り付ける）の3つの方法があります。本番ページにはURLが最適です。まだどこにも公開されていないファイルを開発中に検証する場合は、直接入力が便利です。
結果の読み方
エラーには、行番号、問題のあるマークアップの抜粋、説明が表示されます。多くのエラーは先に発生した1つのミスから連鎖的に生じるため、上から順に修正します。最初のいくつかを修正したら再実行し、残った警告のうち正当なものがいくつあるかを確認します。
警告とエラーの違い
エラーは仕様違反であり、表示を壊す可能性があります。警告は、技術的には有効でも意図したものではない可能性が高い、疑わしいパターンです（誤記と思われる属性名、アクセシビリティに関するヒントなど）。エラーは必ず修正し、警告は調査する価値のあるものとして扱います。
よくあるエラー
img の alt 属性の欠落。自己終了タグの閉じ方が不適切（有効な従来形式の <br/> ではなく <br> になっている）。ページ内での id の重複。input の id と一致する for 属性がないフォームラベル。インタラクティブ要素の入れ子（a の中に button がある状態）。この5つで、バリデーターの出力の大半を占めます。
テンプレートの検証
HTML がテンプレートから生成される場合は、テンプレートのソースではなく、最終的な出力（レンダリングされたページ）を検証してください。{{ }} プレースホルダーは有効な HTML ではなく、重要なのはエンジンが生成する内容だけです。テストビルドでレンダリングしたページに対して、CI からバリデーターを実行してください。
html-validate CLI
CI に統合するには、html-validate npm パッケージを使用します。npx html-validate "public/**/*.html" を実行すると、ビルド内のすべてのページを検証できます。ルールは .htmlvalidate.json で設定します。これを使って、バリデーションのリグレッションがある場合にビルドを失敗させます。
Stylelint とソース段階のLint
書き込み時のLint（CSS の stylelint、React の eslint-plugin-jsx-a11y）を使うと、多くの問題をバリデーターに到達する前に検出できます。CI でのエンドツーエンドのバリデーションと組み合わせて多層防御にしましょう。大半の問題を早期に検出し、残りをデプロイ前に検出できます。
バリデーションでは検出できないもの
バリデーションでチェックできるのはマークアップの正しさであり、意味論ではありません。すべての見出しを <h6> にしたページは有効な HTML ですが、意味論的には不適切です。Lighthouse のアクセシビリティ監査と手動レビューを行うことで、バリデーターでは検出できない意味論上の問題を見つけられます。
Quirks Mode に関する警告
<!doctype html> がないと Quirks Mode が有効になります。ブラウザーが従来の互換性レイヤーを使用するため、最新の CSS が正しく動作しなくなります。バリデーターは doctype の欠落を最初のエラーとして報告します。doctype 宣言なしでページをデプロイしないでください。
継続的なバリデーション
GitHub Actions を使い、すべての PR でバリデーションを実行します。html-validate をインストールし、ビルドしたサイトに対して実行し、エラーがあれば PR を失敗させてください。新しいエラーをレビュー時に検出できるため、数か月にわたって蓄積して後から修正するのが困難になる事態を防げます。
理解度チェック
<!doctype html> 宣言がないことは、なぜ W3C バリデーターにとってそれほど重要なのでしょうか。
まとめ
W3C Markup Validator は仕様に基づいて HTML を解析し、無効なマークアップを報告します。単発のチェックには Web UI を使い、継続的な検証には CI で html-validate CLI を使ってください。よくある問題には、alt の欠落、id の重複、doctype の欠落、インタラクティブ要素の入れ子があります。バリデーションはマークアップのエラーを検出するものなので、意味論とアクセシビリティの品質を確認するには Lighthouse と手動レビューも組み合わせてください。
よくある質問
「W3C Markup Validator」レッスンは無料ですか？
はい。「W3C Markup Validator」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「W3C Markup Validator」で何を学びますか？
W3C Markup Validation ServiceでHTMLのエラーを見つけて修正します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「W3C Markup Validator」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- W3C Markup Validator
- LighthouseによるHTML監査
- アクセシビリティテストのためのPa11yとaxe
- HTMLスナップショットテスト