HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス /  ウェブ制作チュートリアル / 第5章 リスト要素でメニューを作る：リスト要素

第5章　リスト要素でメニューを作る

| HTMLソース中にコメントを入れる
「CSSソース中にコメントを入れる」からCSSソース中にコメントを入れ始めました。 同様にHTMLソース中にもコメントを入れていきましょう。
CSSではコメントは/* から */の部分に記述しましたが、HTMLソースでは<!-- から -->の部分にコメントを記述します。
index.htmlにコメントを入れましょう。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<h1>ウェブサンプル株式会社</h1>

<!-- メインメニュー -->
<ul>
<li>ホーム</li>
<li>製品紹介</li>
<li>会社概要</li>
<li>お問合せ</li>
</ul>

<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</body>
</html>
上記のHTMLソースで言うと、 <!-- メインメニュー --> の部分がコメントです。 この部分は、ブラウザで表示される際には無視されます。

| 後から見直したときに分かりやすいように
HTMLソースが簡単なうちはコメントが無くても内容が理解できますが、制作が進むにつれて複雑になってくると、HTMLソース中のどの部分がどんな役割をしているか、ひと目では分かりにくくなってきます。 後からHTMLソースを見直したときに該当部分を見つけやすいように、HTMLソース中には適宜コメントを入れるべきでしょう。
なお、HTMLソースやCSSソースは、ブラウザの画面上には表示されませんが、閲覧者がソースを表示させればコメントを読むことは可能です。 部外者に見られては困る情報をコメントとして記述するのは避けたほうがよいでしょう。
まとめ
  1. HTMLソース中には、適宜コメントを入れる
  2. HTMLソース中では、コメント部分を <!-- と --> で囲む
  3. コメントは、ブラウザの画面上には表示されない