<<PREV | TOP | NEXT>>

HTML に関する諸注意

last modified 2nd/Nov. 2000

大文字と小文字

HTML 4 では、タグの要素名属性名半角英字で定義されています。しかし、大文字と小文字は区別しません。

一方、属性の値は、属性の種類によって、扱いが変わります。自然言語で指定できる属性の値を除けば、全て半角英数字で定義されており、このとき全角文字は誤りです。

要素

HTML 文書は要素の積み重ねで構成されています。要素は開始タグから終了タグまでで定義され、その間が要素の内容です。

P 要素

<p>
ここは P 要素の内容部です。
</p>

UL 要素

<ul>
 <li>ここは LI 要素の内容部です。</li>
 <li>ここは LI 要素の内容部です。</li>
</ul>

あらゆる要素の開始タグ、終了タグに現れる要素名(p, ul, li, ect. )は大文字と小文字を区別しません

<BLOCKQUOTE>, <blockquote>, <BlockQuote> は全て同じように、 BLOCKQUOTE 要素の開始タグとして解釈されます。

但し、 HTML 4 の後継バージョン XHTML では大文字と小文字を区別し、要素タイプは小文字でしか定義されていません。慣れの為にも、HTML ソースは全て小文字で書くように推奨します

因みに、 <BLOCKQUOTE> は明確な誤りです。要素は半角英字でしか定義されていませんので、全角文字は誤りであり解釈できません。

属性

要素毎に利用できる属性が定義されています。属性は、要素の開始タグに記述し、原則「属性="値"」と云う形で現れます。

<a href="../index.hmtl">TOP Page</a>

上の例は A 要素です。開始タグに現れている href が属性です。あらゆる属性名 (href, etc.) は大文字と小文字を区別しません。

<a HREF="../index.html">, <a href="../index.html">, <a HRef="../index.html"> は全て同じように A 要素の開始タグとして解釈されます。

但し、 <a HREF="../index.html">, <a href="../index.html"> は HTML としては誤りです。後者は要素名と属性名の間が全角スペースになっています。半角英字でしか定義されていないので、全角文字は誤りであり、解釈できません。

属性の値

属性の種類によっては、指定できる値がキーワードで定義されているものがあります。これらは全て半角で定義されているので全角文字は誤りです。自然言語 (%Text;) で指定できるもの以外の属性値は半角英数字しか許されません。

大文字と小文字の区別は属性によります。

CS
値に大文字小文字の区別がある。「a」と「A」とは異なるものと解釈される。
CI
値に大文字小文字の区別がない。「a」と「A」とは等しいものと解釈される。但し、 XHTML 1.0 では大文字と小文字は常に区別され、原則小文字で定義されている事に注意して下さい。 [CI] が指定されている場合は小文字で記述するようにお勧めします。
CN
大文字小文字の区別がないか、属性値が数値であるなど。
CA
要素あるいは属性の定義自体に大文字小文字の区別がある。
CT
大文字小文字の区別についてはデータ形式の定義を参照。

例えば、 href 属性は [CS] で、且つ半角英字しか許されません。 href="./index.html"href="./Index.html" は HTML として適当ですが、区別はされます。 href="./INDEX.html", href="./表紙.html" は明らかに誤りで、解釈できません。

一方、 align 属性や charset 属性は [CI] ですが、半角英字しか許されません。例えば、 align="center"align="CENTER" は区別されません。

属性によっては、キーワードが定義されておらず、任意に付けられる場合があります。この場合は一般に [CS] です。他に、自然言語 (%Text;) で指定できる場合も [CS] として扱われます。

例えば、 name 属性や id 属性は [CS] で、且つ半角英字しか許されません。例えば、 id="toc" と、 id="ToC" は HTML として適当ですが、区別はされます。

また、 %Text; の例は alt 属性です。 IMG 要素の必須属性である alt 属性の値は自然言語で、全角文字も許されます。例えば、 alt="家族の写真" も HTML として適当です。

空白類文字

HTML ソースで半角スペースや改行は複数連なっていても、無視されるか、半角スペース一つにまとめられて解釈されます。

UL 要素

<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>

LI 要素の前に半角スペースが二つ入っている;

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
</ul>

上の二つのソースは何れも等価です。後者はソースを読みやすくするために、半角スペースでインデント(字下げ)しています。ソースを読みやすくするために、適当に半角スペース、改行を挿入することは良くあります。

改行の削減;

<ul><li>リスト項目1</li>
<li>リスト項目2</li></ul>

ソースの行数(引いてはバイト数=ファイルサイズ)を小さくするために、上のように書いても勿論構いません。

良くある誤りとして、ソースのインデントの積りで全角スペースやタブを挿入してしまう場合があります。 HTML 解釈装置にとっては、全角文字、タブは特殊記号のようなもので、特別扱いしなければならないので、解釈時に無視できません。

LI 要素の直前に全角スペースが挿入されている;

<ul>
 <li>リスト項目1</li>
 <li>リスト項目2</li>
</ul>

HTML 解釈装置にとっては、全角スペースは無視できませんので、上のソースは次のように記述されたのと同じように扱います;

<ul>
xx<li>リスト項目1</li>
xx<li>リスト項目2</li>
</ul>

HTML 文法としても明らかに誤りなので、このソースをどのように表示するかはブラウザの種類によります。

表示例;

テキスト・エディタでも、全角スペース一つは半角スペース二つと見た目上は区別できませんので、誤用しがちのようです。くれぐれも注意してください。

タグの途中で改行するのはあまり勧められません。特に、要素名の途中、「属性="属性値"」の途中では改行してはいけません。

許される例;

<blockquote cite="http://www.hoge.com/foo/"
  lang="en">

許されない例;

<block
  quote
  cite
  ="http://www.hoge.com/foo/"
  lang="en">

長さ

HTML では属性値に長さを指定することがあります。

  1. Pixels: (%Pixels;) の値は、スクリーンや紙などキャンバスに表示する際のピクセル数を表す整数である。従って、「 50 」という値は50 ピクセルを意味する。
  2. Length: (%Length;) の値は、 %Pixels;、または水平・垂直方向で利用可能な空間に対するパーセンテージ。従って、「 50% 」という値は、可能な空間の半分を意味する。
  3. MultiLength: (%MultiLength;) の値は、 %Length;、または相対指定である。この相対的な長さは、「 i* 」という形式で示す - 「 i 」は整数。

相対指定では、分割可能な空間について、 "*" のついた整数の比率に従って分配を受ける。値が "*" の場合、これは "1*" に等しい。

ピクセル値パーセント値を割り当て終えた残りが 60 ピクセルだったとする。 "*、2*、3*" という相対指定がある場合、 "1*" には 10 ピクセル、 "2*" には 20 ピクセル、 "1*" には 30 ピクセルが割り当てられる。

%MultiLength; は、 %Length; に相対指定を加えたものであり、 %Length; は、 %Pixels; にパーセント (%) 指定を加えたものであることに注意。

長さの値は大文字小文字の区別に無関係である。

HTML での色; %Color;

HTML では色を指定する属性があります。これらは全て廃止予定の非推奨属性ですから、避けられる限り CSS を利用すべきでしょう。

DTD では、色を指定する値は %Color; と云うパラメタ実体で現れます。大文字と小文字は区別されません。

色は、 HTML ではキーワードか、 RGB と云う形式で指定します。

16 色のキーワードと RGB 指定の対応表
#000000black #800000maroon #008000green #000080navy
#c0c0c0silver #ff0000red #00ff00lime #0000ffblue
#808080gray #800080purple #808000olive #008080teal
#ffffffwhite #ff00fffuchsia #ffff00yellow #00ffffaqua

RGB 指定で、 [0, 3, 6, 9, c, f] だけで指定した色を Web Safe Colors と呼びます。このように指定した色は、 Win. と Mac. で同じ色に表示される筈です。逆に云えば、それ以外の色は OS によって、表示色が少し異なる可能性があります。不思議なことに、 16 色のキーワードは、 Web Safe Colors からは外れています。

Web Safe Color を用いても、モニタの性能や設定によって、実際の発色は異なります。色盲者などを考慮して、アクセッシビリティには十分注意してください。


次に、 WWW が成功した最大の要因であるリンク・システムと、 URL に付いて紹介します。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO