要素

要素の記述

HTMLは要素で構成されています。その要素は開始タグ、内容、終了タグで構成されます。HTMLでページ内で段落を表すときは

<p>ここからここまでがひとつの段落です</p>

というようにHTMLを記述します。このとき<p>を開始タグ</p>を終了タグといいます。開始タグから終了タグまでの『<p>ここからここまでがひとつの段落です</p>』を要素といいます。また、<>の中のpを要素名といいます。そして開始タグから終了タグの間の『ここからここまでがひとつの段落です』を（要素）内容といいます。

要素＝開始タグ＋内容＋終了タグ

開始タグは<と>の間に要素名を入れ、終了タグは</と>の間に要素名を入れます。
そして開始タグには属性（attribute）と属性値（value）を持つことができます。

<p class="ex">ここからここまでがひとつの段落です</p>

要素名に続き半角スペースを入れ属性を入れます。classが属性exが属性値になります（class="ex"を属性と呼ぶこともあります）。この場合のexは任意の文字列で自由に変更できます。属性は属性値="属性値"のように=でつなげて”（引用符）で囲みます。属性は半角スペースを区切りとして順不同で複数含める事ができます。

開始タグ＝<要素名 属性名="属性値" 属性名="属性値">

また、各要素名により含める事ができる属性名も決まっています。

要素名（属性名）はXHTMLでは小文字（もちろん半角）で記述する事になっているのでHTMLの場合も小文字で記述しておけばよいでしょう。

要素の中に要素を含む（入れ子にする）ことができますが、外側の要素（親要素）を内側の要素（子要素）がまたくことはできません。

正しい記述

<p>ここからここまでがひとつの<em>段落</em>です</p>


<em>は強調です。

誤った記述

<p>ここからここまでがひとつの<em>段落です</p></em>


また、ほとんどの要素はブロックレベルとインラインとに分けることができます。通常ブロックレベルにはいくつかの種類のブロックレベルとインラインを子要素とすることができますが逆は通常できません。
上記の例ではp要素はブロックレベルですのでインラインであるemを子要素にすることは可能ですが逆はできません。

誤った記述

<em>ここからここまでがひとつの<p>段落です</p></em>


空要素

要素により内容が無いものもあります。これを空要素と呼びます。改行するための<br>や横罫線の<hr>などは内容がありません。XHTML1.0では終了タグは省略出ませんので今までのHTMLと整合するため<br />や<hr />のように半角スペースの後に/を入れます。

ホワイトスペース

表示に影響を与えないtabや改行、連続した半角スペースのこと

HTMLを記述する際に要素と要素を改行して区別しやすいように記述します。

<p>ここからここまでが始めの段落です</p>
<p>ここからここまでが次の段落です</p>

これを1行にかいても

<p>ここからここまでが始めの段落です</p><p>ここからここまでが次のの段落です</p>

半角スペースやtabでインデントをつけても

<p>ここからここまでが始めの段落です</p>
 <p>ここからここまでが次の段落です</p>

同じ事です。

また、内容の中に半角スペースを1つ入れても連続して複数入れても表示は半角スペース1つ分になります。全角スペースは文字と同じ扱いで入れた数だけスペースが空きます。

ブラウザによりブロックレベル要素にインライン要素を続けて記述したときに改行やtabなどでわずかな隙間が開いてしまう場合もありますのでその時はHTMLソースが読みにくくなりますが1行にまとめたほうが良い場合もあります。

Copyright (C) 2009 ホームページ制作ねっとかんさい All Rights Reserved.