一歩ずつ学ぶ

最終更新日:

HTML5準備編: 要素とは、車の部品に例えるとすぐわかる

「要素」は抽象的な言葉なのでわかりにくい

HTML5やそれ以前のHTML4.01を学んでいると、最初の方で 「要素」という言葉が出てきます。「要素」は抽象的な言葉なのでよく分からずに そのまま進んでしまう方が多いと思います。しかし、HTMLにおいて要素と いう言葉は重要な言葉です。早い段階で理解しておいたほうが以後の学習が スムーズに進みます。このページでは要素を車の部品に例えて説明してみます。

車の構成

車を構成するものは何でしょうか?たくさんありますが、例えばタイヤ、ハンドル、ボディ等が あります。これを図にすると下図のようになります。

タイヤ、ハンドル、ボディに共通する言葉として「部品」という言葉があります。 部品というのは抽象的な言葉ですが、タイヤ、ハンドル、ボディすべて「部品」と 言えます。これを図にすると

この関係図を踏まえた上で次はHTML文書の構成を見てみます。

HTML文書の構成

HTML文書を構成するものもたくさんありますが、車と同じように3つだけ例を挙げてみます。 タイトル、見出し、本文等があります。これを図にすると下図のようになります。

タイトル、見出し、本文に共通する言葉として「要素」という言葉があります。 先の車の例での「部品」と同じように「要素」も抽象的な言葉です。 そして、タイトル、見出し、本文すべて「要素」といえます。これを図にすると

車の構成図とHTML文書の構成図から言える事

車の構成図からは次の事が言えます。

  • 車は複数の部品から構成されている
  • 部品というのは抽象的な言葉
  • 部品の具体例として、タイヤ、ハンドル、ボディ等がある

一方、HTML文書の構成図からは次の事が言えます。

  • HTML文書は複数の要素から構成されている
  • 要素というのは抽象的な言葉
  • 要素の具体例として、タイトル、見出し、本文等がある

このように、車の部品と比較すると「要素」という言葉の位置づけが わかりやすくなると思います。

「要素」と「タグ」の関係

これまでにHTML文書が複数の要素から構成されていること。 要素の具体例がタイトル、見出し、本文等であることを説明しました。

HTMLはマークアップ言語といわれ、マークアップを直訳すると「印付け」です。つまり、 マークアップ言語は印を付けていく言語といえます。 そして、付けていく印のことを「タグ」といいます。

要素の具体的な種類、タイトルなのか、見出しなのか、本文なのかを きめる印(マーカー)が「タグ」という言葉です。

ここで具体的に1つの要素を見てみます

<title>これはタイトルです</title>

これが1つの要素で、title要素といいます。 <title>と</title>がタグで、<title>を開始タグ、 </title>を終了タグといいます。

<title>~</title>タグで囲まれた要素をtitle要素といい、 <h1>~</h1>タグで囲まれた要素をh1要素といいます。 <p>~</p>タグで囲まれた要素はp要素です。

つまり、要素の種類を決めるのが「タグ」です。

図にすると以下のようになります。

次のページでは、要素、タグ、要素名、要素内容といった用語の整理を していきます。

↑ PAGE TOP