HTMLでコメントを追加する方法
HTMLのコメントアウトは、コード内にメモや説明を追加したり、一時的にコードを無効化したりする際に役立ちます。コメントはブラウザには表示されないので、Webページの見た目に影響を与えることなく、コードを読みやすく、管理しやすくすることができます。
HTMLコメントの記法
HTMLコメントアウトを使う場合は、ブラウザに表示させたくない内容を開始タグ「<!--」と終了タグ「-->」で囲みます。
一行コメントの例
1行だけをコメントアウトする場合（下記の例では、「サイトのキャッチコピーを入れる」というテキストをコメントアウトして、ブラウザに表示させない場合）は、以下のようになります。
<!-- サイトのキャッチコピーを入れる -->
複数行コメントの例
複数行をコメントアウトする場合も、開始タグと終了タグで囲むだけです。以下の例では、複数行のコメントアウトを使って、コードの説明をしています。
<!--
このセクションでは、サイトのヘッダー部分を定義しています。
ロゴ画像やナビゲーションメニューなどが含まれます。
-->
<header>
<!-- ヘッダーの内容 -->
</header>
コメントを使用するケース
コメントは様々な場面で活用できます。代表的な例を以下の表にまとめました。
| 目的 | 例 |
|---|---|
| コードの説明 | <!-- この関数はユーザーのログイン状態を確認します --> |
| デバッグ | <p>ユーザー名: <?php echo $username; ?></p> <!-- 変数の中身を確認 --> |
| コードのバージョン管理 | <!-- バージョン 1.2 で追加 --> |
| コードの一時的な無効化 | <!-- <section class="promotion"> ... </section> --> |
注意事項
- コメントの中にコメントを入れることはできません。入れ子になったコメントはエラーの原因となります。
- コメントはあくまでコードを読みやすくするための補助的なものです。コメントに頼りすぎることなく、コード自体をわかりやすく書くように心がけましょう。
HTMLコメントに関するQ&A
Q1: コメントはブラウザに表示されますか？
A1: いいえ、コメントはブラウザには表示されません。あくまでも開発者が見るためのものです。
Q2: コメントの中に日本語を使えますか？
A2: はい、問題ありません。HTMLファイルの文字コードがUTF-8であれば、コメント内に日本語を使うことができます。
Q3: コメントアウトを使うメリットは？
A3: コードの意図を明確にすることで、自分自身や他の開発者がコードを理解しやすくなる、デバッグ時に特定のコード部分を無効化して動作確認を行う、などが挙げられます。