HTMLコメントの書き方と注意点を解説

またHTMLの場合、コメント行の記述がうまくできていないと、メモ書きとして残していた文字列がブラウザで見えてしまったり、一旦非表示にしていたバナーが見えてしまったりとトラブルにつながりかねません。

ここではそんなHTMLのコメント行の追加方法と注意点をご紹介します。

HTMLコメント行とは

コメント行はプログラムなどに影響がない形で、ソースコードに文字を書きこめるものです。例えば、ヘッダにコメント行で最終更新者や最終更新日を記載し、簡易的なバージョン管理をしたり、ページやプログラムの大まかな概要を書いて、コードを理解しやすくするためなどに使います。

なお、コメント行を追加した箇所はブラウザには反映されないものの、多くのブラウザに搭載されているソースコードを表示する機能を利用することで、簡単に確認することができます。サイトによっては、運営側からのメッセージをコメントで書き込んでいる場合もあるため、気になるサイトのソースコードは確認してみるとよいでしょう。

HTMLでのコメント行の書き方

HTMLではコメント行の書き方は1種類しかないので、この記号を見たらコメント行と覚えておいて間違いがありません。コメントをキーにしてHTMLソース内を検索するときも、1種類を想定しておくだけで済みます。なお、他サイトのコメント行を参考にするときも開始タグを検索キーにして探すと、コメント行だけを簡単に読むことができます。

HTMLで1行だけコメント行とする

<!-- この部分はブラウザに反映されません -->

サンプルのような記述により、コメント行にすることが可能です。

エディタによっては、この記号を元にコメントであることを理解して文字色を変更することもできます。その場合プログラムコードかコメントか、色で判別が可能になり、ソースコードを読みやすくなります。

HTMLで複数行コメント行とする

<!--
この部分はブラウザに反映されません
この部分はブラウザに反映されません
-->

上のサンプルのようにいくら改行しても<!-- -->の間にあれば、全てコメントとして認識されます。

改行するかしないかは、プロジェクトのコーディング規約や読みやすさで決まります。プロジェクトの中でコメントの書き方が明確に決まっている場合にはそれに従いましょう。決まっていない場合は、あまり横に伸びないように、適度なところで改行する方が読み手に親切です。

なお、複数行コメント行とする際は、見やすいようにコメント本文は全て字下げ（インデント）をしておきましょう。コメント行の開始位置と終了位置が分かりやすくなります。

HTMLコメント行でよく使われるもの

HTMLのコメント行で多く見かけるのは、CSSの定義範囲を記述するものです。例えば contentクラスの開始タグはclassを見ればわかりますが、この終了タグは、HTMLの量が増えるほどわかりにくくなります。そのため次のサンプルのように、終了タグの後にコメント行でclass名をつける、といったことが行われます。

コメント行の例

<div class="content">

</div><!-- End of content -->

HTMLでコメント行にするときの注意点

HTMLのコメント行が他のプログラムと違うところは、ソースコードを表示するモードにすると見えてしまう点です。その分だけ記載内容には注意が必要となります。

重要な情報は載せない

HTMLでコメント行にした文章はブラウザ上に反映されないだけで、ソースコードを表示するモードにしてしまえば、簡単に確認ができてしまいます。気になったページのソースコードが見られるのでHTMLが簡単に勉強できるメリットではあるのですが、本来見えてはいけないものまで見えてしまう可能性を持っています。そのため、公開するのに不適当な文章や、セキュリティに関わるような重要な情報を載せないようにしましょう。

HTMLでコメントを書く際は、ソースコードと共に見られて問題ないものかを公開前に最終チェックすると安心です。

例えば、ソースコードのヘッダにバージョン情報として、最終更新日や最終更新者を入れることがありますが、最終更新者の名前を晒してしまっているのと同じです。便利だからとうっかりサーバの接続IDやパスワードを書いてしまうと、情報漏洩につながります。

他にもよくあるのは書きかけのコードをコメント行にしておくことです。開発しかけの機能や画面レイアウトを試してみたまま、コメント行にして置いておくと、それもそのまま見えてしまいます。改修箇所や次回追加を検討している内容がばれてしまうことにもつながり、情報によっては大問題を引き起こしかねません。

HTMLのコメント行は他のプログラムとは違い、HTMLを読みやすくするために使うのが安全といえます。

コメント行はネスト（入れ子）できない

<!--
  コメント行1
  <!-- コメント行入れ子1 -->
  コメント行2
-->

サンプルのような形でコメントを入れ子にすると、入れ子1の後のコメント行終了タグ -->で全部のコメント行が終了してしまい、後に続く「コメント行2 -->」がブラウザで表示されてしまいます。

このように、コメント行をネストするとレイアウトが崩れてしまうだけでなく、見せるつもりのないコメントもブラウザに表示してしまうので注意してください。

HTMLのコメント行を活用して保守しやすい開発を

HTMLを使う業務はゼロからWeb制作を行う仕事よりは、今あるWebページの更新や改修を行っていく業務のほうが多いでしょう。その中でも特に保守作業を任される場合は、きちんとコメント行を使うことができ、メンテナンス性の高いソースコードが書けるスキルは重宝されます。

簡単に使えるHTMLのコメント行ですが、とても重要な役割を担っています。本稿を参考にコメント行を活用していただければ幸いです。

なおAKKODiSでは、HTMLを使ったお仕事の求人を多数用意しています。またHTMLと合わせてJavaScriptなども使用するフロントエンドの求人もあります。HTMLやJavaScriptのスキルを使って活躍したいと考えている方はぜひ一度ご確認ください。

（2020年12月現在）