HTML 速習チュートリアル

HTML 要素

HTML要素は、開始タグ、コンテンツ、そして終了タグによって定義されます。

1. HTML要素の定義

HTML要素(Element)とは、開始タグから終了タグまでのすべての要素を指します。

<タグ名> コンテンツがここに入ります... </タグ名>

HTML要素の例:

  • <h1>マイ・ファースト・ヘッディング</h1>
  • <p>マイ・ファースト・パラグラフ</p>
開始タグ要素のコンテンツ終了タグ
<h1>マイ・ファースト・ヘッディング</h1>
<p>マイ・ファースト・パラグラフ</p>
<br>なし(空要素)なし

2. ネストされたHTML要素 (Nested HTML Elements)

HTML要素はネスト(入れ子)にすることができます。これは、要素の中に他の要素を含めることができることを意味します。

すべてのHTMLドキュメントは、ネストされたHTML要素で構成されています。

以下の例には4つのHTML要素(<html><body><h1><p>)が含まれています。

2.1 コード例の解説

<!DOCTYPE html>
<html>
<body>

<h1>マイ・ファースト・ヘッディング</h1>
<p>マイ・ファースト・パラグラフ</p>

</body>
</html>

例の解説:

<html> 要素はルート要素であり、ドキュメント全体を定義します。
これには開始タグ <html> と終了タグ </html> があります。
<html> 要素の中には、別のHTML要素である <body> 要素が含まれています。

<html>
<body>

<h1>マイ・ファースト・ヘッディング</h1>
<p>マイ・ファースト・パラグラフ</p>

</body>
</html>

<body> 要素はドキュメントのボディを定義します。

これには開始タグ <body> と終了タグ </body> があります。
<body> 要素の中には、さらに2つのHTML要素(<h1><p>)が含まれています。

<body>

<h1>マイ・ファースト・ヘッディング</h1>
<p>マイ・ファースト・パラグラフ</p>

</body>

<h1> 要素は見出しを定義します。

開始タグ <h1> と終了タグ </h1> があります。

<h1>マイ・ファースト・ヘッディング</h1>

<p> 要素は段落を定義します。

開始タグ <p> と終了タグ </p> があります。

<p>マイ・ファースト・パラグラフ</p>

3. 終了タグを忘れないこと

一部のHTML要素は、終了タグを忘れても正しく表示されることがあります。

<html>
<body>

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

</body>
</html>

しかし、これに頼ってはいけません。 終了タグを忘れると、予期しない結果やエラーが発生する可能性があります。

4. 空のHTML要素 (Empty HTML Elements)

コンテンツを持たないHTML要素は、空要素(Empty Elements)と呼ばれます。

<br> タグは、終了タグのない空要素です(改行を定義します)。

<p>これは <br> 改行を含む段落です。</p>

5. HTMLは大文字と小文字を区別しない (Case Insensitive)

HTMLタグは、大文字と小文字を区別しません。<P><p> と同じ意味です。

<P>これはHTMLの段落です。</P>

HTML標準では小文字のタグを使用することは必須ではありませんが、W3C(World Wide Web Consortium)はHTMLにおいて小文字を使用することを推奨しています。また、XHTMLのようなより厳格なドキュメントタイプでは小文字が必須となります。