HTMLコメントの書き方を解説！単一行コメントと複数行コメントの基本
HTMLコメントは、<!-- ... -->タグの間に記述します。このタグ内に書かれた内容はすべてコメントとして扱われ、ブラウザには完全に無視されるため、画面上には表示されません。
HTMLにおける単一行コメント
HTMLでは、コードの説明やメモを残したいときにコメント機能を活用できます。まずは、単一行コメントの基本的な例を見てみましょう。
サンプルコード
<!DOCTYPE html> <html> <head> <!-- ドキュメントヘッダーの開始 --> <title>これはドキュメントのタイトルです</title> </head> <!-- ドキュメントヘッダーの終了 --> <body> <p>ここにドキュメントの内容が入ります.....</p> </body> </html>
表示結果
上記のコードを実行すると、次のような出力が得られます。コメント内に記述したテキストは、ブラウザ上に一切表示されない点に注目してください。
HTMLにおける複数行コメント
HTMLでは、複数行にまたがるコメントも設定できます。長めの説明や、一時的にコードを無効化したい場合などに便利です。
サンプルコード
<!DOCTYPE html> <html> <head> <!-- ドキュメントヘッダーの開始 --> <title>これはドキュメントのタイトルです</title> </head> <!-- ドキュメントヘッダーの終了 --> <body> <h2>見出し2</h2> <!-- これは複数行コメントです。 好きなだけ何行でも コメントを記述することができます。 --> <p>ここにドキュメントの内容が入ります.....</p> <p>ドキュメント内にもコメントを記述していますが、ブラウザには表示されません。</p> </body> </html>
表示結果
上記のコードを実行すると、次のような出力が得られます。複数行コメント内のテキストも、やはり画面には表示されません。
まとめ
HTMLコメントは<!-- -->で囲むだけで簡単に使え、単一行でも複数行でも自由に記述できます。コードの可読性を高めるための説明文や、デバッグ時に一時的にコードを無効化する用途など、実務でも頻繁に活用される重要な機能です。ぜひ日々のコーディングに取り入れてみてください。
-
HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説
HTMLレイアウトとは HTMLレイアウトとは、Webページ上に配置される各コンポーネント（ヘッダー、ナビゲーション、本文、フッターなど）の配置構造を定義する仕組みのことです。HTMLには、ページ内のさまざまなセクションを意味的に示すためのセマンティック要素が数多く用意されており、これらを活用することで、検索エンジンやスクリーンリーダーにも伝わりやすい、アクセシブルなページ構造を作れます。 HTMLレイアウトで使用される主なセマンティック要素 以下は、HTMLレイアウトでよく使われるセマンティック要素の一覧です。 タグ説明 <header>セクションまたはドキュメント全体
-
HTMLエディターとは？代表的な無料エディターの特徴を徹底解説
HTMLエディターとはHTMLエディターとは、HTMLドキュメントの作成・編集を行い、場合によってはその場で実行までできるツールのことです。現在では、無料・有料を問わず、プロフェッショナル向けの高機能なHTMLエディターが数多く提供されています。Windows標準のメモ帳（Notepad）にはない、テーマのカスタマイズやターミナル連携といった付加機能を備えたエディターも多く、用途やスキルレベルに合わせて選ぶことができます。ここでは、特によく使われている代表的なHTMLエディターをご紹介します。Notepad（メモ帳）最も基本的な無料HTMLエディターの一つです。Windowsに標準搭載されてお