HTMLコメントの書き方｜初心者向けにコメントアウトと注意点を解説

HTMLのコードへメモを残したいときは、コメントを使います。コメントはソースコードには残りますが、通常のブラウザ画面には表示されません。

基本の書き方は、メモを<!--と-->で囲むだけです。ただし、コメントの入れ子、タグの途中への挿入、パスワードなど秘密情報の記載は避ける必要があります。

この記事では、HTMLコメントの1行・複数行の書き方、一時的にコードを非表示にする方法、表示されないときの確認、CSS・JavaScriptのコメントとの違いを初心者向けに解説します。

HTMLコメントの基本的な書き方

HTMLコメントは<!--で始まり、-->で終わります。開始記号と終了記号の間に、コードの目的や修正理由などを書きます。

<!-- お知らせ欄の見出し -->
<h2>最新のお知らせ</h2>
<p>営業時間を更新しました。</p>

ブラウザには見出しと段落だけが表示され、「お知らせ欄の見出し」というメモは表示されません。コメントはHTML要素ではなく、文書のソースへ注釈を残すための構文です。

上の図のように、コメントの前後にある要素は通常どおり表示されます。コメント部分だけがレンダリングの対象から外れます。

1行コメントと複数行コメントを書く

短いメモを1行で書く

要素の役割や、あとで修正する箇所を短く示す場合は1行で書きます。コメントの前後へ半角スペースを入れると、記号と文章の境目が分かりやすくなります。

<!-- メインナビゲーション -->
<nav aria-label="メインメニュー">
  <a href="/">ホーム</a>
  <a href="/contact/">お問い合わせ</a>
</nav>

「ここから何が始まるのか」を示すコメントは、長いHTMLを読み返すときに役立ちます。<nav>のように要素名だけで役割が分かる場合は、説明を増やしすぎないことも大切です。

長い説明を複数行で書く

開始記号と終了記号の間には改行を入れられます。更新条件や外部サービスとの関係など、1行では読みにくい説明に使います。

<!--
  キャンペーン期間中だけ表示する案内です。
  終了日を変更した場合は、リンク先も確認してください。
-->
<p><a href="/campaign/">キャンペーンを見る</a></p>

コメントの各行を要素と同じ字下げへそろえると、どの範囲に関する説明か分かりやすくなります。共同作業では、理由や前提が伝わる短い文章を意識してください。

HTMLを一時的にコメントアウトする

「コメントアウト」とは、コードを削除せず、一時的に実行や表示の対象から外すことです。表示を比較したいときや、不具合の原因を小さく切り分けたいときに使えます。

変更前の状態

次のコードでは、見出しと案内文の両方がブラウザへ表示されます。

<h2>イベント情報</h2>
<p class="notice">8月10日は臨時休業です。</p>

コメントを追加した状態

案内文を一時的に非表示にするため、p要素全体をコメントで囲みます。開始タグと終了タグの両方を含めることがポイントです。

<h2>イベント情報</h2>

<!--
<p class="notice">8月10日は臨時休業です。</p>
-->

変更後は見出しだけが表示されます。確認が終わったらコメント記号を外すか、不要になったコードなら削除し、長期間残したままにしないよう整理しましょう。

HTMLファイルの作成場所や保存方法から確認したい場合は、次の記事で基本の作業手順を確認できます。

HTMLコメントで注意すること

コメントを入れ子にしない

HTMLコメントの中へ、別のHTMLコメントを入れることはできません。内側の-->で最初のコメントが終了し、その後のコードが意図しない形で解釈される可能性があります。

<!-- 外側のコメント
  <!-- 内側のコメント -->
-->

複数の範囲へ説明を付けたい場合は、コメントを連続させず、それぞれを独立して書きます。エディタの色分けが途中で変わったときは、終了記号の位置も確認してください。

開始タグの途中へコメントを書かない

コメントはタグの属性と属性の間へ挿入するものではありません。属性を一時的に外したい場合は、要素全体をコメントアウトするか、変更前の値をGitなどの履歴で管理します。

<!-- 避ける書き方 -->
<img src="photo.jpg" <!-- loading="lazy" --> alt="海辺の風景">

秘密情報を書かない

コメントは画面に表示されなくても、ページのソースや開発者ツールから確認できます。パスワード、APIキー、個人情報、公開前の社内情報などは書かないでください。

「見えない」と「送信されない」は別です。ブラウザへ配信されたHTMLに含まれる情報は、利用者が確認できる前提で扱いましょう。

コメントを書きすぎない

見れば分かるタグへ同じ内容のコメントを付けると、かえって読みづらくなります。コードから分からない「なぜこの構造なのか」「どこを一緒に更新するのか」を中心に残してください。

CSS・JavaScriptのコメントとの違い

コメント記号は言語ごとに違います。HTMLの記号をCSSやJavaScriptへそのまま書かないように注意してください。

/* カードの余白 */
.card {
  padding: 1rem;
}

// メニューを開く
menuButton.addEventListener('click', openMenu);

script要素の中をHTMLコメントで囲む古い書き方は、現在のWeb制作では必要ありません。JavaScript部分にはJavaScriptのコメント記号を使います。

HTML・CSS・JavaScriptを色分けして確認できるエディタを使うと、コメントの閉じ忘れにも気付きやすくなります。

WordPressのブロックコメントは削除しない

WordPressのブロックエディターをコード表示へ切り替えると、<!-- wp:paragraph -->のような記述があります。見た目はHTMLコメントですが、WordPressがブロックの種類と範囲を識別するための目印です。

<!-- wp:paragraph -->
<p>ここに本文を書きます。</p>
<!-- /wp:paragraph -->

この開始・終了コメントを不用意に削除すると、ブロックが正しく認識されなくなる場合があります。通常のHTMLメモとは目的が違うため、編集するときはブロック全体の構造を保ってください。

HTMLコメントに関するよくある質問

コメント内の文章は検索結果に表示されますか？

HTMLコメントは通常の本文として画面へ表示されません。検索順位を上げる目的でキーワードを詰め込まず、開発者がコードを理解するための必要なメモだけを書きましょう。

コメントが画面に文字として表示される原因は何ですか？

<!--または-->の記号が欠けている、全角記号になっている、記号の順番が違う可能性があります。コードをコピーし直し、半角で入力されているか確認してください。

コメントアウトしたコードを元へ戻すにはどうしますか？

対象範囲の先頭にある<!--と、末尾にある-->を削除します。戻したあとにタグの開始・終了がそろっているか確認し、ブラウザを再読み込みしてください。

まとめ

HTMLコメントは、メモや一時的に非表示にしたいコードを<!--と-->で囲んで書きます。1行でも複数行でも使えますが、入れ子やタグ途中への挿入はできません。

画面に表示されなくても、ソースから読める点に注意してください。秘密情報は書かず、コードだけでは分からない理由や更新条件を簡潔に残すと、あとから自分やほかの人が修正しやすくなります。