エントリー記事
非推奨要素と非推奨属性
HTML4.01及びXHTML1.0における文書型は3種類存在します。Strict(厳密型)はその仕様に厳密に従い、非推奨とされている要素や属性を使用することはできません。Transitional(移行型)及びFrameset(フレーム設定型)では、非推奨とされている要素や属性を使用することが許されています。
- 非推奨要素(*1)
- applet , basefont , center , dir , font , isindex , menu , s , strike , u
- 非推奨属性
- align(*2) , background , bgcolor , border(*3) , clear , compact , hspace , language , link(alink,vlinkを含む) , noshade , nowrap , size(*4) , start , text , type(*5) , value(*6) , version , vspace , width(heightを含む)(*7)
これらの要素及び属性の多くは見た目を指定するものであり、音声ブラウザや点字ブラウザ等の環境においては意味を為しません。代わりにスタイルシートを用いることが推奨されており、XHTML1.1において正式に廃止されました。
【注釈】文書型宣言
HTMLの仕様に従っている文書はその先頭(*1)に、従う文書型(DOCTYPE)を宣言する必要があります。ここではHTML4.01、XHTML1.0、XHTML1.1の文書型を紹介します。
- HTML4.01
- HTML4.01 Strict(厳密型)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML4.01 Transitional(移行型)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML4.01 Frameset(フレーム設定型)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
仕様の詳細につきましては、HTML 4.01 specification又はHTML 4.01 仕様書邦訳をご覧ください。
- HTML4.01 Strict(厳密型)
- XHTML1.0
- XHTML1.0 Strict(厳密型)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> - XHTML1.0 Transitional(移行型)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> - XHTML1.0 Frameset(フレーム設定型)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
仕様の詳細につきましては、XHTML 1.0 specification又はXHTML 1.0 仕様書翻訳をご覧ください。
- XHTML1.0 Strict(厳密型)
- XHTML1.1
- XHTML1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
仕様の詳細につきましては、XHTML 1.1 Recommendation又はXHTML 1.1 勧告翻訳をご覧ください。
- XHTML1.1
HTML4.01及びXHTML1.0にはそれぞれ3種類の文書型宣言があります。
- Strict(厳密型)
- W3Cの仕様に厳密に従っていることを宣言するものです。見栄えを指定するもの等、非推奨とされている要素や属性及びフレーム関連要素を使用することはできません。
- Transitional(移行型)
- 古いブラウザとの互換性を保つため、非推奨とされている要素や属性を使用することができます。
- Frameset(フレーム設定型)
- frameset要素を用いてフレームを指定する際に用います。フレーム関連要素はStrict(厳密型)で定義されていないため、中のhtmlファイルはTransitional(移行型)を宣言します。
HTML4.01及びXHTML1.0で非推奨とされている要素や属性は、XHTML1.1で正式に廃止されました。よって、XHTML1.1の文書型宣言はStrict(厳密型)のみです。
新しい視覚系ブラウザの多くは、文書型宣言を識別して表示モードを選択します。
- 標準モード
- W3Cの仕様に従った表示をします。
- 互換モード
- 古いブラウザと互換性のある表示をします。
通常、誤りのない文書型宣言をすれば標準モードで表示され、文書型宣言に誤りのある場合や文書型宣言が存在しない場合に互換モードで表示されます。しかし、標準モードで表示すべき文書型宣言であるにも関わらず互換モードで表示される場合があります。
- HTML4.01 TransitionalまたはHTML4.01 Framesetにおいてシステム識別子を省略すると、主要な視覚系ブラウザでは互換モードで表示されます(*2)。
システム識別子を省略せずに記述することで、標準モードで表示することができます。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - XHTMLにおいてXML宣言を記述すると、Micrsoft Internet Explorer 6では互換モードで表示されます。
可能ならば、XML宣言を省略することでIE6においても標準モードで表示することができます(*3)。<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
特にXML宣言を行う場合ブラウザによって表示モードが異なるため、標準モードと互換モードの違いを認識する必要があります。これらの違いは、主にスタイルシートの適用のされ方に顕著に見られます。
- ブロック要素の幅と高さ
CSSのwidth及びheightプロパティの適用のされ方が異なります。互換モードではpadding及びborder-widthの値を含むのに対し、標準モードではこれらの値を含みません。つまり、標準モードの方がpadding及びborder-widthの分だけ幅と高さが大きくなります(*4)。IE6で問題なく表示されるページをGecko系ブラウザ(*5)やOpera等で閲覧するとサイドバーが収まりきらずに落ちてしまう現象が起こるのはこのためです。
- ブロック要素の中央寄せ
- ブロック要素を中央寄せするには、左右のマージンをautoとします。
#all{ margin:5px auto 10px; }(*6)しかしIE6の互換モードは、この方法ではブロック要素を中央寄せしません。中央寄せするにはIE6のバグを利用します。
<body>(中央寄せされたボックスの中身)
<div class="all"></div>
</body>body{ text-align:center; }
#all{ margin:5px auto 10px; text-align:left; }text-alignプロパティは本来、ブロック要素に含まれるインライン要素の横方向の位置を指定するものであり、ブロック要素の横方向の位置を指定するものではありません。
ブロック要素とインライン要素
- ブロック要素
- 構造上の意味を持つ要素で、body要素の直接の子要素となります。一般的な視覚系ブラウザでは前後が改行されます。
h1〜h6 , p , address , ol , ul , dl , table , blockquote , form , fieldset , pre , hr , div
- インライン要素
- テキストに意味を与える要素で、body要素の直接の子要素にはなりません。一般的な視覚系ブラウザでは前後が改行されず、テキストと同等に扱われます。
em , strong , img , a , q , cite , code , var , kbd , samp , dfn , abbr , acronym , sup , sub , object , input , select , textarea , button , label , br , span
基本的には、ブロック要素の中にインライン要素を含みます。インライン要素の中にブロック要素を含むことはできません。