プログラミング

HTML文法のエラーチェックをブラウザのチェッカーツールで確認する方法

HTML文法のエラーチェックをブラウザのチェッカーツールで確認する方法

  • HTMLでエラーが出た…
  • HTMLでエラーが出ているかチェックしたい…
  • HTMLのエラーチェックツールでエラーの原因を突き止めたい…

今回はこのような悩みを抱えている人向けの記事です。

どうも!実務でHTMLを毎日触っている てぃかし です!

HTMLに触れたことがある人なら、一度は、HTMLの文法でエラーになったことがあると思います。

ルールに沿わないコードが1ヶ所でもあると、思った通りにサイトが表示されません。

表示はされるけど、レイアウトが崩れたり、コードがそのまま表示されてしまったりすることもありますし、

エラーは出ないけど、何かしら不具合が出て困るということもあるあるです。

そこでそのエラーや不具合の原因を調べるのですが、どこが間違っているのか一向に発見できないという時もあります。

今回は、そんな時に役立つHTMLのエラーチェックツールについて紹介します。

HTMLの文法エラー・不具合のよくあるパターン

エラーチェックツールでエラーを調べる前にHTMLの文法エラーでよくあるパターンをまとめておきます。

  • 全角文字を使用している
  • 全角スペースがある
  • クォーテーションの付ける位置が誤っている
  • 開始タグ・終了タグがない
  • 入れ子構造が間違えている
  • タグのスペルミス
  • 文字コード指定忘れ
  • ファイル保存忘れ

エラーが出たり、思った通りにサイトが表示されない時は、上記のパターンがないか確認します。

HTMLに原因があるなら、ほとんどこの中のどれかに当てはまります。

HTMLの文法エラーチェック方法の基本

HTMLでエラーを解消しようと思ったら、

①まず先ほど挙げたパターンになってないかをチェックします。

②次にHTMLの基本構文に問題がないかチェックします。

HTMLの基本構文は、下記の6つのタグがあります。

  • DOCTYPEタグ
  • htmlタグ
  • headタグ
  • metaタグ
  • titleタグ
  • bodyタグ

これらのタグのスペルに間違いがないか、

開始タグ、終了タグがあるか、

タグの中身は、問題ないか、

をチェックしましょう。

headタグの中でCSSやJavaScriptのファイルを読み込ませている場合は、読み込み先が合っているかなどもチェックしましょう。

③最後にファイルを保存し、サイトを表示して直っているか確認します。

これが基本的なエラーチェックの方法・手順です。

HTMLのエラーチェックツール4選一覧

HTMLチェック

HTMLのエラーチェックを自力で行うと時間がかかります。

また、人間ですから、チェック漏れをしてしまう恐れもあります。

そんな時に役立つのがHTMLのエラーチェックツールです。

以下のツールがあります。

  • HTMLエラーチェッカー
  • Another HTML Lint
  • Dirty Markup
  • W3C Markup Validation Service

HTMLチェッカーの使い方・確認方法

それでは、上記で挙げたチェックツールの基本的な使い方、確認方法について紹介します。

HTMLエラーチェッカー

HTMLエラーチェッカーは、Chormeの拡張機能です。

つまり、ブラウザで使用できる機能です。

無料です。

Webサイトのレイアウト崩れ、HTMLの構文ミス(HTMLの開始・終了タグの過不足等)を検出することができます。

エラーが検出された場合、エラーの数値が表示されます。

使うには、まずGoogleウェブストアで「HTMLエラーチェッカー」を探し、機能を追加します。

HTMLエラーチェッカー

「Chormeに追加」をクリックし、機能を追加します。

HTMLエラーチェッカー使い方

Chormeブラウザの右上に拡張機能のマークがあるので、それをクリックし、「HTMLエラーチェッカー」をクリックします。

HTMLチェック結果

すると、上記のようにチェック結果が表示されます。

エラーが特にないと判定されたら、「タグはおそらく完璧です」といったメッセージが出ます。

エラーがある場合は、下記のような表示が出ます。

HTMLエラーチェッカー

Another HTML Lint

Another HTML Lint

Another HTML Lintは、HTMLの文法チェックができるツール(サイト)です。

無料です。

Another HTML Lintは、ブラウザがあれば、使用できます。

使うには、Another HTML Lintにアクセスし、URLを入力するだけです。

Another HTML Lintの結果

オプションで出力の仕方やHTMLのバージョンなどを変更できます。

Dirty Markup

Dirty Markup

Dirty Markupは、HTML、CSS、および Javascript  を美しくするための無料ツールです。

使うには、サイトにアクセスし、コードの入力するだけです。

下記のようにdivの閉じタグが抜けていた場合、該当の付近が赤くなります。

Dirty Markupエラー

また、「Clean」をクリックすると、コードをきれいにしてくれます。(インデントを揃えたり)

インデントを揃えるだけでもミスやおかしなところを発見しやすくなるので、コードが汚くなったら、ここで整形してみるのもありですね。

W3C Markup Validation Service

Markup Validation Service

W3C Markup Validation Serviceは、W3C が作った、HTML文書がHTMLやXHTML標準へ準拠しているかどうかを検証するためのサービスです。

W3C(World Wide Web Consortium)とは、World Wide Webで使用される各種技術の標準化を推進するために設立された標準化団体(非営利団体)です。

W3C Markup Validation Serviceの使い方は、以下の通りです。

  1. W3C Markup Validation Serviceにアクセスする
  2. HTMLをチェックしたいURLを「Address」に入力する or 「Validate by File Upload」を選択し、HTMLファイルをアップロードする or 「Validate by Direct Input」を選択し、直接HTMLを入力する
  3. 「Check」のボタンをクリックする

Markup Validation Service結果

上記は、本ブログトップページのURLをチェックにかけた結果ですが、このようにチェック結果が表示されます。

Errorと表示が出てきたら、その部分でエラーが発生していることがわかります。

下記は、あるHTMLを直接入力して、出てきた結果です。

HTMLエラー結果

まとめ

今回は、HTML文法のエラーチェックをブラウザのチェッカーツールで確認する方法について解説しました。

チェックツールはあくまで補助的なものなので、本記事の前半でお伝えしたチェック方法は、理解しておき、

エラーの原因がすぐにわからなかった時などに頼るようなスタンスが良いでしょう。

HTMLチェックツールは今回は4つ紹介しましたが、どれも似たようなものです。

一度、自分で使ってみて、使いやすいツール(サイト)を使いましょう。

HTML勉強中の人におすすめ記事紹介

この記事を読んでいる人は、HTML初心者で勉強中の人もいると思います。

そのような方は、関連記事も以下に載せておくので、ぜひ参考にご覧頂けたらと思います。

初心者向け要約!HTML&CSSとWebデザイン入門講座をエンジニアが解説
【初心者学習】要約!HTML&CSSとWebデザイン入門講座本をエンジニアが解説

HTML&CSSとWebデザインを勉強したい。 HTML&CSSとWebデザイン入門講座ってどうなの? 学習内容は、実務で役立つ? 今回はこのような疑問を持っている人向けの記事です。 どうも!書籍「H ...

続きを見る

マナのHTML&CSSとWebデザイン入門講座本の勉強法と感想レビュー
マナのHTML&CSSとWebデザイン入門講座本の勉強法と感想レビュー

HTML&CSSとWebデザイン入門講座ってどうなの? 学習内容は、仕事で役立つ? HTML&CSSとWebデザイン入門講座の効率の良い勉強法を教えてほしい。 HTML&CSSとWebデザイン入門講座 ...

続きを見る

エンジニア学習教材
【言語・技術別】Webエンジニアのためのおすすめ学習本・サイトまとめ

エンジニアになりたい人エンジニアになるためには、何を勉強したらいい? 実務で必要な知識ってなんだろう? 無駄を省いて、効率よく勉強したいな。 この記事はそのような疑問を持っている人に役立つ内容となって ...

続きを見る

YouTubeでも役立つ情報を配信しています!

ボタンをクリックしてチャンネル登録お願いします!

-プログラミング
-, , , , , ,

© 2023 てぃかしのブログ Powered by AFFINGER5