適切にコメントされたHTMLマークアップは、うまく構築されたWebページの重要な部分です。 これらのコメントは簡単に追加することができ、将来自分のコードや自分のチームのメンバーを含めてそのサイトのコードで作業しなければならない人は、そのコメントに感謝します。
HTMLコメントを追加する方法
HTMLは、Windowsの場合はNotepad ++、Maの場合はTextEditなどの標準的なテキストエディタで作成できます。 Adobe Dreamweaverのようなウェブデザイン中心のプログラム、またはWordpressやExpressionEngineのようなCMSプラットフォームを使用することもできます。 HTMLの作成に使用するツールに関係なく、コードを直接操作する場合は、次のようなHTMLコメントを追加します。
- HTMLコメントタグの最初の部分を追加します：<！ -
- コメントのオープニング部分の後に、このコメントに表示するテキストを書いてください。 これは、将来あなたまたは他の開発者のための指示になる可能性があります。 たとえば、ページ上の特定のセクションがマークアップの開始位置または終了位置を指定する場合は、コメントを使用してそれを詳述することができます。
- あなたのコメントのテキストが完成したら、次のようにコメントタグを閉じます： - >
- あなたのコメントは次のようになります：<！ - あなたのコメントの内容が表示される場所です - >
コメントの表示
HTMLコードに追加するコメントは、誰かがWebページのソースを表示したり、エディタでHTMLを開いて変更を加えるとそのコードに表示されます。 ただし、通常の訪問者がサイトに来ると、そのコメントテキストはWebブラウザに表示されません。 段落、見出し、またはリストを含む他のHTML要素とは異なり、実際にはこれらのブラウザ内のページに影響を与えます。コメントは実際にページの裏側にあります。
テスト目的のコメント
コメントはWebブラウザに表示されないため、ページテストや開発中にコメントを「オフ」にすることができます。 非表示にするページ/コードの部分の直前にコメントの開始部分を追加し、そのコードの最後に閉じる部分を追加すると（HTMLコメントは複数の行にまたがることがあります。あなたのコードの50行目にコメントし、問題なく75行目に閉じます）、そのコメントに該当するHTML要素はブラウザに表示されなくなります。 それらはあなたのコードに残されますが、ページの表示には影響しません。 特定のセクションが問題などを引き起こしているかどうかを確認するためにページをテストする必要がある場合は、そのエリアをコメントアウトする方が削除する方がよいでしょう。 コメントでは、問題のコードセクションが問題ではないことが判明した場合、簡単にコメントを削除でき、そのコードが再び表示されます。 テストに使用されたこれらのコメントが本番用のWebサイトに作成されていないことを確認してください。
ページの領域を表示しない場合は、そのサイトを起動する前にコメントを外すだけでなく、コードを削除する必要があります。
開発中にHTMLコメントをうまく利用するのは、レスポンシブウェブサイトを構築するときです。 そのサイトのさまざまな部分は、ページのセクションのオン/オフを切り替えるコメントを使用して、表示されない領域など、 異なる画面サイズに基づいて外観を変更するため、開発中にすばやく簡単に使用することができます。
パフォーマンスについて
私は、いくつかのWeb専門家がHTMLファイルとCSSファイルからコメントを取り除いて、それらのファイルのサイズを小さくし、読み込み速度の速いページを作成するよう提案しているのを見ました。 私はページがパフォーマンスのために最適化され 、すばやく読み込まれるべきであることに同意しますが、コード内にコメントをスマートに使用する場所はまだあります。 これらのコメントは、今後のサイトでの作業を容易にするためのもので、コード内のすべての行にコメントが追加されていない限り、ページに追加されるファイルサイズはわずかですコメントは受け入れられる以上のものでなければなりません。
コメントを使用するためのヒント
HTMLコメントを使用する際には注意が必要です。
- コメントは複数の行にすることができます。
- コメントを使用してページの開発を記録します。
- コメントも可能です。 ドキュメントの内容、表の行や列、変更の内容などを自由に変更することができます。
- この変更が一時的なものではなく（必要に応じて警告メッセージをオンまたはオフにするなど）、一時的なものでない限り、サイトの領域を「オフにする」コメントは本番には入れないでください。