HTMLコーディングチェックツールを使うと、「コンテンツが正しく表示されないのに、何度確認しても原因がわからない」といったときにエラー個所をスムーズに探すことができます。
今回は、HTMLコーディングチェックツールの特徴や使い方、HTMLコードでよくある文法ミスと対処法、おすすめのHTMLコーディングチェックツールなどを紹介します。
目次
HTMLコーディングチェックツールとは
はじめに、HTMLコーディングチェックツールについて簡単に紹介します。
コードの確認・修正を効率化できるツールのこと
HTMLコーディングチェックツールとは、HTMLコードの確認作業を効率化できるツールのことです。コードが正しいかどうかを1つずつ確認するには多大な労力と時間がかかりますが、HTMLコーディングチェックツールを使うと、記述したHTMLコードや該当ページのURLを貼り付けるだけで、スムーズに文法ミスやエラーの有無を確認できます。
文法ミスがあるとどうなる？どこまで修正すべき？
HTMLコードに文法ミスがあると、レイアウトが崩れたり、内容が正しく表示されなかったりなど、コンテンツの表示に影響します。また、リンク切れやタグの並び順の間違いがあった場合、ユーザビリティが低下してしまう（コンテンツが読みづらいことで離脱率が上がってしまう）ため、利便性の高いWebサイトにするためにもコードチェックが必要です。
ただし、SEO（検索エンジン最適化）にはそれほど影響はなく、実際のところHTMLが正しい文法で記述されたWebサイトは世界的にみても5%未満といわれています。そのため、文法エラーをどこまで修正するかは、「コンテンツの表示に悪影響がないか」「OSなどの互換性に問題が発生しないか」を判断基準とします。この2点に引っかかるような文法ミスは早い段階で取り除き、そのほかは優先的に修正する必要はないでしょう。
コードのチェック＆修正をまとめて任せたい場合や、コードの細かな点まで修正したい場合、プログラマーに依頼するケースもあります。プログラマーの探し方や費用相場、依頼する際のポイントなどについては、以下のページを参考にしてください。
コーディングチェックツールを使う際の注意点
HTMLコーディングチェックツールは基本的にオンラインで利用でき、ブラウザからアクセスすることも可能です。簡単にHTMLコードの検証を行える反面、ソースコードの公開前の段階で利用すると情報漏洩のリスクがある点には注意が必要です。社外秘の文書などを扱う場合、オンラインのHTMLコーディングチェックツールは使わず、ローカル環境で操作できる（PCにダウンロードして利用する）ツールを選択するようにしましょう。
起こしがちなHTMLコードの文法ミス3選
HTMLを記述する際、誤表記やエラーを起こしてしまった経験は誰しもあることでしょう。文法ミスのなかでも特に多いのが以下の3点です。
閉じタグ忘れ
基本的なHTMLコードの文法は、開始タグと閉じタグがきちんとセットになっていることがポイントです。しかし、コードの書き直しや組み直しを繰り返していると、うっかり閉じタグを忘れてしまうことも少なくありません。Webページのデザインが崩れている場合、まずは閉じタグ忘れを疑いましょう。特に入れ子になるタグ（divなど）は注意が必要です。インデントを揃えると、閉じタグ忘れのミスに気付きやすくなります。
クラス名のスペルミス
閉じタグ忘れに続いてやってしまいがちなのが、クラス名のスペルをうっかり間違えることです。「ページの表示がうまくいかない原因を探っていたら単純なスペルミスだった」という場合も意外と多いため、検索・置換機能などを使ってスペルミスを未然に防ぐことをおすすめします。1文字違うだけでもエラーになるため、英数字や記号の半角・全角や、スペースの半角・全角などが正しい表記になっているかも事前にチェックしましょう。
タグが古い
HTMLの古いタグを使っていると、文法エラーにつながります。HTMLのバージョン（HTML4・HTML5・HTML Living Standardなど）によって、タグと属性の組み合わせや使い方が異なる場合があるためです。これまで使っていたタグが、HTMLの最新バージョンでは非推奨というケースもみられるため、タグが古いままになっていないか、定期的なチェックを行いましょう。
おすすめHTMLコーディングチェックツール・サイト3選
ここでは、おすすめのHTMLコーディングチェックツールを紹介します。
Another HTML-lint gateway
Another HTML-lint gatewayは、オンラインでHTML（またはXHTML）の文法をチェックし、結果を点数表示できるWebサイトです。ダウンロードすればローカル環境でも使用できます。チェック項目が多数あり、自分で項目をカスタマイズすることも可能です。
エラーの警告には重要度に応じて数値が表示され、修正が必要かの見極めの参考になります。また、エラー警告に疑問を感じた時は、解説を読み、正しい記述法を学ぶこともできます。ただし、チェックの対象は文法のみで、HTMLの記述内容の評価はしていません。
Markup Validation Service
Markup Validation Serviceは、Webで利用される技術の標準化を推進する非営利団体・W3Cがフリーで公開しているWebサイトです。オンラインでHTML文書がHTML・XHTML標準に準拠しているかどうかを検証してくれます。随時更新されており、HTML5にも対応しています。
検証法は「Address欄にサイトのURLを入力する」「ファイルをアップロードする」「直接記述する」の3つです。コードチェックの結果、エラーがあった場合はコードの該当箇所と解説（3行目2列目にエラーがあるといったメッセージ）が表示されるため、正しいマークアップを学びつつ自分で修正を行えます。
Validator.nu (X)HTML5 バリデーター
Validator.nu (X)HTML5 バリデーターは、HTMLコードを正しく記述できているかをチェックできるWebサイトです。コードチェックを行う際は、「HTMLファイルのアップロード」「SVGドキュメントのURL添付」「HTMLコードの直接入力」のいずれかの方法を選択でき、簡単にHTML・CSSの文法をチェックできます。
また、コードチェックの結果を画像レポートで出力することも可能で、記述したHTMLコードのエラー個所が「黄色のハイライト」で表示されるため、文法ミスの有無をひと目で確認しやすいことがメリットです。
HTMLの作成・チェック・修正は「クラウドワークス」へ
HTMLのコーディングやチェック、修正を自分で行うのが難しい場合や、コーディングに自信がない場合は、プロのプログラマーに依頼してみるのもいいでしょう。「知人にプログラマーがいない」「制作会社に依頼するのは気が引ける」といった際は、クラウドソーシングサービス（仕事を依頼したい人・受注したい人をインターネット上でマッチングするサービス）の活用がおすすめです。
例えば、国内大手の「クラウドワークス」にはHTMLのコーディングを得意とするプログラマーが多数登録しています。各々のスキルや実績、受注数などの詳細も確認できるため、信頼の置けるクラウドワーカーに依頼することができます。
▶HTML関連の仕事を依頼できる人材も多数！実際のプロフィールを見てみる
システム関連会社や個人として独立しているプログラマーへ依頼しにくい小さな依頼（ごく簡易的なHMTLコーディング、自作のHTMLのチェック・修正など）であっても発注でき、難易度の低い仕事ほど安価で受けてもらえるため気軽に依頼できます。
▶どの仕事をいくらで頼める？発注の相場感を知りたい方はこちら
【クラウドワークスでの発注事例】
・HTMLコードのエラー個所を教えてください（修正は不要）：エラー1つあたり500円
・HTMLコードを用いたメルマガ作成（自社商品の定期通販）：1通あたり3,000円
・HTMLやCSS、JavaScriptに詳しいWebデザイナー募集：時給1,500～2,000円
・Webサイトの構築を任せられるフロントエンド・エンジニア募集：時給2,000～3,000円
・HTMLやPHP、MySQLを扱えるコーダー募集：報酬は要相談（予算5万円程度）
そのほか、プログラムに不具合があった際の対応を単発で依頼したり、定期メンテナンスを長期的に依頼したりなど、さまざまなシーンで活用されています。
▶クラウドワークスの使い方や事例がわかる資料をダウンロードする
ホームページやLP、コーポレートサイトなど、Webコンテンツを制作する際に重要な「Webデザイン」については、以下のページで詳しく紹介しています。
関連記事：Webデザイン費用の相場を紹介
クラウドワークスのサービス資料
サービス特徴、活用事例、発注相場などを紹介しています。
【こんな方におすすめ】
・サービスを詳しく知りたい
・外部人材の活用を検討したい
・発注相場や事例を知りたい
