Skip to content

2. HTML の基本構造

HTML（HyperText Markup Language）は、ウェブページを構築するための基本的な言語です。HTML 文書は一般的に以下のような基本構造を持っています。この章では、HTML 文書の基本構造について詳しく解説します。

2.1 ドキュメントタイプ宣言

HTML 文書を正しく構成するために、まず最初に「ドキュメントタイプ宣言」を記述します。これはブラウザに対して、文書がどのバージョンの HTML に基づいているかを知らせるためのものです。最新の HTML5 では、以下のように宣言を行います。

<!DOCTYPE html>

2.2 HTML 要素

次に、HTML 文書の全体を囲む「HTML 要素」を記述します。この要素は<html>タグと</html>タグで囲まれた部分です。

<!DOCTYPE html>
<html></html>

2.3 ヘッド要素

HTML 文書のメタデータ（文書の情報や設定など）を含む部分が「ヘッド要素」です。<head>タグと</head>タグで囲まれます。この部分には、ページのタイトルやキャラクターエンコーディングの指定などが含まれます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTMLの基本構造</title>
  </head>
</html>

2.3.1 メタタグ

<meta>タグは、文書に関するメタデータを指定するために使用されます。例えば、文字エンコーディングを指定する場合は以下のように記述します。

<meta charset="UTF-8" />

2.3.2 タイトルタグ

<title>タグは、ブラウザのタブや検索エンジンの結果で表示されるページのタイトルを指定します。このタグは必ず<head>要素内に記述します。

<title>HTMLの基本構造</title>

2.4 ボディ要素

HTML 文書の表示内容（テキストや画像など）を含む部分が「ボディ要素」です。<body>タグと</body>タグで囲まれます。この部分にウェブページの主な内容を記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTMLの基本構造</title>
  </head>
  <body>
    <h1>HTMLの基本構造</h1>
    <p>ここにウェブページの主要な内容が表示されます。</p>
  </body>
</html>

ボディ要素内には、見出しや段落、画像、リンクなどが配置されます。これらは「タグ」を使って記述します。

2.5 基本構造の例

これまで説明した内容をまとめた、HTML 文書の基本構造の例を以下に示します。この例を実際にテキストエディタに貼り付けて、ブラウザで表示してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTMLの基本構造</title>
  </head>
  <body>
    <h1>HTMLの基本構造</h1>
    <p>ここにウェブページの主要な内容が表示されます。</p>
  </body>
</html>

この基本構造を理解することで、HTML 文書の作成が容易になります。次のセクションでは、具体的な要素や属性についてさらに詳しく学んでいきます。