メインコンテンツへスキップ

HTMLのコメント

1.概要

<!--: コメントの始まり
--> : コメントの終わり

処理の対象とされない
記述です。

まず comment を日本語訳してみるとカタカナでコメントとなり、さらにコメントという語句を調べると説明(よくわかるように述べること。)とあります。
コメントとは別の訳をと調べると付注(注をつけること。)とあり、さらに注という語句を調べると「本文中の語句や事項などについて、補足したり詳しく説明したりすること。また、その説明。」とあります。

  1. <!-- コメントの記述例です。-->

HTMLでは、<!--でコメントが始まり -->でコメントが終わります。

  • <! : マーク宣言開始区切り子
  • -- : コメント区切り子
  • > : マーク宣言終了区切り子

テキストは文字列 ">", "->" で始まってはならず、文字列 "<!--", "-->", "--!>" を含んではならず、文字列"<!-" で終わってはならないという追加の制限があります。

2.説明文

コメントを用いて、
説明を記述できます。

コメントで説明を記述する事により、内容を思い出しやすい, 第三者が意図を理解しやすい, エディタなどの検索機能で探しやすいなど、便利になります。
欠点は、ファイルのデータ量が増えるという事と、コメントアウトの時に邪魔になる事があります。あと、説明の対象となるコードの記述の変更に合わせて、説明も変更しないといけないという手間が増えます。

  1. <!-- section要素の代用 -->
  2. <div role="region">

3.コメントアウト

コメントを用いて、
コードの検証ができます。

コードの一部をコメント内に入れる(前後にコメントの始まり, 終わりを記述する)事により、その記述が意図した効果を表しているのか確認する事が出来ます。また、他の記述の妨げになっているかを確認したりにも用います。
コメントアウトを多用したい場合は、あまり説明文としてのコメントを用いない方が作業が楽になります。またコメントアウトの後片付けも面倒かもしれません。

  1. <div><b>試１<b>試２<b>試３</b>試４</b>試５</div>

「試５」の前でb要素は終わっている意図で記述しているという例示です。
(「意図しない表示」という例示であり、上記は HTML としては不適切な記述です。)

試１試２試３試４試５
  1. <div><!-- <b> -->試１<b>試２<b>試３</b>試４</b>試５</div>

「試１」の前の b要素開始タグの前後でコメントの始まり, 終わりを記述してみて予想と実際の差を確認します。
その結果「試５」の前でb要素は終わり、どこか b要素開始タグが多いか b要素終了タグが足りない事が判ります。

試１試２試３試４試５

4.気を付ける点

入れ子に出来ない

コメントは、"-->" があるまで続きます。
途中に "<!--" があってもコメント扱いなので、２重，３重の入れ子には出来ません。
HTMLタグも同様に、コメント扱いされます。

  1. 試１<b>試２<b><!--試３--></b>試４</b>試５

「試３」の前後で "<!--" コメントの始まり, "-->" コメントの終わりを記述しているという例示です。

試１試２試４試５
  1. 試１<b>試２<!--<b><!--試３--></b>-->試４</b>試５

「試２」の後で "<!--" コメントの始まり, 「試４」の前で "-->" コメントの終わりを追記しているという例示です。「試２」の後でコメントは始まっていますが、「試３」の後でコメントは終わっています。「試４」の前に追記した "-->" コメントの終わりはテキスト(文字列)扱いです。その前の b要素終了タグも有効です。

試１試２-->試４試５

文字参照

文字列として "-->" を用いたい場合は、"--&gt;" と文字参照を用いておくべきです。通常は文字列として扱われていても "<!--" からコメントの終わりを探されている途中に文字列の "-->" があると文字列として扱われずにコメントの終わりの記述として扱われてしまいます。
HTMLタグもコメント扱いされる事から、属性値の"-->"もコメントの終わりと認識されるので注意が必要です。

なおテキストとして "<!--" を用いてもコメントの始まりと認識されるので、"&lt;!--" と文字参照を用いる必要があります。まぁこれは他のタグでも同様ですが。

「文字参照」で改めて記述しています。

  1. <div>&lt;!--TEXT</div>

コメントの始まりと認識されない為に、この表記方法は必要です。< は、他にもタグと認識されるとかいろいろあるので、差し支えないならば常にこの表記方法を用いる習慣をつけた方がよいでしょう。

<!--TEXT
  1. <div>TEXT --&gt;</div>

コメントの終わりと認識されない為に、念の為の表記方法です。なので、ここを含むコメントアウトなどをしなければ関係ありません。> は、他にはタグの終わりと認識されるとかあるので、差し支えないならば常にこの表記方法を用いるとか属性値で使う時はこの表記方法を用いるとか習慣をつけた方がよいでしょう。

TEXT -->
  1. <div>&#45;&#45;TEXT&#45;&#45;</div>

念の為というか、"--"の文字参照も例示しておきます。

--TEXT--

HTMLタグもコメント内に

HTMLタグもコメント内になります。これにより、属性値も テキストもstyle要素やscript要素も、HTMLのコメントの途中となりえます。なのでHTMLファイル内にスタイルシートやスクリプトを記述する際には、HTMLのコメントの終了を示す --> の記述には注意が必要です。属性値については、そもそもタグの終わり > の問題があるので、コメント以前にタグとの関りで文字参照を用いる必要があります。

template要素をコメントの様に

HTMLの記述の一部を雛型として置くには、template要素を用いる方法もあります。

説明書を別ファイルに

HTMLファイル内ではなく、別のファイルとして説明書を用意するのも良いです。管理が大変などは、ファイル名の命名規則を作るなどして軽減化するとかで、HTMLファイル内での管理よりは良くなると思います。いろいろ内部規約を事前に自作して、説明書, 仕様書を用意しておくと、後の自分にも作成意図が伝わりやすいです。HTMLファイル内のコメントが邪魔になるか、ファイルの管理が大変になるかの天秤ですので、検討してみるのも良いと思います。折衷案として、body要素の最後の子要素にfooter要素を用意して、そこにコメントをまとめて書くとかも考えられます。

説明とソースコードの同期

コメントを付加すると、それが正しいかという問題が発生します。 特にコメントの対象となる記述自体が変更になった時に、合わせてコメントも変更しないといけない場合があります。 その上で、このコメントが正しいか検証するのが、非常に面倒で大変です。 コメントに対するなんらかの内部規約なりを決めて、読み易く, 検証を容易に, 変更のし易さも考える を考慮したコメントとする事が良いと思います。

含めてはいけないテキスト

コメントにはテキストが使用できます。しかし含めてはいけないテキスト(文字列)も存在します。 一時的な検証の為のコメントアウトだからと、それを承知の上で扱うとか、 説明文を工夫するしかないと思います。

これは、文字データを扱う時にも同じ問題が存在するので、 内部規約で文字データにも制限を決めるのも、ありかもしれません。