HTMLコードにコメントを書く方法【基本の書き方と注意点】

HTMLドキュメントには、Webブラウザに解釈されないコメントを記述することができます。コメントを活用する目的は、コードの内容を簡単に説明（ドキュメント化）しておくことです。将来の自分のため、あるいはチームメンバーのために役立ちます。

HTMLにコメントを追加するには、開始タグ<!--と終了タグ-->を使用し、その間にテキストを記述します。以下のように書きます。

<!-- ここは1行のコメントです -->

コメントは複数行にわたって記述することも可能です。

<!-- 
ここはコメントです。
こちらもコメントです。
-->

注意点として、HTMLコメントがブラウザに「解釈されない」というのは、ページ訪問者には表示されないという意味です。ただし、ページ上で右クリックして「ページのソースを表示」を選択すれば、誰でもコメントの内容を見ることができます。そのため、パスワードなどの機密情報をコメントに書き込むのは絶対に避けましょう。

HTMLコードにコメントを書くのは良い習慣なのか？

これは人によって意見が分かれるところです。コードファイルにコメントを書くべきではないと主張する開発者もおり、「コードは明示的で自己説明的であるべきだ」という考え方を支持しています。しかし筆者はこの意見に賛同できません。「明示的」と「暗黙的」の判断基準は開発者それぞれで異なるからです。

筆者はできる限り分かりやすくする側に立っています。説明が少なすぎるより、多少多すぎる方がましです。特に初心者にとっては、学習の初期段階で手厚いサポートがあることが大きな助けになります。

コメントとページ読み込み速度（パフォーマンス）の関係

HTMLコメントの主なデメリットは、ファイルサイズがわずかに増加し、ビルドサイズが大きくなることでページ読み込みに影響を与える可能性がある点です。ただし、これはあくまで理論上の問題にすぎません。コメントを削除したことでサイトのパフォーマンスが大幅に向上したという事例を聞いたことは一度もありません。コメントが占める容量はごくわずかなので、心配するのは少し大げさなくらいです。

参考までに、100行のHTMLコメントでも約1KB程度しかありません。しかもこれはgzip圧縮（圧縮方式の一種）を行っていない場合の数値で、圧縮すればさらに小さくなります。

コメントは短く、要点を押さえたものにすべきです。HTMLコメントの中で次の小説を執筆しようとでも考えていない限り、サイズのことは気にする必要はありません。

むしろ注力すべきは、サイト内の画像ファイルの圧縮改善です。たった1枚の画像により良い圧縮方式を適用するだけで、何千行ものHTMLコメントを削除するよりもページ読み込み速度が向上する可能性があります。優先順位を正しく見極めることが大切です。