LESSON 15分

HTML基本用語を覚えよう

ストーリー

先輩「ここまでの内容を整理しよう。用語が曖昧だと、この先の学習で困るからね」

確かに、タグとか要素とか、ごちゃごちゃしてきました...

先輩「大丈夫。ここで一度きちんと整理しておこう」

基本用語一覧

要素（Element）

開始タグ + コンテンツ + 終了タグ の 全体 を「要素」と呼びます。

html
<p>こんにちは</p>
└──── 要素 ────┘
部分名前
<p>開始タグ
こんにちはコンテンツ
</p>終了タグ
<p>こんにちは</p> 全体要素

タグ（Tag）

要素の 始まりと終わり を示すしるしです。

<p>  → 開始タグ（Opening Tag）
</p> → 終了タグ（Closing Tag）

先輩「タグは『目印』、要素は『全体』。区別して使おう」

属性（Attribute）

タグに付ける 追加情報 です。

html
<a href="https://example.com" target="_blank">リンク</a>
    ├── 属性名: href
    ├── 属性値: "https://example.com"
    ├── 属性名: target
    └── 属性値: "_blank"
用語説明
属性名追加情報の種類（href, src, class など）
属性値追加情報の内容（URL、ファイル名、クラス名など）

DOM（Document Object Model）

ブラウザがHTMLを読み込んだ後に作る ツリー構造のデータ です。

html
<html>
  <head>
    <title>テスト</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

ブラウザはこれを以下のようなツリーとして理解します。

document
└── html
    ├── head
    │   └── title
    │       └── "テスト"
    └── body
        ├── h1
        │   └── "見出し"
        └── p
            └── "段落"

先輩「開発者ツールのElementsタブで見ていたのが、まさにこのDOMだよ」

その他の重要用語

用語説明例
マークアップテキストにタグで意味を付けること<h1>見出し</h1>
ネスト（入れ子）タグの中にタグを入れること<p><strong>太字</strong></p>
親要素外側のタグ<p> は <strong> の親
子要素内側のタグ<strong> は <p> の子
兄弟要素同じ親を持つ同レベルのタグ<h1> と <p>
ブロック要素1行を占有する要素<p>, <h1>, <div>
インライン要素テキストの中に入る要素<strong>, <a>, <span>

用語の関係図

HTML文書（Document）
│
├── 要素（Element）
│   ├── タグ（Tag）
│   │   ├── 開始タグ
│   │   └── 終了タグ
│   ├── 属性（Attribute）
│   │   ├── 属性名
│   │   └── 属性値
│   └── コンテンツ（Content）
│
└── DOM（Document Object Model）
    └── ツリー構造
        ├── 親要素
        ├── 子要素
        └── 兄弟要素

まとめ

ポイント内容
要素タグ + コンテンツの全体
タグ要素の始まりと終わりの目印
属性タグに付ける追加情報
DOMブラウザが作るHTMLのツリー構造
ネストタグの中にタグを入れること

チェックリスト

  • 「要素」と「タグ」の違いを説明できる
  • 属性の構成（属性名・属性値）を理解した
  • DOMが何かを一言で説明できる
  • 親要素・子要素・兄弟要素の関係を理解した
  • ブロック要素とインライン要素の違いが分かる

次のステップへ

用語が整理できました。Step 1 の最後に、ここまでの理解度をクイズで確認しましょう。

推定読了時間: 15分