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

  • URLをコピーしました!
生徒

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内のコメントを全て削除して、コメント内容を公開しない

形で運用することができます。

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
目次