2.HTMLの基本的な構造

■HTML文書の基本的な構造

HTML文書の一番基本的な構造は次のようになります。

このようにHTMLでは、文書を構成する各内容をその意味や性質によって「要素」に分類し、当該の箇所がどの要素なのかを「タグ」というしるしを付けて示します。
タグには通常、「開始タグ」と「終了タグ」があり、この2つで「要素内容」を挟むように記述します。

ただし、次の要素は要素内容を持たないために、開始タグのみで終了タグがありません。
このような要素を「空要素」といいます。

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr


■属性と値

各要素には、その要素の性質や役割なと詳細情報を示す「属性」を指定することもできます。
開始タグの要素名のあとに半角スペースを入れ、基本的には「属性名=”値”」のかたちで記述します。

値には、rect、circle、polyのように既定のものと、数値や文字列などのように文書の作成者が任意で指定するものとがあります。
上記のように、引用符(“”)で括って記述するのが一般的です。
「””」で囲われた中に「”」、あるいはその逆といったように、引用符を入れ子状にして使うこともできます。

<textarea name=”comment”>コメントを入力してください</textarea>

HTMLの場合、属性名と値が同し属性(論理属性)のときは次のような指定方法も認められています。

disabled=”disabled”
disabled=””
disabled

複数の属性を指定する場合は、それぞれを半角スペースで区切って記述します。順序は問いません。

 <textarea cols=”50” name=”comment”>コメントを入力してください</textarea>





■グローハル属性
属性の中には、すへての要素で共通して利用できる「グローバル属性」があります。


■コメント
「<!–」と「–>」に挟まれた部分がコメントになります。
プラウサには表示されないので、編集時にメモを入れたり、一時的に文書の一部を隠したりするときなどに利用できます。


■親要素と子要素
HTML文書では、既にタグが付けられた要素の中で別のタクを指定し、さらに情報を追加して入れ子にすることもできます。
入れ子にする場合、終了タグが互い違いにならないよう、より内側のタグから順番に閉じていきます。

<p>要素を<strong>要素で</strong>囲む。</p>

このような場合、外側にあって別の要素を含む要素を「親要素」、内側で親要素に含まれている要素を「子要素」といいます。
上の例ではp要素が親要素に、strong要素が子要素になります。
各要素がどのような性質を持ち、内容として他のどの要素を入れられるかなどは仕様で決められています。


■HTMLのツリー構造

HTMLの要素が親要素と子要素の関係を作ることからわかるように、HTML文書はその全体がhtml要素を基点(ルート)とする階層構造になっています。
このような構造をツリー構造ともいいます。

簡単なサンプルを使ってツリー構造を表すと下記のようになります。

<html>
<head>
<title>ツリー構造サンプル</title>
</head>
<body>
<h1>HTMLとは</h1>
<ul>
<li>Webべージ用の文書を記述するために開発された言語</li>
<li>タグを使って文書を構成します</li>
</ul>
<h2>HTMLの基本構造</h2>
<p>HTML文書は、html要素をルートとする<strong>ツリー構造</strong>になっています。</p>
</body>
</html>

<html>
 ├<head>
 │ └<title>
 └<body>
   ├<h1>
   ├<ul>
   │├<li>
   │└<li>
   ├<h2>
   └<p>
    └<strong>