<!-- --> HTMLでコメント

catnose catnose · に最終更新

HTMLのコード内にコメントを書くときには<!-- ここにコメント -->という書き方をします。

<div class="example">
  <p>これは文章です</p>
  <!--これはコメントです-->
</div>

👆コメントが書かれた部分は、Webブラウザ上では表示されません。
そのため後から自分や共同作業者が見返したときのヒントとなるような文章を書き残しておくことができます。

目次
このページの目次

複数行のコメントを書く

<p>これは文章です</p>
<!--
複数行のコメントを
書くこともできます
-->

👆複数行にしたい場合は、<!--と-->の中で単純に改行します。

タグごとコメントにする

<p>これは文章です</p>
<!--
<div class="example">
  <p>これは文章です</p>
  <p>このタグを消す</p>
</div>
-->
👆HTMLタグを囲ってコメントにすることもできます。「一旦タグを消したいが、すぐに元に戻すかもしれない」という場合に便利です。 このようにコードが処理されないようにすることを「コメントアウト」と言います。

‍🙅コメントの入れ子はできない

<!--
コメントの中に<!--コメント-->を入れる
-->

👆コメントの中にコメントを入れることはできません。-->が出てきた時点でコメントが終わってしまうからです。

HTML内のインラインCSSではCSSのコメントの書き方を

HTMLファイルであってもstyleタグなどに書かれたCSSに対しては、HTMLのコメントは使えません。CSSのコメント/* */を使うようにしましょう。

関連するページを読む
CSSでコメントを書く
開く
example.html styleタグ内のコメント
<!DOCTYPE html>
<html>
  <head>
    <!--htmlのコメント-->
    <meta charset="utf-8">
    <style>
      /* CSSのコメント */
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>略</body>
</html>

HTMLのコメントはソースコードから見られる可能性がある

ソースコードの中のコメントをブラウザは無視するため、画面には表示されません。
しかし、ソースコード自体からコメントが消えるわけではないので、ある程度ウェブに詳しい人であれば簡単にコメントを見ることができます。[1]

コメントは簡潔に

HTMLのページデータはコメントも含めて、サーバーからユーザーが見る手元のパソコン（ブラウザ）に送られます。あまりにも長いコメントが書かれていると、その分送られるデータサイズが大きくなってしまいます。

また、長すぎるコメントはファイルの可読性を損なうため避けるべきです。

コメントとSEOは関係ない

検索エンジンはHTML内のコメントを無視します。そのため、コメント内に重要なキーワードを入れても全く効果はありません。

コメントの便利な書き方

<div class="example1">
  <div class="example2">
    <div class="example3">
      Hello
    </div>
  </div>
</div><!-- /.example1 -->

デザインにこだわっているうちに、ついdivタグの数が増えてしまい、</div>がどこに対応するのか分かりづらくなってしまうことがあります。そんなときに「どのタグに対応する閉じタグなのか」をコメントで書いておくと分かりやすくなります。

書き方の例

  • <!-- /.example1 -->：class="example1"に対する閉じタグを表す
  • <!-- /#example1 -->：id="example1"に対する閉じタグを表す

エディターでのコメントのショートカットキー

コードを書くときには、コメントアウトの操作を頻繁に行うこともあると思います。多くのエディターでは、以下のショートカットキーで選択したテキストをコメントにすることができます。

  • Windows：Ctrl + /
  • Mac：⌘ + /

  1. 例えばGoogle Chromeの場合、ページのどこかを右クリックして「ページのソースを表示」を選択するとソースコードが表示されます。
    ↩︎

HTMLの記事をもっと見る