HTMLコメントの使い方｜コード内にメモを残す方法

19

Views

HTMLを書いていると、「ここは後で修正する」「この部分は一時的に非表示にしたい」など、メモや説明を残しておきたい場面があります。
そんなときに便利なのが HTMLコメント です。この記事では、コメントの基本的な書き方と活用方法をやさしく紹介します。

HTMLコメントの基本構文

HTMLでコメントを記述するには、以下のような構文を使います。

<!-- ここにコメントを書く -->

このコメントはブラウザには表示されず、HTMLソースコード上だけに残ります。

コメントの使い方例

① コードにメモを残す

<!-- このセクションは後で差し替える予定 -->
<section class="news">
  <h2>お知らせ</h2>
</section>

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

表示させたくない部分をコメントアウトすることで、一時的に無効にできます。

<!--
<div class="banner">
  キャンペーン情報
</div>
-->

③ セクションを区切ってわかりやすくする

<!-- ヘッダーエリアここから -->
<header>...</header>
<!-- ヘッダーエリアここまで -->

コメントの注意点

  • コメントの中に --（ハイフン2つ）を含めないように注意しましょう。
  • コメントはSEOや表示速度に影響しませんが、必要以上に多すぎると可読性が下がることもあります。

おわりに

コメントはコードのメモや一時的な非表示処理などにとても便利です。
自分だけでなく、他の人が見たときにも分かりやすいコードを書くために、積極的に活用していきましょう。

次回は「CSSコメントの書き方」や「JavaScriptのコメント」といった他の言語のコメント方法も紹介します！