HTMLのコメント(メッセージを残す)

Webサイト制作

HTML5

応用

投稿日時 : 2024/09/30 更新日時 : -

コメントという言葉をご存じだろうか。プログラミングではよく使われるので、それも含めてコメントについて解説する。

コメントって何か感想などを言うって意味だと思うのですが、ITでもそれは同じですか？

そうだな。同じニュアンスだがITだとコードのメモを残すって意味がある

HTMLのコメントとはメモを残すという意味

コメントはブラウザで表示する際に目に見えないのでコーディングする人が何かのメモを残す為に使う。サーバのプログラムと違ってHTMLのコメントはソースを見ると誰でも表示できるので、パスワードを書くのは絶対にNGだ。では、実際にどうやってコメントになるのか解説する。

「 」を書いて、その間にメモを残す事ができるのだ。


<main>
  <!-- 記事の内容はここ(これがコメント) -->
  <h1>記事タイトル</h1>
</main>

コメントの使いどころ

ねぇガオ様、HTMLのコメントは誰でも見れるのですよね。だとしたらあまり使いどころが無さそうな気もしますが

まぁ確かにコアな事は書けないな。ただ、個人開発でサイトを作る場合、後でこれが何のコードなのか目印にしたり、多人数で開発なら別の人にメモを残したり、いろいろ使いどころはあると思う

例1:コメントで説明

スペルが難しいid属性の名前をコメントで補助する。


<main>
  <!-- ここにA社の広告 -->
  <div id="advertisement">Aディスプレイ</div>
</main>

例2:更新日を記録

Gitなどのソース管理ツールを使わない場合に多人数で開発する際にいつ更新したか目印にする。名前まで書くと個人情報が流出するので注意。


<main>
  <!-- 20240101 更新 -->
  <div id="data">Aディスプレイ</div>
</main>

例3:閉じタグの目印

コードが長くなるとdivタグの閉じタグがどのidやclassの名前に対応しているのか分からなくなる事もある。だから閉じタグにコメントでこの閉じタグはこのタグに対応と目印を付ける。現場で結構使われているので余力があるならこの癖を付けると良いかもね。


<div class="container">
  <div class="style1">
    <div id="contents1">
      <div>コンテンツ1-1</div>
      <div>コンテンツ1-2</div>
      <div>コンテンツ1-3</div>
    </div><!-- /contents1 -->
  </div><!-- /style1 -->
  <div class="style2">
    <div id="contents2">
      <div>コンテンツ2-1</div>
      <div>コンテンツ2-2</div>
      <div>コンテンツ2-3</div>
    </div><!-- /contents2 -->
  </div><!-- /style2 -->
</div><!-- /container -->