コメント（）

『HTML』におけるコメントの書き方です。コメントは『』で囲む1種類のみで、ブロックコメントも一行コメントもこの記法で統一されています。コメントはブラウザに表示されず、ページの動作にも影響しません。コードの意図を残したり、一時的にマークアップを無効化したりするために使います。

構文

<!-- 一行コメントです。 -->

<!--
  複数行のコメントです。
  <!-- と --> の間に書いた内容はすべてコメントになります。
-->

コメントの種類

種類	書き方	概要
一行コメント	<!-- テキスト -->	1行に収まるコメントです。コードの区切りや簡単な説明を残すときに使います。
複数行コメント	<!-- テキスト -->	複数行にわたる説明や、大きなHTML領域をまとめてコメントアウトするときに使います。

コメントの制約

コメントを入れ子にできない

HTMLコメントは入れ子（ネスト）ができません。コメントの内側にさらに『』でコメントが終了します。

<!-- 外側のコメント開始
  <!-- 内側のコメント -->   <!-- ここで外側のコメントも終わってしまう -->
ここはコメント外になる
-->

大きなHTML領域をコメントアウトする場合、その中に既存のコメントがあると意図しない場所でコメントが終了します。既存コメントを事前に削除してからコメントアウトするか、コメントアウトしたいブロックを別の方法（テンプレートの条件分岐など）で非表示にする方法もあります。

『--』（ダブルハイフン）はコメント内に書けない

HTMLの仕様では、コメント本体に『--』（連続するハイフン2つ）を含めることができません。『-->』でコメント終了と解釈されるためです。ハイフンを使いたい場合は1つだけにするか、スペースを挟みます。

<!-- これは NG: コメント内に -- を含む -->
<!-- これは OK: ハイフン1つ - は問題ない -->

IE 条件付きコメント（歴史的背景）

Internet Explorer 5〜9 には、IE 専用の「条件付きコメント（Conditional Comments）」という独自拡張がありました。『<!--[if IE]>』のような構文で、IE のバージョンを判定して専用のスタイルシートやスクリプトを読み込む用途に使われていました。

<!--[if IE]>
  <p>このテキストは IE でのみ表示されます。</p>
<![endif]-->

<!--[if lt IE 9]>
  <link rel="stylesheet" href="ie_compat.css">
<![endif]-->

<!--[if gte IE 8]>
  <p>IE 8 以上の場合に表示されます。</p>
<![endif]-->

条件	意味
`[if IE]`	IE のすべてのバージョン
`[if IE 8]`	IE 8 のみ
`[if lt IE 9]`	IE 9 未満（IE 8 以下）
`[if lte IE 9]`	IE 9 以下
`[if gt IE 8]`	IE 8 より上（IE 9 以上）
`[if gte IE 8]`	IE 8 以上

IE 以外のブラウザはこの構文を通常のコメントとして扱い、中の内容を無視します。IE 10 以降は条件付きコメントのサポートが廃止され、IE 11 でも動作しません。現在は IE 自体のサポートが終了しているため、新規コードでこの構文を使う必要はありません。

コメントを書くべき場所・書かなくてよい場所

判断	場面	理由
書くべき	大きなセクションの区切り	ヘッダー・メインコンテンツ・フッターの境目にコメントを入れると、長いHTMLファイル内での位置把握が容易になります。
書くべき	閉じタグの対応先が不明確な場合	入れ子が深いとどのタグを閉じているか判断しにくくなります。『<!-- /wrapper -->』のような閉じタグコメントで対応を明示します。
書くべき	一時的なコメントアウト	動作確認やデバッグのために要素を一時的に非表示にする場合、後で戻す意図があることを残しておくと作業ミスを防げます。
書くべき	テンプレートの変数・ロジックの説明	PHPなどのサーバーサイドコードと混在している箇所は、HTMLだけ見ても意図が伝わりにくいため補足を残します。
書かなくてよい	タグ名から明らかな用途	『<!-- ナビゲーション -->』と書かなくても『<nav>』タグを見れば用途は明らかです。セマンティックなHTMLを書くことで不要なコメントを減らせます。
書かなくてよい	変更履歴・削除したコード	バージョン管理（git）があるため、コメントに古いコードや変更日を残す必要はありません。

サンプルコード

セクション区切りと閉じタグコメントの使い方を確認します。

comment_section.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コメントのサンプル</title>
</head>
<body>

  <!-- ヘッダー -->
  <header>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">概要</a></li>
      </ul>
    </nav>
  </header>
  <!-- /ヘッダー -->

  <!-- メインコンテンツ -->
  <main>
    <div class="container">
      <div class="wrapper">
        <section>
          <h1>サンプルページ</h1>
          <p>コンテンツがここに入ります。</p>
        </section>
      </div><!-- /wrapper -->
    </div><!-- /container -->
  </main>
  <!-- /メインコンテンツ -->

  <!-- フッター -->
  <footer>
    <p>&copy; 2025 example.com</p>
  </footer>
  <!-- /フッター -->

</body>
</html>

一時的なコメントアウトとデバッグ用コメントの例です。

comment_debug.html

<!-- TODO: バナー画像のサイズ確定後に差し替える -->
<!--
<div class="hero-banner">
  <img src="/img/hero.jpg" alt="メインビジュアル">
</div>
-->

<!-- 暫定: テキストのみで表示 -->
<div class="hero-placeholder">
  <p>メインビジュアルを表示予定のエリアです。</p>
</div>

概要

HTMLのコメントは『』の1種類だけです。一行・複数行の区別なく同じ記法を使います。コメントはブラウザに表示されず、HTML内のどこにでも書けます。ただし、ページのソースを表示すれば誰でも読めるため、パスワードや内部的なメモなど機密情報をHTMLコメントに書くことは避けるべきです。

コメントを入れ子にすることはできません。コメント内に『-->』が現れた時点でコメントが終了します。大きなブロックをコメントアウトする際に既存のコメントが混在していると、意図しない場所でコメントが終了するため注意が必要です。

IE 条件付きコメント（『<!--[if IE]>』）は IE 5〜9 で使われた独自拡張で、IE 10 以降では廃止されています。現在サポートが終了した IE に対応する必要がある特別な状況でなければ、この記法を使う場面はありません。

よくあるミス

コメント内に -- を含めてコメントが壊れる

HTMLの仕様ではコメント内に『--』（連続するハイフン2つ）を書くことができません。ブラウザによっては許容することもありますが、仕様上は無効です。

<!-- 日付: 2025-04-01 -- 暫定対応 -->

修正後:

<!-- 日付: 2025-04-01 / 暫定対応 -->

コメントアウト中に既存コメントがあって意図しない場所で終わる

コメントを入れ子にできないため、コメントアウトしたいブロックの中に既存のコメントがあると最初の『-->』でコメントが終了します。

<!--
<div class="old-section">
  <!-- このブロックは旧デザインです -->   <!-- ここでコメントが終わってしまう -->
  <p>古いコンテンツ</p>
</div>
-->

コメントアウト前に内部のコメントを削除するか、テンプレートの条件分岐を使って非表示にします。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典