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

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

  • コードの保守性の向上
  • コードの可読性の向上
  • コードのTODO

を目的として、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のコメントアウトは入れ子にすることができない

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

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

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

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

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

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

  • コードの保守性の向上
  • コードの可読性の向上
  • コードのTODO

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

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

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

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

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

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

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

HTMLのコメントアウトを入れ子にしてしまうとこの様に意図しない文字が文章に表示されてしまいます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

コメント

コメントする

目次