【初心者向け・実例あり】HTML コメントアウトの書き方と使い方を完全解説

【初心者向け・実例あり】HTML コメントアウトの書き方と使い方を完全解説

【初心者向け・実例あり】HTML コメントアウトの書き方と使い方を完全解説

コメントアウトは、コーディング初心者が最初に覚えるべき重要な基礎知識のひとつです。HTML コメントアウトを正しく理解しておくことで、コードの可読性が向上し、デバッグ作業も効率的に進められるようになります。

本記事では、HTML コメントアウトの基本構文から実例、使い方、注意点、SEOへの影響までを初心者向けにわかりやすく解説します。HTML コメントアウトというキーワードを軸に、実務でも使える内容を網羅していますので、ぜひ最後までご覧ください。

HTMLのコメントアウトとは？

コメントアウトとは、ブラウザ上には表示されない「注釈」や「メモ」をHTMLファイル内に記述するための仕組みです。

コメントアウトを使用すると、特定のコードを一時的に無効化したり、他の制作者への説明を書き残したりすることができます。Web制作やコーディング学習の現場では、HTML コメントアウトは非常に頻繁に使用されます。

HTML コメントアウトの特徴は次の通りです。

ブラウザには表示されない
ソースコード上では確認できる
一時的な非表示処理が可能
メモや説明文として活用できる

つまり、HTML コメントアウトは「表示されないけれど残しておける情報」を管理するための機能といえます。

ぺれ

簡単にいうと、コメントアウトはWEBサイトやアプリなどを作っている側にしか見えない「秘密のメッセージ」です。（正確にいうと、一般のWEBサイトを閲覧しているユーザーも特定の手順で見ることは可能ですが、通常、WEBページ上には表示されません。）

HTML コメントアウトの基本構文

HTML コメントアウトの書き方はとてもシンプルです。

<!-- コメント内容 -->

「<！–」で始まって、「–>」終わるのがHTML コメントアウトの基本ルールです。この記号の間に書かれた内容は、通常、ブラウザに表示されません。

例えば次のように記述します。

<p>これは表示される文章です。</p>
<!-- <p>これは表示されません。</p> -->

この場合、「これは表示されません。」の部分はHTML コメントアウトされているため、画面上には表示されません。

HTML コメントアウトの基本の書き方は必ず覚えておきましょう。

HTML コメントアウトの実例

ここでは、実際のHTML コメントアウトの使用例を紹介します。

テキストを非表示にする例

<h1>サイトタイトル</h1>
<!-- <h2>サブタイトル</h2> -->

サブタイトル部分をHTML コメントアウトすることで、削除せずに一時的に非表示にできます。

複数の案があって、どちらにするか迷っている場合や、一時的に差し替えを行う場合などに用いられます。

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

HTML コメントアウトは複数行にも対応しています。

<!--
<div class="box">
  <p>テスト表示</p>
</div>
-->

このように開始タグと終了タグで囲めば、複数行まとめてHTML コメントアウトが可能です。

セクションごと一時的に非表示にする場合などに用いられます。

メモとして活用する例

<!-- ここからメインコンテンツ -->
<main>
  <p>本文エリア</p>
</main>
<!-- ここまでメインコンテンツ -->

このようにHTML コメントアウトを使うことで、コードの構造がわかりやすくなります。特に初心者は積極的に活用することをおすすめします。

コメントアウトの活用例

HTML コメントアウトにはいくつか代表的な使い方があります。

一時的にコードを無効化する

レイアウト調整中や不具合の検証中に、特定のコードを一旦無効にしたい場合があります。その際にコメントアウトを使えば、削除せずに一時停止できます。

デバッグ作業で活用する

表示崩れやエラーの原因を特定するために、怪しい箇所をコメントアウトして確認する方法があります。少しずつ無効化することで、問題箇所を絞り込めます。

チーム開発での共有メモ

HTML コメントアウトはチーム制作でも活躍します。

<!-- 画像は後日差し替え予定 -->

このように記載しておくことで、他の制作者にも意図が伝わります。

HTML コメントアウトの注意点

便利なHTML コメントアウトですが、注意点もあります。

入れ子はできない

HTML コメントアウトの中に、さらにHTML コメントアウトを書くことはできません。

誤った例：

<!--
  <!-- これはNG -->
-->

このような書き方は構文エラーの原因になりますので、使用は避けましょう。

個人情報は絶対に書かない

HTML コメントアウトは画面には表示されませんが、ソースコードを見れば誰でも確認できます。そのため、パスワードや内部情報などは絶対に記載しないようにしましょう。古い情報などもコメントアウトで非表示にしても、ソースコードを見れば確認できてしまいます。一時的な利用は問題ない場合もありますが、あまり見られたくない情報はコメントアウトではなく、削除の方が適切なケースが多いです。