みなさんはHTMLにはコメントを書いていますか？
コメントを書いたことが無いという方は、ぜひ今回の記事を参考にしてコメントアウトの方法、コメントの書き方を覚えましょう。
コメントを使うことで、長文になった時に見づらくなるHTMLの可読性があがります。更に自分以外のエンジニアと複数人で開発している場合は、HTMLのコード上でお互いの意思疎通をはかることが出来ます。
HTMLのコメント・コメントアウトとは？
まずHTMLのコメント・コメントアウトについて説明していきます。
コメント
HTMLのコメントとは、HTMLの文章中に記述するメモ書きや注釈です。通常HTMLに記述した文章はブラウザ上に表示されますが、コメントの特定の書式で書いた文章についてはブラウザ上に表示させない事が出来ます。
この特性を利用して、メモ書きや注釈などをHTMLのコード上に残すことが可能になります。
コメントアウト
コメントアウトは簡単に言えば、HTMLのタグや文章をコメント化することをコメントアウトと言います。コメント化することで、HTML上に表示されなくなるため、一時的に非表示にしたいタグなどをコメント化する（コメントアウト）という事はよくあります。
コメントアウトの目的
それではコメントアウトをする目的は何なのでしょうか。まとめていきます。
メモ書き・注意書き
一つはコードに対するメモ書き・注意書きとしての目的でコメントを残します。
例えばコメントの例としては「ここから期間限定のイベント用のブロック」などHTML上にメモを残す意味でコメントを残したり、あまり良くない例ですがPHPなどプログラミング言語でのコメントアウトでは「なぜ動いているのか分からない・・」など恐ろしい感想が書かれたコメントなどもあります。
いずれにせよ、コードを見るエンジニアに対して（当の本人を含む）のメモ書きの意味でコメントが使われる場合があります。
HTMLの階層構造を把握しやすくするため
HTMLではタグの階層構造が重要になってきます。HTMLを修正する場合も、タグの階層構造を把握した上で行いますが、よくあるのが「このdivの閉じどこだっけ？」と言う問題です。
長いHTMLになればなるほど、エディター上のHTMLの量は増えていき見づらくなっていきます。その中でコメントがあり、「ヘッダーのdivはここからスタート」「ヘッダーのdivはここまで」のような階層構造の把握をサポートするコメントがあると、一気に分かりやすくなります。
もちろんタブやスペースなどを行頭に付加したインデントで把握した方がいいですが、HTML初心者にとってはコメントを上手く使うことで、開発効率が上がるのでおすすめの方法です。
一時的に残したい場合
コメントアウトすることで、ブラウザ上からは表示されなくなりますが、HTMLの文章上には記述は残ります。この特徴を利用して「消したくないんだけど、一時的に非表示にしたい」というニーズを満たすことが出来ます。
例えば「将来復活するかもしれないキャンペーン」の記述や、「一時的に試したいデザインがあるので、一旦古いデザインを非表示にしたい」というケースで利用することが出来ます。
こちらもそんなものGitなどバージョン管理を使えという話もありますが、HTMLのコメントアウトでも簡単に実現できます。
コメントアウトの書き方
それでは次にHTMLのコメントアウトの書き方をご紹介していきます。コメントアウトの書き方は複数あるため、それぞれ順番にご紹介していきます。
1行をコメントアウトする書き方
コメントを1行で書く場合のコメントアウトの書き方は下記の通りです。
<!-- 1行のコメント文 -->
実際の書き方の例を見ていきましょう。
いかがでしょうか。「1行のコメント文」という記述があるにも関わらず、結果にはその文章が表示されていません。
これがコメントでコメントの記号の中の文章は好きな文章を書くことができ（もちろん日本語OK）、その文章は結果には表示されません。
複数行をコメントアウトする書き方
次に1行ではなく、複数行をコメントアウトする書き方です。
複数行のコメントでも
コメントの開始の記号の「<!--」から、終了の「-->」の間の文章がコメント化されて、結果には表示されなくなります。複数行の場合には、コメントを閉じずに2行、3行、4行と改行をして書いていくことが出来ます。
長文のコメントをする場合や、まとまったHTMLタグをコメントアウトしたい場合によく利用します。
コメントアウトの注意点
それではコメントアウトの注意点をご紹介していきます。コメントの文章は何でも書けると言いましたが、何点か注意があります。
外部に漏れてはまずい情報を書かない
コメントアウトしてブラウザ上には表示されないとはいえ、HTML上には文章は残っています。つまりHTMLを解析すれば誰でもコメントを見ることが出来ます。
そのためたとえコメントにでも、外部に漏れてはまずい情報は残すのはやめましょう。
コメントの中に「-」を入れない
コメントの開始と終了の記号では「<!-- コメント-->」を利用しますが、ブラウザによってはその終了の記号を「-（ハイフン）」が連続してあった場合には、コメントの終了とみなすみのがあります。
つまり意図せずに、コメントが終了となって、コメントの中身がブラウザ上に表示される恐れがあります。そのため、コメントの中では「-（ハイフン）」を利用しないというルールにした方がより安全です。
コメントの中にコメントを入れない
コメントの中にコメントを入れる場合も上記と同様で意図しない形でコメントがブラウザ上に表示される恐れがあります。
それでもどうしてもコメントの中にコメントを入れる必要がある場合は、書き方を下記の記事で紹介していますので、ぜひ参考にしてみて下さい。
まとめ
いかがでしたでしょうか。HTMLのコメント・コメントアウトについてご紹介してきました。しっかりとコメントの目的と書き方と理解して、適切なコメントを残すようにしましょう。
またコメントはPHPやRubyなど他のプログラミング言語でも存在している機能なので、今後プログラミングを学ぶ予定の方はぜひHTMLでコメントの目的などを把握しておきましょう。ちなみにPHPやRubyではコメントの書き方が異なりますが、目的などは共通なので、ぜひHTMLでコメントについて慣れておきましょう！