HTMLコメントの書き方

コメントとは、HTMLの注釈のことです。おもにHTMLの作り手に対する説明や備忘録を記入します。閲覧者がウェブブラウザで見たときには表示されませんが、ウェブブラウザの「ソースを表示する」機能を使えば、閲覧者でも見ることができます。

HTMLでタグやテキストをコメントアウトして非表示にする書き方をご紹介します。

1行

プログラミング言語によっては、1行コメントと複数行コメントで書き方が異なるものもあるが、HTMLにおいては1行でも複数行でもコメントの書き方は同じである。

<!-- <p>コメントアウト</p> -->

複数行

プログラミング言語によっては、1行コメントと複数行コメントで書き方が異なるものもあるが、HTMLにおいては1行でも複数行でもコメントの書き方は同じである。

<!--
<p>コメント</p>
<p>コメントアウト</p>
-->

非表示

HTMLでコメントアウトしたタグやテキストは、ブラウザで見たときに非表示となる。

<p>ここの <!-- コメント --> は非表示となります。</p>

ここの は非表示となります。

入れ子

コメントアウトを入れ子にすることはできない。

ショートカット

HTMLエディタではショートカットでコメントアウトできる。

CSS

HTML内にCSSをインラインで記述する場合は、CSSのコメントの書き方に従う。

/* と */ に囲まれた部分はコメント（注釈）となる。コメントは複数行にわたってもよい。ただし、入れ子（ネスト）にすることはできない。他の言語にあるような // や # といった単一行コメントは、CSSには無い。

<!-- インラインCSS -->
<style>
  h1 {
    /* 背景は赤色 */
    background-color: red;
  }
</style>

JavaScript

HTML内にJavaScriptをインラインで記述する場合は、JavaScriptのコメントの書き方に従う。

「// 」以降から行末まではコメントとなる。これを単一行コメントという。

「/*」と「*/」に囲まれた部分はコメント（注釈）となる。コメントは複数行にわたってもよい。ただし、入れ子（ネスト）にすることはできない。

<!-- インラインJavaScript -->
<script>
  /*
    警告ダイアログを表示する関数
    引数 : なし
  */
  function foo() {
    // 警告ダイアログを表示する
    alert("警告");
  }
</script>

関連記事

JSPのコメント

参考文献

Web Hypertext Application Technology Working Group. 2024. The HTML syntax. HTML Living Standard