HTMLのエラーチェック方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLのエラーチェック方法について解説しています。HTMLの構文エラー(シンタックスエラー)を調べるツールと、それらを利用した確認方法を説明します。最後におすすめのエラーチェックツールについてみていきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
HTMLのエラーチェック方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
エラーチェック方法について詳しく説明していくね！
お願いします！
HTMLのシンタックスエラーのチェック方法
エラーの発生には、プログラミングの中で間違った命令文を呼び出したり、間違えた引数を渡したりなどのミスが存在します。
そして、エラーでは、SyntaxError（シンタックスエラー）と呼ばれる文法などの記述ミスによる構文エラーも少なくありません
構文エラーとはHTMLのタグが閉じていないなど、そもそもコンパイルできずにプログラミング内容が認識されないエラーのことを指します。
現在ではGoogle Chromeの拡張機能やエラーチェックができるプラグインが存在するエディタも多くあるため、簡単にエラーをチェックすることが可能です。
また全角スペースを入れることでエラーとなってしまう場合も少なくありません。
全角スペースなどはCtrl＋Fで簡単に見つけることができるものの、入れ子が複雑になった場合の閉じタグや入れ子タグがクロスしている場合などは、W3Cのサイトを利用して構文エラーのチェックをしましょう。
MarkupValidationServiceを使用すると、構文エラーのチェックをしたいHTMLのURLを貼り付けるだけでエラーが表示されます。
英語での表記になるものの、常用の単語で書いてあるので、簡単にエラー内容がチェック可能です。
エラーチェック機能の優れているエディタ、エラーチェック ツールの紹介など
W3CのMarkupValidationServiceはブラウザ上でのチェックを行うものの、通常使用しているエディタの拡張機能などでより簡単に構文チェックが可能です。
VScodeなどではプラグインを使用することでブラウザを使用することなく、エディタ内で構文チェックをすることができます。
W3C Validationという拡張機能を入れることで、使用可能です。
エディタでatomを使用している場合には、w3c-validationというパッケージを入れることで構文チェックができるようになります。
冒頭で紹介したGoogle Chromeの拡張機能はとても使いやすく速いです。
Google ChromeのウェブストアにHTMLエラーチェッカーという無料の拡張機能があり、ブラウザ上のチェックにはなるものの、簡単に使用することが可能です。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
執筆してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
HTMLのエラーチェック方法がよく分かったので、良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
