HTMLのコメントアウトの書き方は？使い方と注意事項を解説

HTMLのコメントアウトの書き方

HTML（HyperText Markup Language）は、マークアップ言語の1つでウェブサイトのコンテンツを作成するために用いる言語です。HTMLはそれぞれのタグに意味合いを持たせて、コンテンツを構成しています。ここでは、HTMLで用いるコメントアウトについて、学んでいきます。

【参考】：MDN Docs: HTML: ハイパーテキストマークアップ言語【参考】：MDN Docs: Comment

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

そもそもコメントアウトとは

コメントアウトとは、プログラミング言語などにおいて注釈を追記するために定義される文法上の規約を指します。

プログラム実行時に解釈から除外されるため、プログラムコードの使い方や説明などを記載する際に使用します。プログラムが複雑になるとデバッグも大変になることから、デバッグコードを埋め込んで使用し、仕様終了後はコメントアウトすることで無効化させることもできます。

HTMLのコメントアウトの実際の使い方

HTMLは、マークアップ言語で文書の構造を定義するものですが、注釈を残す目的でコメント機能を使用することができます。使い方は簡単で、 ”” で囲んだ部分はコメントと解釈されます。具体的には、次のように使用します。

<!-- この部分はウェブブラウザで表示されません -->

コメント機能で記述したテキストは、ブラウザなどの通常の閲覧時には、表示されない特徴があります。ただし、ソースビューで表示した場合は、コメント部分を閲覧することができます。

ソースビューで表示させないためには、コメントを難読化したりJavaScriptの外部ファイル呼び出しに代えたりなどの工夫が必要です。

HTMLのコメントアウトを複数行で使うには

HTMLのコメントアウトは、単純な構造で ”” で囲んだ部分がコメントです。そのため、1行だけコメントアウトする場合と複数行のコメントアウトとの違いがありません。複数行のコメントアウトに用いるには、次のように使います。

<!--
 この行はウェブブラウザで表示されません
 この行もウェブブラウザで表示されません
-->

もちろん次のように、タグを含むHTMLをまとめてコメントアウトすることもできます。

<html>
 <head>
 <title>ウェブのタイトル</title>
 </head>
 <body>
  <!--
  <p>テストサイトのデバッグです</p>
  <p>複数行のコメント機能で一括コメントアウトできます</p>
  -->
 </body>
</html>

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

HTMLのコメントアウトは単純なので、基本を理解し注意して使用する必要があります。具体的には次の2点を抑えておきましょう。

・HTMLのコメント機能はソースビューで閲覧できる 最初に理解しておくことは、HTMLのコメント機能はソースビューで閲覧できることです。コメント機能にHTMLの概要を入れておくと保全性が高まりますが、社内の機密情報となるデータソースやアクセス情報などはコメントを残すと情報漏洩リスクがあります。

個人情報などの機微情報についても、うっかり記載しないように注意しましょう。

・コメントのタグは入れ子ができない コメントのタグは、 ”” で囲むだけです。シンプルな構造のため、コメントアウトしている部分をさらにコメントアウトするなどの入れ子には対応しません。入れ子にしてしまうと最初の ”” でコメントが終了します。

それ以降の記述はブラウザにそのまま表示されるため、不要なコメント内容がブラウザに表示されることに繋がります。

・ハイフン2つをコメント内に記述しない HTMLと類似するXMLではハイフン2つは、コメントに記述できません。共通するパーサーを用いるブラウザでは、規約上のエラーとなり、コメント終了など予期しない表示となる場合があります。HTMLにおいても、このエラーを避けるために、ハイフン2つの使用は避けるのが良いでしょう。

また最新のHTML仕様Living Standardでは、コメントのテキスト部分は ”>” や ”->” で始めてはならないとしています。関連して覚えておくと良いでしょう。

【参考】：HTML Living Standard: Comments

XMLとは？詳細や特徴、メリット・デメリットを徹底解説！

HTMLのコメントアウトの高度な利用方法

ウェブページはこれまでの静的なコンテンツ表示から、動的なコンテンツを装飾しながら表示させるなどインタラクティブな用途に用いられています。このことから、HTML単体で使用されるのではなく、CSSやJavaScriptと組み合わせて用いることが多いでしょう。

特にHTML5からは、HTMLが文書の構造を示し、CSSはテキストの表示や装飾を担当していることからコメントアウトの組み合わせについても理解しておくと良いでしょう。

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

HTMLのコメントアウトをCSSと組み合わせて使用する

CSSは、スタイルシートなどでテキストを装飾するために使います。コメントアウトは、 ”/*” でコメントが始まり、 ”*/” でコメントが終了します。単一行、複数行それぞれに用いることができます。コメント機能の文法は、タグではなくC言語の形式をとります。

/* これは単一行のコメントです */
 
/*
 これは複数行のコメントです
 これも複数行のコメントです
*/

実際の使い方は、次のようにHTMLとCSSを一緒に使います。

<!DOCTYPE html>
<html>
<head>
<title>HTMLとCSSのコメント機能の使い方</title>
<style>
body {
  background-color: lightblue;
}
/* 次のh1の色はページの表示でどちらかを選択します */
/*
h1 {
  color: white;
  text-align: center;
}
*/
h1 {
  color: blue;
  text-align: center;
}
 
</style>
</head>
<body>
 
<h1>HTMLとCSSのコメント機能</h1>
<!-- 必要に応じてテキストを変更します -->
<p>テキストが表示されます</p>
 
</body>
</html>

上の例では、 ”<style>” と ”</style>” の間がCSSです。その中では ”/*” と ”*/” の間にコメントを記述します。上記タグ以外は、HTMLの規約にしたがってコメントを記述しています。

【参考】：MDN Docs: CSS コメント

HTML・CSSとは何か？使い方やできること、独学方法を解説！

HTMLのコメントアウトをJavaScriptと組み合わせて使用する

JavaScriptは、動的なコンテンツを生成するために用います。コメントアウトは、単一行向けと複数行向けにそれぞれ機能が提供されています。単一行は ”//” 、複数行は ”/*” から ”*/” までで表します。C++のコメント機能と同じ用法をとります。単一行のコメント機能は、以下の通りです。

// コメントです
// コメントです

複数行のコメント機能は、以下の通りです。

/*
 この行はコメントです
 この行もコメントです
*/

<!DOCTYPE html>
<html>
<head>
<title>HTMLとJavaScriptのコメント機能の使い方</title>
</head>
<body>
 
<h1>HTMLとJavaScriptのコメント機能</h1>
<!-- 必要に応じてテキストを変更します -->
<p>テキストが表示されます</p>
<button type="button" onclick="check_click()">
<!-- 次のテキストも変更してください -->
クリックしてみて!
</button>
<script>
  function check_click() {
    /*
     次のように文章をいくつかの候補から選んでください
     */
    //alert('クリックされたよ！');
    alert('クリックしたのは誰だ？');
  }
</script>
</body>
</html>

上の例では、 ”<script>” と ”</script>” の間がJavaScriptで、コメントアウトの使い方はJavaScriptの用法に従います。上記以外の場所では、HTMLの規約に従います。

【参考】：MDN Docs: JavaScript 字句文法

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

JavaScriptの入門！その概要や文法の基礎について解説！

HTMLのコメントアウトをCSSとJavaScriptと組み合わせて使用する

HTMLを動的に見栄えが良いウェブサイトにするには、HTMLとCSS・JavaScriptを組み合わせて使います。ここでは仕上げとして、HTMLのコメントアウトをCSSとJavaScriptと組み合わせて使用します。使い方は、ここまでに紹介したサンプルの組み合わせを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTMLとCSS・JavaScriptのコメント機能の使い方</title>
<style>
body {
  background-color: lightblue;
}
/* 次のh1の色はページの表示でどちらかを選択します */
/*
h1 {
  color: white;
  text-align: center;
}
*/
h1 {
  color: blue;
  text-align: center;
}
 
</style>
</head>
<body>
 
<h1>HTMLとCSS・JavaScriptのコメント機能</h1>
<!-- 必要に応じてテキストを変更します →
<p>テキストが表示されます</p>
<button type="button" onclick="check_click()">
<!-- 次のテキストも変更してください -->
クリックしてみて!
</button>
<script>
  function check_click() {
    /*
     次のように文章をいくつかの候補から選んでください
     */
    //alert('クリックされたよ！');
    alert('クリックしたのは誰だ？');
  }
</script>
</body>
</html>

この場合は、HTMLの記述と、CSS・JavaScriptが混在します。 ”<style>” から ”</style>” までがCSS、 ”<script>” から ”</script>” までがJavaScriptです。混同しないように用法の違いに注意しましょう。