HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！

HTMLエラーチェッカーとは

フロントエンジニアにHTMLは必須の言語ですが、HTMLに慣れてくると、ついついミスを犯しがちです。基本的なHTMLコードは、基本的に開始タグと閉じタグがセットになっていなければなりませんが、うっかり閉じタグの記述を忘れると画面レイアウトが崩れる原因になることがあります。

こうしたコーディングミスを簡単に発見してくれるのが「HTMLエラーチェッカー」です。一時的に、ChromeストアからHTMLエラーチェッカーがなくなっ たことがありましたが、現在は改良版がアップされていますので、問題なく利用できます。

HTMLの編集ソフトおすすめ5選！初心者向け【2021年版】

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

HTMLエラーチェッカーはWebブラウザ、Chromeの拡張機能です。HTMLエラーチェッカーではWebのレイアウトの崩れ、表示不具合の原因であるHTML構文ミス（閉じタグの記述漏れ）を検出するツールです。

HTMLは多少のミスは許容されてしまうため、案外ミスを見逃しがちですが、場合によっては表示の不具合でユーザに迷惑を掛け、商用サイトでは受注減や企業への信頼低下につながりかねないため、品質にはこだわるべきです。

HTMLエラーチェッカーを利用することで、品質向上の一助となるため、コーディングを仕事とする方、フロントエンジニアはぜひ使うべきツールです。

HTMLエラーチェッカーと聞くと、全てのエラーを見つけてくれるように気がしますが、実はできることは以下の2点のみに限定されます。

▪開始・終了タグの閉じミスの検知  ▪エラー件数・エラー箇所の報告

それでも、HTML記述ミスで最も多いと言われるHTMLタグの閉じ忘れや閉じミスを検知してくれるのは大変ありがたい機能です。さらに、このエラー検知が簡単に行えるため、コーディングミスの不安が解消し、生産性向上にもつながります。

ここまで述べた通り、HTMLエラーチェッカーはHTMLコーディングにおけるミスの防止に有効ですが、他にサイト公開前チェックや納品前チェックでも使えます。そのため、コーディング担当者は当然ですが、品質管理を行うWeb担当者やWebディレクターなど、Web制作に関わるすべての人に役立つツールと言えます。

HTMLエラーチェッカーを使ってみる

HTMLエラーチェッカーの概要や利用目的を理解したところで、実際にHTMLエラーチェッカーを導入してみましょう。

Chromeの拡張機能追加は大変簡単です。以下のHTMLエラーチェッカーのリンクを開き、『Chromeに追加』のボタンを押すだけです。『HTMLエラーチェッカーがChromeに追加されました』というメッセージが表示されれば完了です。 【参考】：HTMLエラーチェッカー（Chromeウェブストア）

《注意》：ブラウザとしてChromeが前提ですので、HTMLエラーチェッカーを使う場合は、Chromeがインストールされている必要があります。新たにChromeをインストールされる方は以下のサイトを利用してください。 【参考】：Google Chrome をダウンロードしてインストールする（Google Chrome ヘルプ）

前述のChromeの拡張機能としてHTMLエラーチェッカーが追加されると、Chrome画面の右上に、「拡張機能」のアイコンが追加されます。続いて、以下の手順でHTMLエラーチェッカーを利用します。

1.Chromeを起動し、チェックをしたいWebページにアクセスする 2.Chrome画面の右上、「拡張機能」アイコンをクリックし、『HTMLエラーチェッカー』のアイコンを押す 3.Webページのエラーチェックが行われ、結果が表示される

▪エラーが無い場合は、青色のポップアップで「タグはおそらく完璧です」と表示されます。 ▪エラーが発見された場合は、赤色のポップアップで「〇個のタグが対応していません」という表示とともに、その下にエラー行とエラー内容が表示されます。

HTMLエラーチェッカーには、オプションに「自動チェック機能」があります。 自動チェック機能を設定しておくと、Webページを見るだけで自動的にエラーチェックしてくれます。

HTMLエラーチェッカーのアイコンを右クリックして表示される『拡張機能を管理』をクリックし、「拡張機能」の画面が開いたら『オプション』をクリックします。 次に「自動チェック機能を有効にする」ボタンを『ON』にします。

自分が担当しているWebページなど、常にチェックするページを指定したい場合は、その下にある 「フィルタリング用のURLを設定」欄にページのURLを入力しておくと、指定したページだけが毎回チェックされるので、変更時などのチェック漏れを防げます。

■オリジナルの警告ルールを設定する

HTMLエラーチェッカーは、独自のエラーチェックのルールの追加が可能です。

例えば、担当しているWebサイトのSSL化を行った際に、httpのWebページが残っていないかなどのチェックが自動で行えます。

HTMLエラーチェッカーの設定画面下部の「フィルタリング用のキーワードを設定」入力欄に、http:// （チェックしたいサイトのドメイン）を記述しておくと、サイト内にhttpページが残っているとエラーが表示されます。

HTMLエラーチェッカーには当初バグがあり、ローカルファイルのチェックで「リロードしてください」と表示され、解析ができないという問題がありましたが、既にバグは解消していますので、過去にHTMLエラーチェッカーをうまく使えなかった方は改めて試してみてください。

オンラインHTMLエラーチェックサイトを活用

HTMLエラーチェッカーをChromeの拡張機能で利用する方法を説明しました。実際に試した方は、その便利さを実感されたことと思います。しかし、HTMLエラーチェッカーはシンプルな反面、エラーチェック機能が限定されています。

「開始・終了タグの閉じミスの検知 」機能だけあれば十分だという方は、そのままHTMLエラーチェッカーを活用してください。一方、他の文法チェック機能が欲しいという方には、オンラインで利用できるHTMLエラーチェッカーサイトを1つご紹介します。

「Markup Validation Service」はWeb技術の標準化を推進する、非営利団体「W3C（World Wide Web Consortium）」が無償で提供しているHTMLの文法チェッカーのオンラインサイトです。

HTMLの仕様を決めているW3Cが提供しているだけあって、チェックの精度は高いと評判です。HTML5への対応などもあり、おすすめのHTMLエラーチェックサイトですが、Webサービス版は時に処理が重たいのと、英文である点が弱点です。

ただ、Chromeの自動翻訳機能を使えば、多少翻訳ミスはあるものの、かなり使えるサービスです。

オンラインサービスと、オープンソースによるローカルで動作するツールの2種類がありますが、ここではオンライン環境で気軽に利用できるサービスを紹介します。

使い方は至って簡単で、下記のサイトにアクセスし、「Address欄」にチェックしたいWebサイトのURLをペーストするだけです。実際に試して見ると分かりますが、大半のWebページは何らかのエラーや警告が表示されます。

エラーがあること自体は大きな問題ではありませんが、無視して良いエラーと、放置できないエラーがあるため、その見極めができるようになるとこのツールはさらに便利になります。

【参考】：W3C Markup Validation Service

Web版のW3C Markup Validatorにはチェック機能が3種類あり、画面上部の3つのタブから以下の方法を選択できます。

▪Validate by URI「URLで検証する」 ▪Validate by File Upload「ファイルアップロードによる検証」 ▪Validate by Direct Input「直接入力による検証」（HTMLソースを貼りつける）

最も多く使うのはURLによる検証だと思いますが、まだWebサイトにアップできない作成中のHTMLファイルや、ソースコードのある部分だけをチェックしたい場合などには、タブを切り替えてそれぞれの機能を使い分けすると良いでしょう。

「CSS Validation Service」は、同じくW3C提供のCSSの文法チェックサービスです。使い方は「Markup Validator」とほぼ同じですので、「Markup Validator」を使える方は抵抗なく使えるでしょう。

【参考】：CSS Validation Service

高品質のHTMLを作成するスキルを身に付けよう

HTMLの文法エラーはチェックツールを利用すると、かなりのエラーメッセージが表示され、逆にエラーつぶしで余計な手間が掛かったという話もあります。実際のところ、エラーがあっても表示や動作に問題がないケースもあり、どこまで修正すれば良いのか悩ましいところです。

基本的には表示に影響がなく、互換性などで問題が発生していなければ、多少のエラーには目をつぶっても構わないでしょう。

しかし、HTMLを勉強中の方、初心者の方は、表示などに問題がなくともエラーチェックの結果は確認する癖をつけましょう。

第三者によってエラーチェックが行われ、エラーが多過ぎると、エンジニアとしてのスキルに疑問符が付きかねません。ここで紹介したHTMLエラーチェッカーを活用し、高品質のHTMLを作成する癖をつけておきましょう。

ウェブデザイナー必見！HTMLのおすすめ資格を比較解説します

HTMLでできることは少ない？できないことやタグも一覧でまとめた