HTMLでのコメントの書き方や注意点など

HTMLのコメントについて

HTMLのコメントの書き方

HTMLでは<!--と-->で囲まれた内容は、コメントとして扱われます。

<!--と-->は全て半角文字の必要があります。

See the Pen comment by mik20621 (@mik20621) on CodePen.

<!--と-->は複数行に渡って書くこともできます。

See the Pen comment2 by mik20621 (@mik20621) on CodePen.

コードをコメントで囲むこともできて、コードの一部をコメントで囲むことで表示内容を切り替えてコードの確認を行ったりします。

コメントは入れ子にして書くことはできません。

See the Pen comment3 by mik20621 (@mik20621) on CodePen.

HTMLのコメントの特性

HTMLのコメントは以下の特性を持っています。

WEB画面に表示されない

HTMLのコメントはWEBページには一切表示されないので、ページの表示に全く影響を与えません。

ブラウザでソースを表示するとコメントも表示される

ブラウザでWEBページのソースを表示すると、HTMLに記述したコメントも表示されます。

HTMLのコメントの用途

コードの補足情報を書く

コードの内容に関する説明や補足情報をコメントとして記述することで、HTMLコードの保守性を高めることができます。

コードの構造の目印を書く

HTMLコードのネスト構造などの理解を助けるための目印をコメントで記述します。

See the Pen comment4 by mik20621 (@mik20621) on CodePen.

コードを一時的にコメントアウトする

HTMLコードの書き方を試行錯誤する時に、コメントアウトすることでコードの内容を切り替えて、WEBページの表示確認を行うことができます。

コメントで注意する点

HTMLのコメントは訪問者も見ることができる

HTMLのコメントは、WEBページには一切表示されませんが、ブラウザでページのソースを表示するとコメントも表示されるため、外部に見られたくない内容はコメントに書かないように注意が必要です。

公開前にコメントを一括で削除する方法

• HTMLファイル内にコメントでさまざまな情報を記述
• 公開前にHTML内のコメントをすべて削除して、コメント内容を公開しない

という形で運用できます。

他にも、エディタで正規表現での一括置換を行う方法もあります。

HTMLファイルの内容によっては、一括削除後に表示やJavaScriptの動作がおかしくなるリスクがあるので、いずれの方法の場合でも一括削除後のファイルでの動作確認が必要です。

HTMLファイルのコメントを一括削除するサービス

HTMLファイルのコメントを一括削除するサービスとしては以下のようなサービスがあります。

上記のようなWEBサービスでは、ページの内容を外部のサーバーに送信することになりますので、そのことが問題無いか使用前に確認が必要です。