HTMLコメントアウトの書き方｜ショートカット・入れ子・できない原因

ブラウザは、開始の記号から最初の終了の記号までを「コメント」として読み、画面には出しません。ただしコメントは消えたわけではなく、ページのソースや DevTools では誰でも読めます。

flowchart TD
    S[HTML のソース] --> P[ブラウザのパーサー]
    P --> C[開始から最初の終了の記号まで<br>コメントになる]
    P --> E[それ以外<br>要素や文字]
    C --> H[画面には出ない<br>ソースと DevTools では見える]

急いでいる人向けに、よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04・Chromium 141.0.7390.37（Playwright 1.56 から起動）。17パターンの HTML を Python の http.server（3.11.15）から配信して Chromium で読み込み、画面の文字（innerText）とコメントノードの数を数えました。仕様上のエラー名は HTML の仕様どおりに実装されたパーサー parse5 8.0.1 で出し、HTML の仕様（WHATWG HTML Living Standard）の「13.1.6 Comments」と「Parse errors」で確かめました。ショートカットの動きは VS Code のエディタ部分と同じ Monaco Editor 0.57.0 を Chromium で動かして実際にキーを押し、キーの割り当ては VS Code・JetBrains・Neovim の公式ドキュメントで確かめました。ほかの言語は PHP 8.4.21・Jinja2 3.1.6・EJS 7.0.2・Handlebars 4.7.10・@vue/compiler-dom 3.5.44・esbuild 0.28.2・html-minifier-terser 7.2.0（Node.js 22.22.2）で実行し、JSP・Thymeleaf・Blade は各公式の仕様・ドキュメントで確かめました（確認日 2026年10月22日）。

HTMLのコメントアウトとは（コメントとの違い）

この節では、「コメント」と「コメントアウト」の違いと、何のために使うのかが分かります。

HTML のコメントは、ブラウザの画面に表示されないメモです。 <!-- で始めて --> で終わる範囲が、コメントになります。

「コメント」と「コメントアウト」は、同じ書き方で目的が違います。

よく使われる場面です。

ブラウザはコメントを捨てずに、DOM（ページの木構造）の中に「コメントノード」として残します。この記事では、Chromium の中でこのコメントノードの数を数えて、書き方ごとの結果を確かめています。

HTMLコメントアウトの書き方（1行・複数行・一部だけ）

この節では、1行・複数行・行の一部をコメントアウトする書き方が、コピーして使える形で分かります。

1行だけコメントにする

<p>表示A</p>
<!-- メモ：ここは表示されない -->
<p>表示B</p>

Chromium で読み込むと、画面には「表示A」「表示B」だけが出て、コメントノードが1個できました（中身は メモ：ここは表示されない。前後の半角スペースもそのまま残ります）。

複数行をまとめてコメントアウトする

開始の記号と終了の記号の間は、何行あってもかまいません。タグを含めることもできます。

<!--
<p>非表示1</p>
<p>非表示2</p>
-->
<p>表示</p>

画面には「表示」だけが出て、2つの段落はまるごと1個のコメントノードになりました。

行の一部だけをコメントアウトする

コメントは行の途中にも置けます。タグの外側（要素の中身）であれば、どこにでも書けます。

<p>価格：1,980円<!-- 税込み表示に変える予定 --></p>
<ul>
  <li>東京</li><!-- <li>大阪</li> --><li>名古屋</li>
</ul>

書くときの手順

コメントを置けない場所

コメントは、タグの中（属性の間）には書けません。また、次の場所では書いてもコメントになりません。Chromium で確かめた結果です。

<textarea id="ta"><!-- メモ --></textarea> を読み込むと、入力欄の値は <!-- メモ --> という文字列でした。属性の値も同じで、コメントノードは0個です。

コメントアウトのショートカット（VS Code・JetBrains・Neovim）

この節では、主なエディタでコメントアウトと解除をするキーと、実際に押したときに HTML がどう変わるかが分かります。

エディタ別のショートカット

VS Code の公式のキーボードショートカット一覧では、行のコメントの切り替えが editor.action.commentLine、ブロックコメントの切り替えが editor.action.blockComment です。ほかに「Ctrl + K → Ctrl + C」でコメントを付けるだけ、「Ctrl + K → Ctrl + U」で外すだけの操作もあります（Mac は ⌘K ⌘C・⌘K ⌘U）。同じキーをもう一度押すと解除される「切り替え」なので、解除のための別のキーを覚えなくても戻せます。

JetBrains の IDE は、公式ドキュメントで Windows・Linux のキーが Ctrl + /（行）と Ctrl + Shift + /（範囲）です。macOS のキー割り当ては、Help メニューの「Keyboard Shortcuts PDF」で確かめられます。Neovim は 0.10 でコメントの機能が組み込まれ、ドキュメントでは gcc が現在の行、ビジュアルモードで選んで gc が選んだ行の切り替えです。

VS Code のショートカットの一覧は、関連記事「VSCodeショートカット一覧｜Win/Mac対応130項目とAI操作・変更方法」で扱っています。

Ctrl + / を押すと HTML はどう変わるか（実測）

VS Code のエディタ部分と同じ Monaco Editor を Chromium で動かし、言語を HTML にしてキーを押しました。元の HTML は次のとおりです。

<div class="box">
  <p>段落1</p>
  <p>段落2</p>
</div>
<style>
  p { color: red; }
</style>
<script>
  console.log("A");
</script>

結果です（変わった行だけを抜き出しています）。

== 1行（カーソルを2行目に置いて Ctrl+/）
  <!-- <p>段落1</p> -->

== 複数行（2〜3行目を選択して Ctrl+/）
  <!-- <p>段落1</p>
  <p>段落2</p> -->

== もう一度 Ctrl+/（解除）
  <p>段落1</p>
  <p>段落2</p>

== 一部だけ（「段落1」の文字だけ選択して Ctrl+Shift+A。Linux のキー）
  <p><!-- 段落1 --></p>

== style の中（6行目で Ctrl+/）
  /* p { color: red; } */

== script の中（9行目で Ctrl+/）
//   console.log("A");

HTML は「1行ずつのコメント」の記号が無いので、複数行を選んで Ctrl + / を押すと、各行ではなく選んだ範囲全体が1組の記号で囲まれます。 VS Code の HTML の言語設定（language-configuration.json）にも、コメントの記号は "blockComment": [ "<!--", "-->" ] の1組だけが書かれています。<style> の中では CSS の /* */、<script> の中では JavaScript の // に、自動で切り替わりました。

ショートカットが効かないときに確かめること

• 1右下の言語モードが HTML になっているかコメントの記号は言語ごとの設定で決まる。拡張子の無いファイルや新規ファイルはプレーンテキストのことがある
• 2同じキーをほかの機能が使っていないかVS Code は Ctrl + K → Ctrl + S でショートカットの画面を開き、右クリックの「Show Same Keybindings」で重なりを探せる
• 3押したキーが VS Code に届いているかコマンドパレットの「Developer: Toggle Keyboard Shortcuts Troubleshooting」で、押したキーの記録が出力パネルに出る
• 4キーボードの配列を切り替えた直後ではないかVS Code のドキュメントでは、Linux で配列を変えたら VS Code を再起動するよう書かれている

入れ子にできない理由と回避方法

この節では、コメントの中にコメントを入れると何が起きるのかと、すでにコメントがある範囲をまとめて隠す方法が分かります。

入れ子にすると、最初の終了の記号でコメントが閉じる

HTML のコメントは、中にある最初の --> で終わります。 内側にコメントがあると、内側の終了の記号で外側のコメントまで閉じてしまい、その後ろの HTML が画面に出ます。

flowchart TD
    A[外側の開始の記号<br>ここからコメント] --> B[内側の開始の記号<br>ただの文字として読む]
    B --> C[内側の終了の記号<br>ここでコメントが閉じる]
    C --> D[残りの段落と外側の終了の記号<br>画面に表示される]

<!-- 外側の開始
<p>段落1</p>
<!-- 内側のコメント -->
<p>段落2</p>
-->
<p>段落3</p>

Chromium で読み込んだ結果です。

画面の文字   : 段落2 / --> / 段落3
コメントノード : 1個 " 外側の開始\n<p>段落1</p>\n<!-- 内側のコメント "
parse5 のエラー: nested-comment(7行5列)

隠したつもりの「段落2」と、外側の終了の記号 --> が画面に文字として出ました。 HTML の仕様の「nested-comment」の説明にも、このようなコメントは最初に出てくる --> で閉じ、その後ろはすべてマークアップとして扱われる、と書かれています。

エディタのショートカットでも入れ子になる

すでに2行目がコメントになっている HTML で、1〜4行目を選んで Ctrl + / を押すと、Monaco Editor は次のように外側を囲みました。

<!-- <div class="box">
  <!-- <p>段落1</p> -->
  <p>段落2</p>
</div> -->

この結果を Chromium に読み込ませると、画面には「段落2」と「-->」が出ました。ショートカットは入れ子を防いでくれないので、範囲の中にコメントがあるかを先に見ます。

回避方法

template と、よく似た使い方をされる hidden 属性を、Chromium で比べました。どちらの中にもコメント・段落・画像・script を入れています。

<template id="t">
  <!-- 内側のコメント -->
  <p>段落T</p>
  <img src="t.png">
  <script>console.log("template の中");</script>
</template>
<div hidden>
  <!-- 内側のコメント -->
  <p>段落H</p>
  <img src="h.png">
  <script>console.log("hidden の中");</script>
</div>
<p>表示</p>

画面の文字       : 表示
console        : hidden の中
画像のリクエスト   : h.png だけ
template の中のコメント: 1個（template.content の中に残る）

hidden は画面から消すだけで、画像は読み込まれ、script も実行されました。template はどちらも起きません。 MDN によると、template の中身は既定では描画されず、content プロパティの DocumentFragment に入ります。ただし、どちらもソースには残るので、見られたくないものを隠す方法にはなりません。

コメントアウトできない・表示される原因（Chromiumで実測）

この節では、「コメントアウトしたのに表示される」「下が全部消えた」ときに、書き方のどこが原因かを、実測の表から探せます。

17パターンの HTML を Chromium で読み込み、画面の文字・コメントノードの数を数え、parse5 で仕様上のエラー名を出しました。

読み取れることです。

• 閉じ忘れは、開始の記号からファイルの最後までが1個のコメントになり、下のページが全部消えます。 「画面が途中から真っ白になった」ときは、まず閉じ忘れを疑います。実測では </body> と </html> までコメントの中に入っていました。
• ! の抜け・全角の ！ は、コメントにならずに記号がそのまま画面に出ます。 日本語入力のまま打つと全角になりやすい部分です。
• ハイフンがダッシュ（–）に変わったコメントは、仕様上は「間違って開いたコメント」として、最初の > までがコメントになります。 実測では、コメントの中身は –– <p で終わり、隠したはずの「段落1」と ––> が画面に出ました。ブログの編集画面や文書作成ソフトからコピーしたときに、ハイフン2つが自動でダッシュに変わることがあります。
• <!--> は、仕様では「空のコメントが > で急に閉じた」と扱われます。中身が空のコメントになり、その後ろはふつうに表示されます。
• <! -- メモ --> や <!-- メモ --> は、エラーではあっても結果として画面からは消えます。見た目が正しくても仕様上は誤りなので、正しい形に直しておくと、ほかのツールで読んだときに困りません。

DOCTYPE の前や html の後ろに書いたコメント

<!-- DOCTYPE より前のコメント -->
<!DOCTYPE html>
<html lang="ja">
...
</html>
<!-- </html> より後のコメント -->

どちらもコメントノードとして文書に残り（2個）、document.compatMode は標準モードを表す CSS1Compat でした。Chromium 141 では、DOCTYPE の前のコメントで互換モード（Quirks モード）にはなりませんでした。

原因の探し方

1. ブラウザで右クリックし「ページのソースを表示」を開きます。コメントの部分は色が変わるので、どこまでがコメントになっているかが見えます。
2. DevTools の Elements パネルで、コメントが1かたまりになっているか、途中で切れていないかを見ます。DevTools の使い方は、関連記事「Chrome DevToolsの使い方｜デバッグ手順と便利機能一覧」で扱っています。
3. 原因が見つからないときは、W3C の Nu Html Checker などの検証ツールに HTML を貼ると、エラーの位置が出ます。

ハイフン（--）を含めたときの扱い（HTMLとXHTML）

この節では、「コメントの中でハイフン2つを使ってはいけない」という説明が、いまの HTML でどこまで正しいのかが分かります。

いまの HTML の仕様では、コメントの中に -- があってもエラーになりません。 仕様（13.1.6 Comments）で禁じられているのは、中身を > や -> で始めること、中に <!--・-->・--!> を含めること、<!- で終えることです。

ただし、XML として読む XHTML（application/xhtml+xml で配信したページ）では、-- はエラーになります。Chromium の DOMParser で、同じコメントを2通りに読み込みました。

<!-- 区切り -- ここまで -->  text/html               コメント1個  エラーなし
<!-- 区切り -- ここまで -->  application/xhtml+xml   コメント0個  エラー: error on line 1 at column 52: Comment must not contain '--' (double-hyphen)
<!-- 区切り - ここまで -->   text/html               コメント1個  エラーなし
<!-- 区切り - ここまで -->   application/xhtml+xml   コメント1個  エラーなし
<!--- 3本 --->             text/html               コメント1個  エラーなし
<!--- 3本 --->             application/xhtml+xml   コメント0個  エラー: error on line 1 at column 52: Comment must not contain '--' (double-hyphen)

ハイフンを並べた区切り線（<!--------- 見出し --------->）は、HTML では1個のコメント（中身は ------- 見出し -------）になり、エラーもありませんでした。同じコメントを XML や SVG のファイルにも貼る可能性があるなら、区切り線は = などで書いておくと、どちらでも壊れません。

CSS・JavaScript・PHP・テンプレートエンジンのコメントとの違い

この節では、HTML 以外の言語のコメントの書き方と、それぞれが「ブラウザに届くか」が一目で分かります。

サーバー側やビルドのときに消えるコメントは、ブラウザに届きません。HTML のコメントは、テンプレートの中に書いても、そのままブラウザに届きます。

style の中の HTML コメントは CSS を止めない

<style>
<!--
p.t { color: red; }
-->
/* p.u { color: red; } */
</style>
<p class="t">t</p>
<p class="u">u</p>

p.t の色: rgb(255, 0, 0)   ← HTML のコメントで囲んだのに効いている
p.u の色: rgb(0, 0, 0)     ← /* */ で止まっている

<style> の中を HTML のコメントで囲んでも、CSS は止まりません。 CSS の仕様（CSS Syntax Level 3）では、<!-- と --> は CDO・CDC という記号で、スタイルシートの一番外側では読み捨てられます。昔、<style> を知らないブラウザに CSS を見せないために HTML のコメントで囲む書き方が広まり、その名残だと仕様に書かれています。CSS を止めるときは /* */ を使います。

script の中の HTML コメントは「1行コメント」になる

<script>
<!-- console.log("A");
console.log("B");
--> console.log("C");
</script>
<script type="module">
<!-- console.log("D");
</script>

console: B
pageerror: HTML comments are not allowed in modules

ふつうの <script> では、<!-- から行の終わりまでと、行頭の --> から行の終わりまでが、JavaScript の1行コメント（ECMAScript の付属書 B.1.1「HTML-like Comments」）として扱われ、「B」だけが出力されました。type="module" の script では、同じ書き方が構文エラーになります。JavaScript を止めるときは // か /* */ を使います。

PHP：HTML のコメントの中の PHP は実行される

<?php $price = 1980; $secret = "dev-db-pass"; ?>
<p>価格：<?php echo $price; ?>円</p>
<!-- HTML のコメント：<?php echo $secret; ?> -->
<?php // PHP の1行コメント ?>
<?php /* PHP の複数行コメント
         echo $secret; */ ?>
<?php # シャープでも1行コメント ?>
<?php // ここで ?> が来ると PHP のコメントは終わる

PHP 8.4.21 で実行した出力です。

<p>価格：1980円</p>
<!-- HTML のコメント：dev-db-pass -->
 が来ると PHP のコメントは終わる

HTML のコメントの中の <?php echo $secret; ?> は実行され、その値がブラウザに届きました。 PHP のマニュアルでも、// と # の1行コメントは行の終わりか ?> のどちらか先に来たほうで終わる、と書かれています。最後の行で ?> より後ろの文字が出力されたのはこのためです。また、/* */ は最初の */ で終わるので、入れ子にしないよう注意されています。

テンプレートエンジン：自分のコメントは消え、HTML のコメントは残る

Jinja2・EJS・Handlebars で、テンプレートのコメントと HTML のコメントを並べて書き、price = 1980 で出力しました。

[Jinja2 3.1.6]   {# Jinja のコメント #}            → 消える   <!-- HTML のコメント {{ price }} -->      → <!-- HTML のコメント 1980 -->
[EJS 7.0.2]      <%# EJS のコメント %>              → 消える   <!-- HTML のコメント <%= price %> -->     → <!-- HTML のコメント 1980 -->
[Handlebars 4.7.10] {{! コメント }}・{{!-- … --}}   → 消える   <!-- HTML のコメント {{price}} -->       → <!-- HTML のコメント 1980 -->

どのエンジンも、HTML のコメントの中の変数まで埋め込んでブラウザに送りました。 Handlebars のドキュメントには、}} などを含むコメントは {{!-- --}} を使うこと、コメントを出力に残したいなら HTML のコメントを使うこと、と書かれています。

Java のテンプレートは公式の仕様・ドキュメントで確かめました。

• JSP：Jakarta Server Pages 3.1 の仕様（1.5.1）で、<%-- --%> の中身は「完全に無視される」、HTML のコメントは「解釈されないテンプレートの文字」として扱われ、中の動的な部分は処理される、とされています。
• Thymeleaf：3.1 のチュートリアル（11 Comments and Blocks）で、<!--/* ... */--> はテンプレートを読むときに取り除かれる「パーサーレベルのコメント」、ふつうの <!-- --> はほかの文字と同じように処理される、とされています。
• Blade：Laravel のドキュメントで、{{-- --}} は HTML のコメントと違い、アプリが返す HTML に含まれない、とされています。

Javadoc のようなドキュメント用のコメントは、関連記事「Javadocの書き方｜タグ一覧(@param,@return)と生成コマンド」で扱っています。

JSX と Vue

$ esbuild a.jsx --jsx=automatic      # {/* JSX のコメント */} を書いたファイル
export const A = () => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { children: "表示" }) });

$ esbuild b.jsx --jsx=automatic      # <!-- HTML のコメント --> を書いたファイル
✘ [ERROR] Expected identifier but found "!"

    b.jsx:3:5:
      3 │     <!-- HTML のコメント -->
        ╵      ^

JSX の中に HTML のコメントは書けず、構文エラーになります。 JSX では {/* */} と書き、変換後のコードからは消えていました。

Vue のテンプレートは HTML のコメントをそのまま書けます。@vue/compiler-dom で comments の設定を変えて変換すると、true では _createCommentVNode(" Vue のテンプレートのコメント ") が作られ、false では消えました。Vue のドキュメントでは、この設定の既定は false で、本番ではコメントを取り除き、開発中は常に残す、とされています。

コメントはソースで見える（書いてはいけない情報と消し方）

この節では、HTML のコメントが誰に見えるのかと、公開前に何を確かめ、どう消すかが分かります。

HTML のコメントは画面に出ないだけで、ページを開いた人なら誰でも読めます。 次のページを手元のサーバーから配信し、curl で取りました。

$ curl -s -i http://127.0.0.1:34600/secret.html
HTTP/1.0 200 OK
Content-type: text/html
Content-Length: 277

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title>公開ページ</title></head>
<body>
<!-- TODO: 管理画面 /admin-test/ は公開前に消す -->
<h1>お知らせ</h1>
<!-- <p>11月1日に新料金を発表します</p> -->
<p>本文</p>
</body>
</html>

画面には「お知らせ」「本文」だけが出ますが、ブラウザが受け取る中身には、管理画面の URL も、発表前の文もそのまま入っています。JavaScript からも、document.createTreeWalker(document, NodeFilter.SHOW_COMMENT) で2個のコメントの中身を読み出せました。

公開前に確かめること

• 1パスワード・API キー・接続先を書いていないかテンプレートの HTML コメントの中の変数も、値が埋め込まれて届く（PHP・Jinja で実測）
• 2管理画面・テスト用の URL を書いていないかTODO のメモに URL を残しやすい
• 3発表前の情報をコメントアウトで隠していないか価格・日付・キャンペーンの文は、公開の時点まで HTML に入れない
• 4人の名前・社内の事情を書いていないか担当者名や取引先名は、課題管理のツールや Git のコミットに書く

見られたくないメモは、PHP・Blade・Jinja などサーバー側のコメントに書けば、ブラウザには届きません。

公開するときにコメントを消す（実測）

ビルドのときに HTML を小さくするツール（ミニファイ）で、コメントを消せます。html-minifier-terser 7.2.0 の removeComments: true で、上のページに3種類のコメントを足して実行しました。

元 405 バイト → 242 バイト
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title>公開ページ</title></head>
<body>

<h1>お知らせ</h1>

<p>本文</p>
</body>
</html>
<!--[if IE]><p>IE</p><![endif]-->
<!-- 残す -->
<!--! ライセンス表記 -->

ふつうのコメントは消えましたが、条件付きコメント、htmlmin:ignore で挟んだ部分、<!--! で始まるコメント（ライセンス表記などに使う形）は残りました。消し忘れを防ぐには、ミニファイの後のファイルを grep -n '<!--' で確かめます。

条件付きコメント（IE用・廃止済み）

この節では、以前のサイトで見かける <!--[if IE]> が何で、いまのブラウザでどう扱われるかが分かります。

条件付きコメントは、Internet Explorer（IE）だけが中を読む特別なコメントでした。Microsoft のドキュメント「Conditional comments are no longer supported」によると、IE10 の標準モードと互換モードでサポートが取り除かれ、ほかのブラウザと同じ「ふつうのコメント」として扱われるようになりました。IE11 のデスクトップアプリは、Windows 10 の半期チャネルで2022年6月15日にサポートが終了しています。

<!--[if IE]><p>IE だけ</p><![endif]-->
<!--[if !IE]><!--><p>IE 以外</p><!--<![endif]-->
<p>通常</p>

画面の文字   : IE 以外 / 通常
コメントノード : 3個  "[if IE]><p>IE だけ</p><![endif]"  "[if !IE]><!"  "<![endif]"

Chromium では、[if IE] の中身は1個のコメントとして隠れ、<!--[if !IE]><!--> の形で書いた「IE 以外」の部分は表示されました。いまのブラウザでは条件付きコメントは意味を持たないので、見つけたら中身ごと消すか、IE 以外向けの部分だけを残すと整理できます。 ただし上で見たとおり、ミニファイのツールには条件付きコメントを残す動きのものがあります。

よくある質問

Q. HTMLのコメントアウトのショートカットは？ A. VS Code は Windows・Linux で Ctrl + /、Mac で ⌘ + / です。選んだ一部だけを囲むときは、Windows が Shift + Alt + A、Mac が ⇧⌥A、Linux が Ctrl + Shift + A です。JetBrains の IDE（Windows・Linux）は Ctrl + / と Ctrl + Shift + / です。

Q. Macでコメントアウトするには？ A. VS Code では ⌘ + / で、選んだ行がまとめて囲まれます。もう一度 ⌘ + / を押すと解除されます。

Q. 複数行をまとめてコメントアウトするには？ A. 範囲の前に <!--、後ろに --> を書きます。エディタでは行を選んで Ctrl + /（Mac は ⌘ + /）を押すと、選んだ範囲全体が1組の記号で囲まれました（Monaco Editor で実測）。

Q. コメントアウトを解除するには？ A. 開始と終了の記号を消すか、コメントの中にカーソルを置いて、付けたときと同じショートカットを押します。VS Code の Ctrl + /・Shift + Alt + A は、付ける・外すを切り替える操作です。

Q. HTMLのコメントは入れ子にできますか？ A. できません。中にある最初の --> で外側まで閉じ、残りが画面に出ます（Chromium で実測）。内側のコメントを先に外すか、template 要素やサーバー側のコメントで囲みます。

Q. コメントアウトしたのに表示されるのはなぜ？ A. 多い原因は、! の抜け、全角の ！、ハイフンがダッシュ（–）に変わったこと、中に別のコメントがあることです。逆に、下が全部消えたときは閉じ忘れです。症状ごとの結果は「コメントアウトできない・表示される原因」の表にあります。

Q. コメントの中でハイフン（--）を使ってもいいですか？ A. いまの HTML（text/html）ではエラーになりません。XHTML や SVG など XML として読むファイルではエラーになるので、区切り線は = などで書くと安全です。

Q. HTMLのコメントは他人に見えますか？ A. 見えます。画面には出ませんが、ページのソースや DevTools、curl で取った中身にそのまま入っています。見られたくないメモはサーバー側のコメントに書きます。

Q. CSSやJavaScriptのコメントアウトは？ A. CSS は /* */、JavaScript は //（1行）と /* */（範囲）です。<style> の中を HTML のコメントで囲んでも CSS は効いたままでした。

Q. PHPファイルの中でHTMLの部分をコメントアウトするには？ A. <?php /* ... */ ?> で囲むと、中の HTML も PHP も出力されません。HTML のコメントで囲むと、中の PHP は実行されて結果がブラウザに届きます（PHP 8.4 で実測）。

Q. HTMLのコメントを一括で削除するには？ A. ビルドのときに HTML を小さくするツールで消せます。html-minifier-terser の removeComments: true では、405 バイトの HTML が 242 バイトになりました。条件付きコメントや <!--! で始まるコメントは残るので、出力を確かめます。

Q. WordPressで書いたコメントが消えたり壊れたりするのは？ A. ブロックエディターは、ブロックの区切りを <!-- wp:paragraph --> のような HTML のコメントで保存しています（WordPress の開発者向けドキュメント）。記事の本文に HTML のコメントを例として見せたいときは、コードのブロックの中に書くと、そのまま文字として表示されます。

まとめ

• HTML のコメントは <!-- から最初の --> まで。画面に出ないだけで、ソースや DevTools では誰でも読める。
• VS Code は Ctrl + /（Mac は ⌘ + /）で切り替え。HTML は複数行を選ぶと範囲全体が1組の記号で囲まれる。
• 入れ子にはできない。内側の終了の記号で閉じて残りが表示される。ショートカットでも入れ子になる。
• 表示されてしまう原因は ! の抜け・全角・ダッシュ・入れ子、全部消えるのは閉じ忘れ（17パターンの実測表）。
• いまの HTML ではコメントの中の -- はエラーではない。XHTML・XML ではエラー。
• <style>・<script> の中を HTML のコメントで囲んでも止まらない。CSS は /* */、JS は //・/* */。
• 見られたくないメモは、PHP・JSP・Thymeleaf・Blade・Jinja などのサーバー側のコメントに書く。

HTML の雛形の書き方は、関連記事「HTMLテンプレートの基本｜コピペで使える雛形とheadの書き方を1行ずつ解説」で、HTML のタグの種類と書き方は、関連記事「HTMLタグ一覧表｜基本タグから全要素まで表示例・コピペ用コード付き」で扱っています。

参考・出典

確認日はいずれも 2026年10月22日です。

• WHATWG「HTML Living Standard 13.1.6 Comments」：https://html.spec.whatwg.org/multipage/syntax.html#comments
• WHATWG「HTML Living Standard 13.2.2 Parse errors」：https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
• W3C「CSS Syntax Module Level 3」：https://www.w3.org/TR/css-syntax-3/
• Ecma International「ECMAScript Language Specification B.1.1 HTML-like Comments」：https://tc39.es/ecma262/#sec-html-like-comments
• MDN「<template>: The Content Template element」：https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template
• Visual Studio Code「Default keyboard shortcuts reference」：https://code.visualstudio.com/docs/reference/default-keybindings
• Visual Studio Code「Keyboard shortcuts for Visual Studio Code」：https://code.visualstudio.com/docs/configure/keybindings
• microsoft/vscode「extensions/html/language-configuration.json」：https://github.com/microsoft/vscode/blob/main/extensions/html/language-configuration.json
• JetBrains「WebStorm: Write and edit source code」：https://www.jetbrains.com/help/webstorm/working-with-source-code.html
• JetBrains「WebStorm: Learn shortcuts」：https://www.jetbrains.com/help/webstorm/mastering-keyboard-shortcuts.html
• Neovim「runtime/doc/various.txt（commenting）」：https://github.com/neovim/neovim/blob/master/runtime/doc/various.txt
• Neovim「runtime/doc/news-0.10.txt」：https://github.com/neovim/neovim/blob/master/runtime/doc/news-0.10.txt
• Microsoft Learn「Conditional comments are no longer supported」：https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
• Microsoft Learn「Internet Explorer 11 - Microsoft Lifecycle」：https://learn.microsoft.com/en-us/lifecycle/products/internet-explorer-11
• PHP マニュアル「Comments」：https://www.php.net/manual/en/language.basic-syntax.comments.php
• Jakarta EE「Jakarta Server Pages 3.1」：https://jakarta.ee/specifications/pages/3.1/jakarta-server-pages-spec-3.1
• Thymeleaf「Tutorial: Using Thymeleaf（3.1）11 Comments and Blocks」：https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html
• Laravel「Blade Templates（13.x）Comments」：https://laravel.com/docs/blade#comments
• Jinja「Template Designer Documentation（3.1）Comments」：https://jinja.palletsprojects.com/en/stable/templates/#comments
• EJS「README（Tags）」：https://github.com/mde/ejs
• Handlebars「Introduction（Template comments）」：https://handlebarsjs.com/guide/#template-comments
• Vue.js「Application API: app.config.compilerOptions.comments」：https://vuejs.org/api/application.html#app-config-compileroptions-comments
• WordPress Developer Resources「Key Concepts（Block Editor）」：https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/
• parse5：https://github.com/inikulin/parse5
• html-minifier-terser：https://github.com/terser/html-minifier-terser

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。