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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

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

HTML入門のまとめ記事なら... » HTML入門まとめ

» HTML入門のまとめはこちらです。