HTMLの構成要素

 
  
ホーム > HTML Note > HTMLの概要 > HTMLの構成要素

要素とタグ

要素は、タグの開始区切り子[<]と終了区切り子[>]の間に記述します。
<要素>内容</要素>

要素は、概して「<要素>内容</要素>」という形式になります。初めの「<要素>」を「開始タグ」、内容を「内容モデル」、最後の「</要素>」を「終了タグ」と呼びます。

要素の中には、「終了タグ」が省略可能な「<要素>内容」という形式のものや、「開始タグ」「終了タグ」が共に省略可能な形式のもの、「内容モデル」を持たない空要素「<要素>」という形式のものがあります。
<div>こんにちは</div>      <!-- 一般的 -->
<dt>こんにちは</dt>        <!-- 終了タグが省略可能 -->
<body>こんにちは</body>    <!-- 開始、終了タグともに省略可能 -->
<br>                       <!-- 空要素 -->

要素名に、大文字小文字の区別はありません。
HTMLの次世代版であるXHTMLでは、要素名と属性名ともに小文字で記述する必要があります。
 

タグの配置

タグは「開始タグ」、「終了タグ」がきちんとした入れ子状になるように配置しなければなりません。
Ο <i><b>ご注意</b></i>
Χ <i><b>ご注意</i></b>
<i>-</i>の間にきちんと<b>-</b>が納まるように配置します。
 

省略可能タグのしくみ

終了タグが省略可能であるp要素の例で説明します。
<p>テキスト</p>
...ブロック要素...
この記述は、下記のように書き換えることが可能です。
<p>テキスト
...ブロック要素...
すぐ後ろにあるブロック要素によってp要素は閉じられます。

同様に、p要素がブロック要素に含まれている場合の例で説明します。
<div>
<p>テキスト</p>
</div>
この記述は、下記のように書き換えることが可能です。
<div>
<p>テキスト
</div>
すぐ後ろにあるブロック要素の</div>によって、p要素は閉じられます。

もうひとつの例を説明します。
<html>
<head>
<title>タイトル</title>
</head>

<body>
<p>テキスト</p>
</body>
</html>
は、以下のように省略することができます。
<title>タイトル</title>
<p>テキスト
この形では、タグは省略されていますが、要素は存在します。

HTMLの次世代版であるXHTMLでは、タグを省略することはできません。
 

属性

要素には、属性と呼ばれる関連特性があります。
<要素 属性="属性値">内容</要素>

「属性="属性値"」の組は開始タグ内において、空白文字で区切り、いくつでも任意の順序で記述することができます。

属性に大文字小文字の区別はありません。
属性値には一般的に大文字小文字の区別がありません。
HTMLの次世代版であるXHTMLでは、属性名は小文字で記述する必要があります。

<option selected>におけるselectedは、属性値です。
HTMLの次世代版であるXHTMLでは、selected="selected"と完全な記述をする必要があります。
HTMLにおいて、文書作成者は、多くのブラウザが完全書式を理解せずに最小化書式のみを理解するという点に、注意を払う必要があります。

h1要素にid属性を指定する場合には下記のような記述を行います。
<h1 id="chap1">アダムとエバ</h1>
 

引用符 (クォーテイション)

属性値は、二重引用符["]または単引用符[']で囲むように求められています。
属性="値"
属性='値'

二重引用符の中では単引用符を用いることができます。また、その逆もできます。
<input type="button" value="ボタン" onclick="alert('Hello');">
<input type="button" value="ボタン" onclick='alert("Hello");'>

更に、引用符が必要になった場合には文字参照を用います。単に、二重引用符、単引用符の代わりに文字参照を用いることもできます。
二重引用符 [&#34;][&quot;]
単引用符 [&#39;]

二重引用符はダブルクォーテイション、単引用符はシングルクォーテイションとも呼ばれます。

属性値が英数字[a-zA-Z0-9]、ハイフン[-]、ピリオド[.]、アンダースコア[_]、コロン[:]のみを含む場合には、引用符を省略することができます([_][:]は、HTML4.01から)。しかし、HTML4.01では、いかなる場合においても、省略しないことを推奨しています。実際のところ属性値に[-._:]などの記号が入る場合は、引用符で囲んだほうが無難でしょう。

HTMLの次世代版であるXHTMLでは、引用符を省略することはできません。

属性に大文字小文字の区別はありません。
属性値には一般的に大文字小文字の区別がありません。
HTMLの次世代版であるXHTMLでは、属性名は小文字で記述する必要があります。

<option selected>におけるselectedは、属性値です。
HTMLの次世代版であるXHTMLでは、selected="selected"と完全な記述をする必要があります。
HTMLにおいて、文書作成者は、多くのブラウザが完全書式を理解せずに最小化書式のみを理解するという点に、注意を払う必要があります。
 

文字参照

タグの開始区切り子[<]や終了区切り子[>]などをブラウザに表現したいときに用いる[&lt;]や[&gt;]などの特殊な記号を、文字参照といいます。  文字実体参照一覧  半角カナの数値文字参照

よく使う文字参照には以下のようなものがあります。
[&lt;] [&#60;][<]を表します。
[&gt;] [&#62;][>]を表します。
[&amp;] [&#32;][&]を表します。
[&quot;] [&#34;]["]を表します。
[&#39;][']を表します。
[&nbsp;] [&#160;][ ]を表します。
[&copy;] [&#169;][©]を表します。

HTMLの文字参照には「10進、16進の数値文字参照」と「文字実体参照」の2つの形式があります。
16進の数値文字参照は、大文字小文字を区別しません。

文字実体参照は、覚えにくい「数値」よりも、より覚えやすい「文字」で記述するするために定義されています。
文字実体参照は、大文字小文字を区別します。

タグの開始区切り子[<]および終了区切り子[>]などは、ブラウザの誤認を避けるためにも、それぞれ[&lt;][&#60;]、[&gt;][&#62;]と記述します。また、属性値として記述する[&]は、文字参照の冒頭と解釈されないためにも、[&amp;][&#32;]と記述します。

詳しくは、文字実体参照一覧をご覧ください。
 

HTMLのコメント

コメントは、ブラウザに表示されません。特別な意味はありませんが著者にとってはメモとして使えてとても便利です。HTMLにコメントを記述するには、以下のように記述します。
<!--コメント-->

<!--
    コメント
-->

また、コメントには以下のような決まりがあります。
Χ <! -- コメント --> [<!]とはじめの[--]の間に空白文字があってはならない。
Ο <!-- コメント -- > おわりの[--]と[>]の間には空白文字があってもよい。
Χ <!-- コメ--ント --> コメント中に2つ以上連続したハイフン[-]があってはならない。

コメントもマーク付けです。タグの配置のルールにならって記述します。
 
関連項目:
トップページ HTML Note ページトップ
 2003/06/22発行 2008/01/01更新