HTMLのコメントアウトはどう書く？書き方の具体例や注意点を解説

2021-01-14 00:47

フロントエンドプロエンジニア育成 JavaScript 採用担当向け HTML

ソースコードの中で特殊記号を使い、実行させたくないコードを書くことをコメントアウトといいます。コメントアウトで記述されたものがコメントです。HTMLにおけるコメントアウトの重要性や書き方、気を付けるべきポイントを紹介します。

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

目次[非表示]

1.コメント・コメントアウトの役割

1.1.注意書きや連絡を他の人に伝達する
1.2.タグや構成を分かりやすくする

2.コメントアウトの書き方

2.1.1行コメントの書き方
2.2.複数行コメントの書き方
2.3.コメントの中にタグを入れる方法

3.コメントアウトを書く際の注意点

3.1.コメントの中にコメントは入れられない
3.2.ハイフンをコメントの中で使わない
3.3.ソースコードからコメントが見られてしまう

4.コメントアウトは連絡や備忘録に

コメント・コメントアウトの役割

コメントはブラウザ上に表示されず、ソースコードのみで確認できる便利な機能です。コメントアウトには、主に以下のような二つの役割があります。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

注意書きや連絡を他の人に伝達する

コメントは、プログラムの中で、他の人に向けた注意書きや連絡を伝達する手段として使われます。

プログラム内の特別なコードなどは、自分以外の人にとって理解しにくいこともあるでしょう。このような場合にメモ書きとして残せば便利です。

特に、複数人で作業する場合に、情報共有の手段として役立ちます。頻繁に書き換えを行うような部分にも、更新日時や担当者名などを残せます。

タグや構成を分かりやすくする

HTMLで構築するシステムやWebサイトが大きくなればなるほど、ソースコードの量も増えていき、タグや構成が分かりにくくなります。

例えば、HTMLはいくつもの入れ子構造で成り立っていますが、いずれかの終了タグが足りないだけで、ブラウザ表示が大きく崩れてしまうこともあるでしょう。

しかし、開始と終了の位置にコメントアウトを書いておけば、入れ子構造が分かりやすくなるため、表示エラーの回避にもつながります。

他のプログラム言語と一緒にソースコードを書いている場合も、コメントアウトを残しておけば構成を理解しやすくなるでしょう。

コメントアウトの書き方

ソースコードにコメントアウトを書く場合は、残したい内容を開始タグで囲むのが基本です。具体的な書き方をいくつかのパターンに分けて解説します。

若手、新人エンジニアの成長を阻む人材育成5つの失敗と解決策はこちら

1行コメントの書き方

1行のみ書く場合は、以下のように記述します。

<html>
　<head>
　　<title>サプリメントで健康を手に入れよう</title>
　</head>
　<body>
　　<!-- ここにはトップバナーを貼る -->
　　<p>ほどよい量のサプリメントは健康維持に効果的</p>
　</body>
</html>

残したい内容を、そのままで囲めばOKです。

複数行コメントの書き方

残したい内容が複数行にわたる場合は、以下のように記述します。

<body>
　<!-- ここには無料サンプル紹介ページの画像を貼る どの商品を扱うかは検討中 リンクULRも保留 -->
　<p>↑おすすめのお試しサプリはコチラ↑</p> </body>

ブラウザ上に表示させるわけではないため、改行タグ<br>は不要です。ソースコードに残したい形のまま、で囲みましょう。

開始タグ直後と終了タグ直前の改行はなくても構いませんが、例文のようにを独立させることで、より見やすくなります。

コメントの中にタグを入れる方法

コメント内に別のタグを入れる必要がある場合も、以下のように丸ごとで囲みます。  で囲っておけば、どのような種類のタグもブラウザ上には表示されません。