HTMLのコメントアウトの書き方と注意点

HTMLのコメントアウトとは、HTMLのソースコードとして実行されないコードです。
コメントアウトはHTMLとして実行されないので、

を目的として、HTMLのソースコード上にメモを残しておいたり、一時的に不要になったHTMLをコメントアウトで実行させないようにすることができます。

HTMLコメントアウト誰でも見ることができるので、コメントアウトを書くときは以下の内容は書かないようにしましょう。

HTMLを学ぶおすすめの方法や順序はこちらの記事で詳しく解説しています。

あわせて読みたい

HTMLをこれから学ぶ初心者のための学習ロードマップ HTMLの学習でつまづいたり、何から始めたらいいのか勉強方法がわからなくなったりしてHTMLの学習を難しく感じていませんか？そのように感じるのは学習する方法や順番が...

HTMLコメントの書き方

HTMLのコメントアウトは<!--と-->で囲みます。
囲まれた部分はHTMLとして実行されなくなりメモなどの用途で使用することができます。

1 行をコメントアウトにする

HTMLで1行をコメントアウトする場合は最初と最後に<!--と-->をつけることで、コメントアウトにすることができます。

次のサンプルコードのようにすると1行をコメントアウトにすることができます。

<div>HTMLソースコードとして実行</div>
<!-- この部分がコメントアウト -->
<div>HTMLソースコードとして実行</div>

複数行をコメントアウトにする

HTMLで複数行に渡ってコメントアウトにする場合も最初と最後に<!--と-->をつけることで、コメントアウトにすることができます。

次のサンプルコードのようにすると複数行をコメントアウトにすることができます。

<div>HTMLソースコードとして実行</div>
<!--
この部分がコメントアウト
複数行をコメントアウトにすることができます。
-->
<div>HTMLソースコードとして実行</div>

html コメントアウト ショートカット

マウスで選択した部分をキーボードのショートカットで<!--と-->をつけてコメントアウトにすることができます。

WindowsとMacでショートカットのコマンドが違います。

• Windowsの場合
  Ctrl(コントロールキー)を押しながら /(スラッシュキー)でコメントアウト
• Macの場合
  ⌘(コマンドキー)を押しながら/(スラッシュキー)でコメントアウト

また、ショートカットでコメントアウトにしたときと同じ方法で、コメントアウトを外すこともできます。

HTMLコメントアウトを書くときの注意点

HTMLのコメントアウトを記述するときには以下のことについて気をつける必要があります。

これらの点に気をつけないと重量情報が流出したり、コメントアウトができなくブラウザに意図しない文字が表示されたりします。

これらの点について詳しく説明します。

HTMLのコメントアウトに重要情報を書かない

ブラウザで「ページのソースを表示」をすると表示しているページのHTMLやCSSなどを誰でも見ることができます。

個人情報やパスワードなどの重要情報をHTMLのコメントアウトで記述していても、「ページのソースを表示」ではHTMLのコメントアウトも表示するので見られたくない重要情報まで見られてしまいます。

重要な情報を流出させないためにもHTMLのコメントアウトは

など、コードに関することだけに留めておくことが重要です。

HTMLのコメントアウトはユーザーにも見られることを前提として記述してください。

HTMLのコメントアウトは入れ子にすることができない

HTMLのコメントアウトは入れ子にすることができません。
HTMLのコメントアウトを入れ子にすると次のコードのように最初の<!--から最初の-->までしかコメントアウトされません。

<div>HTMLソースコードとして実行</div>
<!--
この部分がコメントアウト

<!--
<div>コメントアウトが入れ子になっている</div>
-->

複数行をコメントアウトにすることができます。
-->
<div>HTMLソースコードとして実行</div>