HTML4 では、ほとんどの要素に lang, dir, style, title, id, class属性, それからスクリプトのイベント属性などを指定できるようになっています。これらの属性は非常に多くの要素に共通して用いられるものであるため、共通属性と呼ばれます。
HTML4 の大きな目玉の一つは、RFC2070 を統合し、国際化をはかったことです。これは i18n と呼ばれます。i18n と言うと何かのコード番号のようですが、ぜんぜん違います。RFC2070 を見ると……
This document is meant to address the issue of the
internationalization (i18n, i followed by 18 letters followed by n)
of HTML by extending the specification of HTML and giving additional
recommendations for proper internationalization support.
というわけです。internationalization という単語はやたらに長いので、i と n の間に 18 文字入っているということで i18n 。ですから、i18n は「いんたなしょなりぜーしょん」と発音すればいいわけです(べつに「あいじゅーはちえぬ」でも良いのですけれど)。「いちばん長い単語はなぁに? smilesさ。s と s の間に一マイルもあるだろ」というなぞなぞがありますが、それと同じ発想ですね。
i18n は、以下の二つの属性を含みます。lang属性と dir属性です。
属性 | 適用バージョン | 属性値 | 既定値 | 備考 |
|||
---|---|---|---|---|---|---|---|
lang | - | 2.x | - | 4.0 | 言語コード | (必須/依存) | 言語コードを指定。 |
dir | - | 2.x | - | 4.0 | (ltr | rtl) | (依存) | 書字方向 |
HTML2.x や HTML4 では、ほとんど全ての要素にこの属性が指定できます。要素の中に直接あるいは子要素を介してテキストを含むことが出来るものは、全てこの属性が指定できると考えて良いでしょう。
ある要素に lang の指定がない場合、親要素から継承されます。ですから、全ての要素の親となる HTML 要素に、文書全体の言語コードを指定しておくと良いでしょう。日本語なら lang="ja"
と指定します。
dir は書字方向の指定で、ltr(左から右)と rtl(右から左)の二種類が指定できます(残念ながら縦書きの指定はありません)。多くの言語は左から右に書かれますが、右から左に書かれる言語もあります。たとえばヘブライ語がそうです。たとえば、英語の中にヘブライ語を織り交ぜて紹介する場合、もしくはその逆の場合にこの属性が使われるでしょう。
HTML2.x や HTML4 では、ほとんどの要素に id, class属性を指定することができます。HTML4 では style属性も使うことができ、また、title 属性をほとんど全ての要素に指定することが出来ます。
id属性は、その要素に固有の ID をつけます。一つの文書内で同一の名前を付けることは出来ません。この属性値はスタイルシート、スクリプトなどで目標となる要素を指定する際に利用されます。また、他の要素のIDREF型属性の値として用いられます。
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
と言う具合に書かれています。SGML 的には name 型属性ですから大文字小文字は区別されないことになるはずですが、[CS] と書かれているので HTML 的には "Case Sensitive", すなわち大文字小文字を区別するようにも読めます。いずれにしても、
<span id="tiltowait">どかーん。</span> <span id="TILTOWAIT">ちゅどーん。</span>
のように、大文字小文字の違いしかない ID を設定するのは避けた方が良いでしょう。
class属性は、その要素にクラス名を与えます。IDと異なり、一つの文書内で同じクラス名を何度でも用いることが出来ますし、一つの要素に複数のクラス名をつけることもできます(スペースで区切って列挙します)。これは主にスタイルシートの目標として使われます。
スペースで区切って列挙するデータ型ですが、RFC2070(HTML2.x) では
CLASS
A space separated list of SGML NAME tokens. CLASS names
specify that the element belongs to the corresponding named
classes. It allows authors to distinguish different roles
played by the same tag. The classes may be used by style
sheets to provide different renderings as appropriate to
these roles.
と言う具合で SGML NAME token のリストとされていました。つまり 英数字と . - のみが使えましたが、HTML4 では
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
という具合に CDATA のリストとされていて、クラス名に使える文字種に制限はないようです。とは言え、互換性のことを考えて、英数字と . - のみにとどめておくのが無難でしょう。
style 属性は、ある要素に対して直接スタイル言語を作用させるのに用います。けれども、この方法はスタイルシートの利点をほとんど生かすことが出来ませんので、この属性の使用はあまりおすすめできません。
また、style 属性そのものにはスタイル言語の種類を指定することが出来ません。ですから、この属性を使う際には、ヘッダ内でスタイル言語の種類を規定しておく必要があります。具体的には、たとえば次のような記述をしておきます。
<HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>CSS sample</TITLE> </HEAD>
こうしておくことで、style 属性のスタイル言語が text/css として解釈されます。META指定のない文書で style 属性を使うのは文法違反です(text/css と見なして解釈するようにというお達しがありますが)。必ず指定してください。
title 属性はその要素にタイトルを付けます。この属性の値はチップヘルプの形で表示されたり、読み上げられたりすることが期待されます。読み上げで再現しにくい要素には、積極的にこの属性を使って補足情報をつけるようにしましょう。特に HR, FRAME などにはこの属性を指定することが強く推奨されています。
HTML4.0 ではスクリプトを使用した動的な文書を作成することができます。それに伴って、各要素にイベント属性を指定できるようになりました。
ある要素にイベント属性を指定しておくと、その要素の上で特定の状況が発生したときに、属性値として指定したスクリプトが実行されます。
たとえば、
<HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>JavaScript Sample</TITLE> </HEAD> …… <A href="http://foo.com/con/con/con" onmouseover="window.status="http://www.ne.jp/asahi/minazuki/bakera/"" onmouseout="window.status=""" >役立ちリンク</A>
とすると、アンカーにポインタを合わせたとき、ステータスバーに http://www.ne.jp/asahi/minazuki/bakera/ と表示されるかもしれません。
style 属性と同様、この属性を使う際にも META によるスクリプト言語の指定が必要です。これがない文書で script 属性を使うのは文法違反です。既定のスクリプト言語は特にありませんから、その属性は全く解釈されないかも知れません(いくつかのブラウザは親切に text/javascript と見なしてくれるかも知れませんが)。
HTML4.0 にあるイベント属性とその発生状況は以下の通りです。
イベント属性 | 発生状況 |
---|---|
onclick | クリックされたとき。 |
ondblclick | ダブルクリックされたとき。 |
onmousedown | ボタンが押し下げられたとき。 |
onmouseup | 押されていたボタンが離されたとき。 |
onmouseover | 要素の上にポインタ(カーソル)が重なったとき。 |
onmousemove | 要素の上でポインタ(カーソル)が動いたとき。 |
onmouseout | 要素の上にあったポインタ(カーソル)が離れたとき。 |
onkeypress | キーが打たれた(押されて、離された)とき。 |
onkeydown | キーが押し下げられたとき。 |
onkeyup | 押し下げられていたキーが離されたとき。 |
さらに、特定の要素には以下のようなイベントもあります。
イベント属性 | 要素 | 発生状況 |
---|---|---|
onload | BODY, FRAMESET | 文書全体を読み込み終えたとき。 |
onunload | BODY, FRAMESET | ウィンドウやフレームの中身が破棄されるとき。 |
onfocus | A, AREA, LABEL, INPUT, SELECT, TEXTAREA, BUTTON | フォーカスを得たとき。 |
onblur | A, AREA, LABEL, INPUT, SELECT, TEXTAREA, BUTTON | フォーカスを失ったとき。 |
onsubmit | FORM | フォーム送信が実行されたとき |
onreset | FORM | フォームがリセットされたとき |
onselect | INPUT, TEXTAREA | 入力欄のテキストが選択(範囲指定)されたとき |
onchange | INPUT, SELECT, TEXTAREA | フォーカスを失った時に、フォーカスを受けた時と値が変わっていた場合。 |
ブラウザによっては、ここに出ていないイベントも認識するものがあるようです。が、それらは一般的ではありません。