コメントと閉じタグのない要素

音声スライド（クリックで展開／閉じる）

スライドクリック＆ F キーで全画面、Esc で復帰、その他のショートカット

はじめに

HTML コメントの書き方を学びます
終了タグを持たない「空要素」について学びます
目標：メモを残し空要素を正しく書けるようになる

この単元では、HTML ファイルに直接書き込める「コメント」の使い方と、開始タグと終了タグのペアを持たない特別な要素である「空要素」について学びます。この単元を終える頃には、コメントで作業メモを残せるようになり、br や meta 、link といった空要素を正しく書けるようになることが目標です。

HTML コメントとは

画面には表示されないメモを書き込める仕組み
開発者向けの説明や作業メモに使われる
ブラウザはコメント部分を読み飛ばして表示する

HTML のコメントは、ブラウザの画面には表示されないメモをファイルの中に直接書き込める仕組みです。開発者向けの説明や作業中のメモを書き残すために使われ、ブラウザはコメントの部分を読み飛ばして表示します。

コメントの書き方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介ページ</title>
</head>
<body>
  <h1>自己紹介</h1>

  <!-- ここから自己紹介文 -->
  <p>
    はじめまして。私は〇〇と申します。趣味はプログラミングと読書で、
    最近はWeb開発の勉強に力を入れています。よろしくお願いいたします。
  </p>
</body>
</html>

コメントは  で挟んで書きます。この書き方さえ覚えておけば、間にどんな文章を書いても画面には表示されないメモになります。

コメントの使いどころ

あとで直したい箇所に目印としてメモを残す
コードを書いた意図をチームメンバーに伝える
一時的に表示させたくない部分を囲んでおく

コメントは、あとで直したい箇所に目印として残したり、なぜこう書いたかという意図を他の担当者に伝えたりするために使います。また、一時的に表示させたくない部分をコメントで囲んでおくといった使い方もよくされます。

空要素とは何か

通常の要素は開始タグと終了タグで内容を挟む
空要素は内容を持たず終了タグを書かない
改行を表す br やページ情報を表す meta が空要素

通常の HTML 要素は、開始タグと終了タグで内容を挟む3つのパーツからできています。一方、空要素に分類される要素は、挟むべき内容を持たず、終了タグも書きません。改行を表す br や、ページの情報を指定する meta が空要素にあたります。

空要素と通常の要素の違い

通常の要素は、開始タグと終了タグの間に内容をはさむサンドイッチのような構造です。空要素はこのサンドイッチの具にあたる内容も、下側のパンにあたる終了タグも持たない、単独のタグだけで完結する特別な形をしています。

代表的な空要素

要素	役割
br	文章の途中で改行する
meta	文字コードなどページの情報を指定する
link	外部の CSS ファイルなどを読み込む

代表的な空要素として、文章の途中で改行する br、文字コードなどページの情報を指定する meta、外部の CSS ファイルなどを読み込む link があります。これらはこれまでのモジュールでも既に登場していた要素です。

空要素の記法

<br>
<meta charset="UTF-8">

空要素は、この例のように、終了タグを書かずに1つのタグだけで完結させます。br のように属性を持たないものもあれば、meta のように charset="UTF-8" のような属性を伴うものもあります。

自己紹介ページでの実例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>佐藤玲奈の自己紹介</title>
</head>
<body>
<h1>佐藤玲奈の自己紹介ページ</h1>

<!-- 自己紹介の段落 -->
<p>
  はじめまして、佐藤玲奈です。<br>
  エンジニア職として入社しました。
</p>

</body>
</html>

実際に、佐藤玲奈さんの自己紹介ページでも、自己紹介の段落の前にコメントで説明を書き添え、文章の途中を br で改行しています。これまで学んだコメントと空要素が、実際のページでどのように使われるかを確認しましょう。

まとめ

コメントは画面に出ないメモを HTML 内に残せる
空要素は終了タグを持たない特別な要素
br・meta・link は代表的な空要素

この単元では、画面に表示されないメモを残せる「コメント」の書き方と、終了タグを持たない特別な要素である「空要素」について学びました。br・meta・link は、いずれも実務のテンプレートで頻繁に登場する代表的な空要素です。

確認テスト

学んだ知識をクイズ問題でチェック！

講座情報

HTML と CSS の基礎講座（試用版）

「HTML と CSS の基礎講座」のお試し用サンプル教材です。確認テストの試用にはログインが必要です。ユーザー登録は無料。詳しくは、利用ガイドをご覧ください。

講座ページへ

モジュール1：Webページの基礎
1	HTML と CSS の役割、そしてページ作成の第一歩
2	タグ・属性と HTML 文書の骨組み
3	文字コード・タイトルと要素の入れ子構造
4	練習問題：Webページの基礎

モジュール2：HTML基本文法
5	要素を識別する class/id とリンクの作成
6	コメントと閉じタグのない要素