LESSON 15分

ストーリー

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

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

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

基本用語一覧

要素（Element）

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

graph LR
    A["&lt;p&gt;<br>開始タグ"] --- B["こんにちは<br>コンテンツ"] --- C["&lt;/p&gt;<br>終了タグ"]

    subgraph element["要素 Element 全体"]
        A
        B
        C
    end

    style element fill:#dbeafe,stroke:#2563eb
    style A fill:#d1fae5,stroke:#059669
    style B fill:#fef3c7,stroke:#d97706
    style C fill:#d1fae5,stroke:#059669
部分名前
<p>開始タグ
こんにちはコンテンツ
</p>終了タグ
<p>こんにちは</p> 全体要素

タグ（Tag）

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

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

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

属性（Attribute）

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

graph TD
    A["&lt;a&gt; タグ"] --> B["属性名: href"]
    A --> C["属性名: target"]
    B --> D["属性値: https://example.com"]
    C --> E["属性値: _blank"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#d1fae5,stroke:#059669
    style D fill:#fef3c7,stroke:#d97706
    style E fill:#fef3c7,stroke:#d97706
用語説明
属性名追加情報の種類（href, src, class など）
属性値追加情報の内容（URL、ファイル名、クラス名など）

DOM（Document Object Model）

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

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

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

graph TD
    A["document"] --> B["html"]
    B --> C["head"]
    B --> D["body"]
    C --> E["title"]
    E --> F["テスト"]
    D --> G["h1"]
    D --> H["p"]
    G --> I["見出し"]
    H --> J["段落"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#dbeafe,stroke:#2563eb
    style C fill:#fef3c7,stroke:#d97706
    style D fill:#d1fae5,stroke:#059669
    style E fill:#f3f4f6,stroke:#9ca3af
    style F fill:#f3f4f6,stroke:#9ca3af
    style G fill:#f3f4f6,stroke:#9ca3af
    style H fill:#f3f4f6,stroke:#9ca3af
    style I fill:#f3f4f6,stroke:#9ca3af
    style J fill:#f3f4f6,stroke:#9ca3af

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

その他の重要用語

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

用語の関係図

graph TD
    A["HTML文書 Document"] --> B["要素 Element"]
    A --> C["DOM Document Object Model"]
    B --> D["タグ Tag"]
    B --> E["属性 Attribute"]
    B --> F["コンテンツ Content"]
    D --> G["開始タグ"]
    D --> H["終了タグ"]
    E --> I["属性名"]
    E --> J["属性値"]
    C --> K["ツリー構造"]
    K --> L["親要素"]
    K --> M["子要素"]
    K --> N["兄弟要素"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#d1fae5,stroke:#059669
    style D fill:#fef3c7,stroke:#d97706
    style E fill:#fef3c7,stroke:#d97706
    style F fill:#fef3c7,stroke:#d97706
    style G fill:#f3f4f6,stroke:#9ca3af
    style H fill:#f3f4f6,stroke:#9ca3af
    style I fill:#f3f4f6,stroke:#9ca3af
    style J fill:#f3f4f6,stroke:#9ca3af
    style K fill:#fef3c7,stroke:#d97706
    style L fill:#f3f4f6,stroke:#9ca3af
    style M fill:#f3f4f6,stroke:#9ca3af
    style N fill:#f3f4f6,stroke:#9ca3af

まとめ

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

チェックリスト

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

次のステップへ

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

推定読了時間: 15分