HTML-コメント

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

HTMLコメントは間に配置されます <!-- ... -->タグ。したがって、-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>

これにより、次の結果が生成されます-

複数行コメント

これまでに1行のコメントを見てきましたが、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)でのみ機能しますが、他のブラウザーでは無視されます。これらはExplorer5以降でサポートされており、さまざまなバージョンの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>タグをサポートするブラウザはほとんどありません。

Note−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>

これにより、次の結果が生成されます-