元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

HTML入門(HTMLのコメントの書き方と注意点)

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)と言います。

参考サイト