HTML 要素

HTMLドキュメントは一連のHTML要素（Element）で構成され、ウェブページ構造の基盤です。

HTML要素とは？

HTML要素は、開始タグ（start tag）到終了タグ（end tag）の間の完全な構造です。

開始タグ 要素コンテンツ 終了タグ
<p> これは段落です </p>
<a href="default.htm.html"> これはリンクです </a>
<br> 改行（空要素） 无

説明：

  • 開始タグはオープニングタグ（opening tag）とも呼ばれます
  • 終了タグはクロージングタグ（closing tag）とも呼ばれます

HTML要素の構文規則

  • 要素は開始タグで始まり、次に終了タグで終わります
  • 要素コンテンツは開始タグと終了タグの間にあります
  • 一部の要素は空要素（empty element）であり、コンテンツがありません
  • 空要素は通常、開始タグ内で自己終了します（例：<br />）
  • ほとんどの要素は属性（Attributes）を含めることができます

ヒント：属性については後の章で詳しく説明します。

HTML要素のネスト

HTML要素は相互にネストして、ツリー構造を形成できます：

  • 1つの要素は他の要素を含むことができます
  • HTMLドキュメントは本質的にネスト構造（DOMツリー）です

HTMLドキュメントの例

<!DOCTYPE html>
<html>

  <body>
<p>これは最初の段落です。</p>
  </body>

</html>

この例には3つの主要な要素が含まれています：html、body、p。

例の解説

<p> 要素（段落）

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

段落を定義し、テキストコンテンツを含みます。

<body> 要素（本体）

<body>
<p>これは最初の段落です。</p>
</body>

ページの本体コンテンツを定義し、複数の子要素を含めることができます。

<html> 要素（ルート要素）

<html>

  <body>
<p>これは最初の段落です。</p>
  </body>

</html>

HTMLドキュメント全体のルートノードであり、すべてのコンテンツはその中に含める必要があります。

終了タグについて

一部の場合、ブラウザは欠落した終了タグを自動的に補完します：

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

正常に表示されますが、この動作に依存することはお勧めしません、以下の問題を引き起こす可能性があります：

  • 構造の混乱
  • スタイルの異常
  • 互換性の問題

HTML空要素

空要素とはコンテンツがない要素のことです。例：

  • <br>（改行）
  • <img>（画像）
  • <input>（入力欄）

推奨される書き方：

<br />

この書き方はHTML、XHTML、XMLと互換性があり、より標準的です。

ベストプラクティス：小文字タグを使用する

HTMLタグは大文字と小文字を区別しませんただし、以下を推奨します：

  • 統一して小文字タグを使用する
  • W3C仕様に準拠する
  • コードの可読性と一貫性を向上させる
その他の拡張