【6日でできるHTML＆CSS入門】HTMLの基本構造

―HTMLの“骨格”を理解しよう―
　Web ページはHTML（HyperText Markup Language）というマークアップ言語で形づくられます。HTML は「タグ」と呼ばれるラベルで文章を区切り、ブラウザに「ここは見出し」「ここは段落」などの意味を伝えます。本記事では、最小限のタグで構成されるシンプルな文書を手がかりに、HTML の基本構造と代表的なタグを体系的に学びます。

１．HTML 文書の基本構成

1.1. 文書型宣言と <html> タグ

  • <!DOCTYPE html> は「このファイルは HTML5 です」と宣言する定型句です。
  • <html> ～ </html> が HTML 文書全体を包む最上位タグで、子要素として head と body を持ちます。

1.2. <head> 内の最低限タグ

タグ目的補足
<meta charset="UTF-8">文字エンコーディングを指定日本語サイトではほぼ UTF-8 を使用
<title>ブラウザのタブ・ブックマークに表示される題名ページごとに一意に付ける

1.3. <body> に書くページ本体

　<body> 要素の内容だけがブラウザに直接描画されます。ここに見出し (<h1> など) や段落 (<p>) を配置します。

２．代表的なコンテンツタグ

2.1. 見出しタグ <h1> ～ <h6>

数字が小さいほど重要度が高く、文字も大きく表示されます。

2.2. 段落タグ <p> と改行タグ <br>

  • <p> は段落ごとに使い、末尾で自動改行。
  • <br> は文章途中に入れる単体タグで、その位置で折り返します。

2.3. リストタグ <ul> / <ol> と <li>（必要に応じて）

  • <ul> は順序なし、<ol> は順序付きリスト。
  • 個々の項目は <li> で記述します。

３．コード例で学ぶ HTML 基本形

3.1. ファイル名： lesson11_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは、HTML!</h1>
  <p>これは最小構成の HTML 文書です。<br>一歩ずつ理解していきましょう。</p>
</body>
</html>

表示結果

  • 大見出し： こんにちは、HTML!
  • 段落： 「これは最小構成の…」「一歩ずつ…」の 2 行表示

3.2. ファイル名： lesson11_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出しデモ</title>
</head>
<body>
  <h1>メイン見出し</h1>
  <h2>サブ見出し</h2>
  <h3>小見出し</h3>
</body>
</html>

表示結果

3.3. ファイル名： lesson11_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リストの例</title>
</head>
<body>
  <h1>買い物リスト</h1>
  <ul>
    <li>りんご</li>
    <li>パン</li>
    <li>牛乳</li>
  </ul>
</body>
</html>

表示結果

４．ブラウザでソースを確認する手順

１．作成した HTML ファイルをブラウザで開く

２．ページ上で右クリック→「ページのソースを表示」 を選択

３．新しいタブにフルソースが表示されるので、インデントやタグの入れ子を再確認

５．使用タグ一覧と詳細解説

タグ日本語名 / 役割主な属性閉じタグ
<!DOCTYPE>文書型宣言なしなし
<html>HTML 文書全体lang など必要
<head>メタ情報の容器なし必要
<meta>文字コード・SEO 等charset, name, contentなし
<title>ページ題名なし必要
<body>表示内容の容器なし必要
<h1>〜<h6>見出し (1〜6)なし必要
<p>段落なし必要
<br>改行なしなし
<ul>箇条書きリストなし必要
<ol>番号付きリストなし必要
<li>リスト項目なし必要

まとめ

  • HTML 文書は <!DOCTYPE> → <html> → <head> と <body> という三層構造が基本。
  • コンテンツは <body> に集約し、意味ごとにタグで区切る。
  • <meta charset="UTF-8"> と <title> は必須級。
  • ブラウザの「ページのソースを表示」を活用して、他サイトの構造を読み解くと理解が深まる。
    これらの基礎を押さえれば、CSS や JavaScript を重ねても迷わずデバッグできる堅牢な土台が築けます。