<!-- --> 非表示のコメントを挿入する

取り扱い 現行の標準
カテゴリ なし
親にできる要素 なし
子にできる要素 なし
対応ブラウザ

<!-- -->(コメント)の説明

<!-- -->は、ソースコード中にコメントを残したり、一時的に隠しておきたい部分を非表示にする際に使用します。

このタグはブラウザのレンダリングに影響を与えないので、<head><body>どちらの間でも使う事ができます。

<!--を開始すると-->で終了するまで全ての文字列がコメントとして扱われます。改行やスペースをいくら記述しても構いませんが、閉じ忘れには気をつけましょう。

基本的には、ソースコードを読む人にとって有益な情報を管理することが目的となります。稀に、エンジニアの遊び心で本番環境にアスキーアートを残す文化も見られます

<!-- -->(コメント)タグの特徴

  • この要素はブラウザのレンダリングに一切影響しません。
  • 画面には映りませんがソースコードを開けば誰でも見られる状態で表示されます。公開してはいけない情報をコメントで隠す行為は避けましょう。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<!-- -->(コメント)に指定できる主な属性

なし
とくにありません

<!-- -->(コメント)の使い方とサンプル

この要素を使う場面として、次のようなものが挙げられます。

編集しやすいように目印を付けておく
ウェブページを作っている最中に後から編集を加えようとすると、意外と苦労する事があります。そのような場所にコメントを残しておくと更新が楽に行えます。
第三者向けに情報を埋め込む
オープンソースやブログテンプレートなど開発者に対する配慮で見かける手法です。ソースコードの扱い方や補足事項など、直接プログラムを触るであろう相手に対して有益な情報を与えます。稀に公開されたウェブページの中に、イースターエッグ(隠し要素)的なノリで面白いコメントが書かれていることもあります。
一時的に表示を隠しておく
例えば、翌日以降に告知する情報を事前に用意しておき、コメントアウトしておけば、更新時に<!-- -->を外すだけで、公開作業を終えることができます。ただしソースコードを見られても問題ない情報にのみ使える手段です。

ソースコードのサンプルは以下のようになります。

HTML
<div>
<!-- ▼ ここから公開内容 ▼ -->
	<h5>最新情報</h5>
	<ul>
		<li>06/01:上半期ベスト10発表!</li>
		<li>05/15:商品追加しました</li>
		<li>05/01:一部値下げのお知らせ</li>
	</ul>
<!-- ▼ 次回の更新内容 ▼ -->
<!-- <li>06/05:セールの対象商品について</li> -->
</div>
表示確認
更新情報
  • 06/01:上半期ベスト10発表!
  • 05/15:商品追加しました
  • 05/01:一部値下げのお知らせ

※コメントはブラウザ上には表示されません。メニューからソースを開いて中身を確認してみましょう。

<comment>に関連するHTMLタグ

コメント・コメントアウト
<!-- --> コメントを挿入する。コメントアウトする。