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

後で困らないように


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

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

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

追記:2015/03/29
「タグの閉じ忘れをチェックする」ブックマークレットが便利

Chromeの拡張より、上記のブックマークレットのほうが便利かも。

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


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

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


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

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

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。