HTMLのコメントについてまとめました。コメントの書き方、注意点、役割、コメントに関しての追加情報も書いています。
コメントの書き方
1行コメントの書き方
コメントは、<!-- コメント -->
の形式で記述します。
<!-- これは1行コメントです。 -->
複数行コメントの書き方
1行コメントと同じで、複数行にわたるコメントも<!-- コメント -->
の形式で記述します。
<!-- これは複数行コメントです。 -->
注意点
入れ子にできない
下記は、間違った記述例です。コメントを入れ子にしています。
<!-- コンテンツ <!-- お知らせコーナー --> <div id="news"> <ul> <li>○月○日:○○○についてのお知らせ</li> <li>○月○日:○○○についてのお知らせ</li> </ul> </div> -->
実際の表示
- ○月○日:○○○についてのお知らせ
- ○月○日:○○○についてのお知らせ
-->
-->
が表示されてしまいます。
コメント宣言の詳細
HTMLのバージョンによってコメントの詳細な仕様は異なりますが、基本的には<!-- コメント -->
の形式で記述します。<!--
がコメント開始の目印で、-->
が終了の目印になります。その中にコメントを書くのですが、コメントの途中に<!--
や-->
を含めてしまうと、そこがコメントの開始または終了と判断されてしまいます。コメントの開始と終了が正しく判断されないと、コメントの一部がブラウザに表示されてしまいます。
他にも不正なコメントの書き方がありますが、詳細についてはW3Cの仕様書を確認してください。
コメントの役割
- メモや注釈を残したいときにコメントに書く。
- HTMLを一時的に非表示にしたいときにコメントで囲む。
- また、コードの塊を分かりやすくするためにコメントを使う。
<!-- 例:コードの塊を分かりやすくする --> <!-- ヘッダー --> <head> <h1><a href="#">ヘッダーの中身です。</a></h1> </head> <!-- メインコンテンツ --> <main> <div><p>メインコンテンツの中身です。</p></div> </main> <!-- フッター --> <footer> <div><p>フッターの中身です。</p></div> </footer>
追加情報
コメントは見れる
コメントはブラウザ上では表示されません。しかし、ブラウザの検証ツールやページのソースを表示で確認できます。そのため、公開前の重要な情報や個人情報をコメントに残さないで下さい。
全てのコメントの削除
正規表現を使って文字列を置換すると、全てのコメントを削除できます。検索文字列と置換文字列は、以下のようにします。ただし、複数行にわたるコメントは削除できません。
- 検索文字列:
<!--.*-->
- 置換文字列:空白
コメントアウトと言う言葉について
ソースコードをコメントにして無効化することをコメントアウト(comment out)と言います。
HTML入門のまとめ記事なら... » HTML入門まとめ