2026年4月16日
HTML コメントとは？
HTML コメントとは、コードの中に書いてもブラウザに表示されないメモのことです。コメントアウトとも呼ばれます。
コメントを使うと、次のようなことができます。
- コードの説明をメモとして残す
- 一時的にコードを無効化する（デバッグ時に便利）
- セクションの区切りをわかりやすくする
コメントの書き方
HTMLのコメントは <!-- で始まり --> で終わります。
<!-- これはコメントです。ブラウザには表示されません -->
<h1>タイトル</h1>
<!-- ここからナビゲーション -->
<nav>
<a href="/">トップ</a>
<a href="/about/">自己紹介</a>
</nav>
<!-- ナビゲーションここまで -->コメントアウトで一時的に無効化する
コードを削除せずに一時的に無効化したいときは、コメントアウトを使います。
<!-- 一時的に非表示にしたい場合 -->
<!--
<p>このテキストは今は表示しない</p>
<img src="photo.jpg" alt="写真">
-->
<p>こちらは表示される</p>複数行をまとめてコメントアウトできます。VS Codeでは選択してCtrl+/（Mac: Cmd+/）で一括コメントアウトできます。
🔥 headタグに書くべき内容で実践してみましょう。
コメントの活用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>私のページ</h1>
</header>
<!-- メインコンテンツ -->
<main>
<h2>自己紹介</h2>
<p>はじめまして！</p>
</main>
<!-- フッター -->
<footer>
<p>© 2026 私のページ</p>
</footer>
</body>
</html>セクションの区切りにコメントを入れると、コードが読みやすくなります。
💡 HTMLタグ一覧【よく使う20選】で基礎を確認できます。
注意：コメントはソースコードに残る
HTMLのコメントはブラウザに表示されませんが、ページのソースコード（右クリック→「ページのソースを表示」）には残ります。パスワードや個人情報をコメントに書かないように注意しましょう。
🔗 あわせてHTMLリストの作り方もチェックしてみましょう。
コメントを書くべき場面
HTMLコメントはどんなときに書くべきでしょうか。具体的な場面を紹介します。
場面1：セクションの区切りを示す
ページが長くなると、どこからどこまでがヘッダーで、どこからがメインコンテンツかわかりにくくなります。セクションの始まりと終わりにコメントを書いておくと、コードを読むときに迷いません。
場面2：あとで修正する箇所をメモする
「ここは仮のテキスト。あとで正式な文章に差し替える」のようなメモを残せます。TODOコメントとも呼ばれます。修正が必要な箇所を忘れないために便利です。
場面3：一時的にコードを無効にする
HTMLの一部を一時的に表示したくないとき、コメントで囲むと非表示にできます。コードを削除せずに残しておけるので、あとで元に戻すのが簡単です。
場面4：チームメンバーへの説明
複数人でサイトを作るとき、「この部分は○○さんが担当」「この画像は文化祭当日に差し替え」のようなメモを残せます。
HTMLの基本をもっと詳しく知りたい人は「HTMLとは？初心者向けにわかりやすく解説」を読んでみてください。
コメントの書き方のコツ
コメントを効果的に書くためのコツを紹介します。
コツ1：短く具体的に書く
「ここはヘッダー」のように短く書きましょう。長すぎるコメントはかえって読みにくくなります。何のためのコードかが一目でわかる程度で十分です。
コツ2：「なぜ」を書く
「何をしているか」はコードを読めばわかります。コメントには「なぜそうしているか」を書くと価値があります。「IE対応のため古い書き方を使用」「画像サイズは学校のプロジェクターに合わせて設定」のように理由を書きましょう。
コツ3：古いコメントを放置しない
コードを修正したのにコメントを更新し忘れると、コメントとコードの内容が食い違います。コードを変えたら、関連するコメントも確認して更新しましょう。
コツ4：コメントアウトしたコードは早めに削除する
一時的にコメントアウトしたコードを長期間放置すると、「これは必要なのか不要なのか」がわからなくなります。不要だと確認できたら削除しましょう。
コメントに関する注意点
注意点1：コメントはブラウザに表示されないが、ソースコードには残る
コメントは画面には表示されませんが、「ページのソースを表示」すると誰でも読めます。パスワードや個人情報をコメントに書いてはいけません。
注意点2：コメントが多すぎると逆効果
すべての行にコメントを書く必要はありません。見ればわかるコードにコメントをつけると、かえって読みにくくなります。「これは見出し」のような自明なコメントは不要です。
注意点3：コメントの中にコメントは書けない
HTMLコメントは入れ子にできません。コメントの中に「-->」が含まれると、そこでコメントが終わってしまいます。
注意点4：CSSやJavaScriptのコメントとは書き方が違う
HTMLのコメントは「<!-- -->」ですが、CSSは「/* */」、JavaScriptは「//」または「/* */」です。それぞれの言語で書き方が違うので注意しましょう。
実際にコメントを使ってみよう
HTMLファイルを作って、コメントを試してみましょう。「HTMLで最初のページを作ろう」の手順でファイルを作り、セクションの区切りにコメントを入れてみてください。
たとえば自己紹介ページなら、次のようにコメントを入れます。
- ヘッダーセクションの前に「ここからヘッダー」
- 自己紹介セクションの前に「自己紹介」
- 趣味セクションの前に「趣味一覧」
- フッターの前に「ここからフッター」
コメントを入れてからコードを読み直すと、構造がわかりやすくなっていることを実感できるはずです。最初は面倒に感じるかもしれませんが、コードが長くなるほどコメントのありがたみがわかります。良いコメントを書く習慣は、プロのエンジニアにとっても非常に大切なスキルです。今からしっかり身につけておきましょう！
まとめ
- ✅ HTMLコメントは
<!-- 内容 -->で書く - ✅ ブラウザには表示されないが、ソースコードには残る
- ✅ コードの説明・セクション区切り・一時的な無効化に使う
- ✅ VS CodeでCtrl+/（Cmd+/）で一括コメントアウトできる
- ✅ 個人情報・パスワードはコメントに書かない
コメントを活用すると、コードが読みやすくなります。レッスンでさらに詳しく学んでみましょう。