HTMLタグの閉じ忘れを簡単に見つける方法

タグ閉じ忘れチェック

追記：2022/06/20

・DIVタグ閉じ忘れチェッカー https://div.natureblue.com/

最近使ったことがあるのは上記です。趣味レベルで簡易にチェックするのには十分だと思います。

以下、以前の記事。
・ブックマークレットは、なくなってるみたい
・Chrome拡張はまだあるが、私はもう使ってないので動作は不明

---

後で困らないように

divタグなどは、画像のように対応する閉じたタグのところにコメントを書いておくと意外と便利です。たいていclass名とかid名がついてますから、それをコメントに埋め込んでおけば対応がわかりやすいですね。

既存のテンプレートをカスタマイズする場合でも、その時調べたのならコメントとして残しておくとよいでしょう。

タグの閉じ忘れをチェックする

Chromeの「HTMLタグ閉じ忘れチェッカー」を使うと簡単だと思います。


Chromeでページを表示するだけで、タグ閉じのチェックをしてくれます。問題ない場合は0と表示されます。閉じ忘れがあれば、その数が表示されます。

詳細を知りたいときは、（１）をクリックすると上記のような画面になります。指摘されているタグをクリック（2）すると該当するＨＴＭＬソースに飛ぶので非常にわかりやすいともいます。


一番困るのが、特定の条件の特定のページだけなぜか閉じたタグがないらしく、レイアウトが崩れるとかいうパターンです。このツールだと簡単に調べれますし、ページ遷移しているうちに該当するページを見つけるのも早いかと思います。

参考：
・ HTMLタグの閉じ忘れをチェックするChrome拡張機能を作ってみた | kzms2 – html,css,javascript