HTML-コメント

コメントは、Webブラウザーで無視されるコードです。特に複雑なドキュメントでは、HTMLコードにコメントを追加して、ドキュメントのセクションや他のメモをコードを見ている人に示すことをお勧めします。コメントは、あなたや他の人があなたのコードを理解し、コードを読みやすくするのに役立ちます。

HTMLコメントは <！-…の間に配置されます → タグ。したがって、with-in <！-…に配置されたコンテンツ →タグはコメントとして扱われ、ブラウザでは完全に無視されます。

例

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->

   <body>
      <p>Document content goes here.....</p>
   </body>

</html>

これは、コメントの一部として与えられたコンテンツを表示せずに、次の結果を生成します-

有効なコメントと無効なコメント

コメントはネストされません。つまり、コメントを別のコメントの中に入れることはできません。次に、二重ダッシュシーケンス "-"は、終了→タグの一部として以外、コメント内に表示されない場合があります。また、コメントの開始文字列にスペースが含まれていないことを確認する必要があります。

例

ここで、指定されたコメントは有効なコメントであり、ブラウザによって消去されます。

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>

   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>

</html>

これは、次の結果を生成します-

ただし、次の行は有効なコメントではないため、ブラウザに表示されます。これは、左山括弧と感嘆符の間にスペースがあるためです。

<!DOCTYPE html>
<html>

   <head>
      <title>Invalid Comment Example</title>
   </head>

   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>

</html>

これは、次の結果を生成します-

複数行コメント

これまで、単一行のコメントを見てきましたが、HTMLは複数行のコメントもサポートしています。

次の例に示すように、最初の行の前と最後の行の終わりに配置された特別な開始タグ<！-および終了タグ→によって、複数の行をコメント化できます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Multiline Comments</title>
   </head>

   <body>
      <!--
         This is a multiline comment and it can
         span through as many as lines you like.
      -->

      <p>Document content goes here.....</p>
   </body>

</html>

これは、次の結果を生成します-

条件付きコメント

条件付きコメントは、Windows上のInternet Explorer（IE）でのみ機能しますが、他のブラウザーでは無視されます。これらはExplorer 5以降でサポートされており、IEの異なるバージョンに条件付きの指示を与えるために使用できます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head>

   <body>
      <p>Document content goes here.....</p>
   </body>

</html>

Internet Explorerのさまざまなバージョンに基づいてさまざまなスタイルシートを適用する必要がある状況に遭遇します。そのような状況では、条件付きコメントが役立ちます。

コメントタグの使用

HTMLコードの一部をコメントする<comment>タグをサポートするブラウザーはほとんどありません。

'_注-HTML5で非推奨となった<comment>タグ。この要素は使用しないでください。_

例

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>

   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>

</html>

あなたがIEを使用している場合、それは次の結果を生成します-

しかし、IEを使用していない場合、それは次の結果を生成します-

スクリプトコードのコメント

別のチュートリアルでHTMLを使用してJavaScriptを学習しますが、ここでは、HTMLコードでJavaスクリプトまたはVBスクリプトを使用している場合は、そのスクリプトコードを適切なHTMLコメントに入れて、ブラウザは正常に動作します。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>

      <script>
         <!--
            document.write("Hello World!")
        //-->
      </script>
   </head>

   <body>
      <p>Hello , World!</p>
   </body>

</html>

これは、次の結果を生成します-

スタイルシートのコメント

別のチュートリアルでHTMLでスタイルシートを使用する方法を学習しますが、ここでは、HTMLコードでカスケードスタイルシート（CSS）を使用している場合は、適切なHTMLコメント内にスタイルシートコードを配置することをお勧めします古いブラウザが正常に動作するように。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>

      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
        //-->
      </style>
   </head>

   <body>
      <div class = "example">Hello , World!</div>
   </body>

</html>

これは、次の結果を生成します-

Html-comments

HTML-コメント

例

有効なコメントと無効なコメント

例

複数行コメント

例

条件付きコメント

例

コメントタグの使用

例

スクリプトコードのコメント

例

スタイルシートのコメント

例

目次