HTMLエラーチェッカーを入れておけばコーディングのミスを減らすことができるよ

HTMLエラーチェッカーのインストール方法

HTMLエラーチェッカーは、タグの閉じ忘れや、タグの間違いなどを検出してくれるChromeの拡張機能です。
コーディング中のChromeでの表示確認は必須なので、Chromeが入っていないコーダーはいないと思いますので、そこは問題なしですよね。

導入方法は物凄く簡単です。
Chromeの拡張機能インストールページより簡単に導入できます。
下記ボタンよりインストールページへ飛べます。(アフィリエイトでも何でもないので安心してクリックしてください(笑))

\ここからインストールできます/HTMLエラーチェッカー

拡張機能のページを開いたら、右の「Chromeに追加」ボタンを押します。

HTMLエラーチェッカーのインストール方法

ダイアログが開かれたら「拡張機能を追加」ボタンを押すとインストールされます。

HTMLエラーチェッカーのインストール拡張機能を追加
HTMLエラーチェッカーの導入完了

HTMLエラーチェッカーの使用方法

さっそくインストールしたHTMLエラーチェッカーを使用してみましょう。

チェックしたいページをChromeで開く

まずは、HTMLの構文をチェックしたいページをChromeで開きます。

Chromeの右上から拡張機能を選択する

URL横の拡張機能ボタンを押して拡張機能一覧を開き、HTMLエラーチェッカーを選択する。

HTMLエラーチェッカーを選択する
HTMLエラーチェッカーを使用する

タグに間違いがない場合

タグ構成に間違いがない場合は、青色の画面になります。
「タグはおそらく完璧です」と書いてるのはちょっと自信なさげで面白いですね。
ただ、私が今まで使用した限りエラーチェッカーが間違ってたことはないので安心して大丈夫です。

HTMLエラーチェッカー使用結果

タグに間違いがある場合

タグ構成に間違いがある場合は、赤色の画面で表示されます。
また、おかしいところを何行目と表示もしてくれます。
青色のリンク部分を押すとその行に飛んでくれます。

HTMLエラーチェッカー使用結果エラー

いっぱいあるように見えるけど、実はタグが一つ抜けてるだけで一気に直ったりするときもあるよ。

どこがおかしいかエラーメッセージを見ながら直していこうね。

HTMLエラーチェッカーの使用タイミング

HTMLエラーチェッカーは一瞬で結果が表示されますので、いつ使用してもいいでしょう。
オプションで、常にエラーをチェックすることも可能です。

ただ、絶対に使用した方が良いのはコーディングが終わったタイミングや、納品前のタイミングに再チェックはした方が良いでしょう。

私がエラーチェッカーを使用して、よくあるミスは<span>タグを多用してる箇所の閉じ忘れや、divが連続した場合の閉じ忘れ等が多かったです。
表示は完璧でも実は、タグが抜けているなどの事が結構あります。

HTMLエラーチェッカーを使用してミスのないコーディングを心掛けましょう。