3. タグと要素の基本

HTML（HyperText Markup Language）は Web ページを構成するための基礎となる言語です。この章では、HTML のタグと要素の基本について学びます。タグと要素を理解することで、HTML を使って効果的に Web ページを作成することが可能になります。

3.1 タグとは何か？

タグは HTML 文書の基本的な構成要素であり、特定の機能や意味を持ちます。タグは以下のように記述されます。

<タグ名>内容</タグ名>

例えば、段落を表すタグは次の通りです。

<p>これは段落です。</p>

タグには開始タグと終了タグが存在し、内容を囲むことでその範囲を指定します。

<開タグ>内容</終了タグ>

例：

<p>これはパラグラフです。</p>

要素とは、開始タグ、終了タグ、およびその間の内容全体を指します。要素は文書の意味や構造を定義します。

<p>これは要素です。</p>

上記の例では、<p>タグとその内容「これは要素です。」が一つの要素を形成しています。

HTML では、要素の中に他の要素を含めることができます。これをネストと言います。

<div>
  <p>段落の中に<strong>強調</strong>を含める</p>
</div>

ここでは、<p>要素の中に<strong>要素がネストされています。

内容を持たない特別なタイプの要素も存在します。これらを空要素と言います。代表的な空要素には以下があります。

<br />
<!-- 改行を挿入 -->
<img src="image.jpg" alt="説明" />
<!-- 画像を表示 -->

HTML のタグには属性を指定することができます。属性は開始タグ内に追加され、そのタグに関する追加情報を提供します。属性はキーと値のペアで指定されます。

<タグ名 属性名="値">内容</タグ名>

以下にいくつかの例を示します。

<a href="https://example.com">これはリンクです</a>
<!-- href属性でリンク先を指定 -->
<img src="image.jpg" alt="説明文" />
<!-- src属性で画像のパス、alt属性で画像の説明を指定 -->

複数の属性を同じタグに指定することができます。各属性はスペースで区切ります。

<a href="https://example.com" target="_blank">新しいウィンドウでリンクを開く</a>

HTML のタグと要素は、Web ページを構成する基本的な要素です。タグは特定の意味や機能を持ち、要素は開始タグと終了タグとその間の内容全体を指します。また、属性を使用してタグに追加情報を提供できます。これらの基本を理解することで、より高度な HTML の使い方が可能になります。

次のステップとして、実際にブラウザやテキストエディタを使って自分でタグや要素を試してみましょう。実際に手を動かすことで、理解が深まります。