HTMLのエラーチェック方法を現役エンジニアが解説【初心者向け】

HTMLのエラーチェック方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座の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サイトの修正などを行なっている。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。