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

  • スキルアップ
公開日:

プログラミング言語の機能の一つであるコメントは、プログラム上にメモを残しておく形で使えるので非常に便利です。ただし使い方を覚えておかないと、本来表示するべきでないものを表示してしまうことがあります。

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

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

なおコメントアウト以外のHTMLのタグや基礎知識については、こちらの記事も併せてご参照ください。
HTMLとは?CSSとの違いや代表的なタグも紹介

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のコメントアウトですが、とても重要な役割を担っています。本稿を参考にコメントアウトを活用していただければ幸いです。

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

(2020年12月現在)

Modisで探す、HTMLの仕事

IT・エンジニア派遣に特化したModisでは、HTMLを使う求人・HTMLを活かせるフロントエンドの求人を多数ご紹介しています。