第2回目は、XHTMLの属性に関するガイドラインです。
XHTMLの属性に関するガイドライン
要素には、一般的な属性や要素固有の属性などがあります。
これらの属性のうち、「XHTML1.0 Strict」または「XHTML 1.1」で廃止された要素のことを「非推奨属性」といいます。
またアリンコWeb標準では、“非推奨属性ではないが視覚表現に関する属性でCSSで代替した方がよい属性”を「CSS推奨属性」としました。
将来的に「XHTML 1.0 Strict」や「XHTML 1.1」への移行を視野に入れるなら、非推奨属性は使わず適切な代替方法をとり、視覚表現に関する属性はCSSで代替し、文書構造と視覚表現を完全に分離しておきましょう。
しかし、サイトの仕様によっては、非推奨属性を使うケースがあります。
例えば、「外部リンクは別窓表示、内部リンクは同窓表示にする」仕様の場合、外部リンクのa要素のtarget属性に”_blank”を指定したり、「古いブラウザに対応する」仕様の場合、“a要素のid属性＋name属性”（アンカー）、“script要素のtype属性＋language属性”など、非推奨属性を併用することがあります。
非推奨要素を「XHTML1.0 Strict」および「XHTML 1.1」で使用すると、動作に問題がなくてもvalidではありません。
そのため非推奨属性を使用する場合は、フレームでないページの場合は「XHTML 1.0 Tranditional」、フレームを使用したページの場合は「XHTML 1.0 Frameset」を採用する必要があります。
XHTMLの非推奨・CSS推奨属性一覧
下記は、XHTMLの「非推奨属性」と「CSS推奨属性」をまとめた一覧表です。
「非推奨属性」には適切な代替方法、「CSS推奨属性」にはCSSでの代替方法、DTDごとの注意事項などは補足に掲載しています。
適切な代替方法がない属性は「代替方法なし」となっています。
| 属性名 | 説明 | 代替方法 | 補足 | 使用 |
|---|---|---|---|---|
| 属性名 | 説明 | 代替方法 | 補足 | 使用 |
| 全要素 | ||||
lang |
言語コード | xml:lang属性で代替。 |
【XHTML 1.0】 lang属性とxml:lang属性を併用。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">【XHTML 1.1】 xml:lang属性のみ。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
非推奨 |
| a要素 （ハイパーテキスト） | ||||
name属性 |
アンカー名 | a要素のid属性で代替。 |
【XHTML 1.0】 古いブラウザ対応のためにname属性とid属性の併用可。 <a name="anc" id="anc">【XHTML 1.1】 id属性のみ。 <a id="anc">、<h2 id="anc">
|
非推奨 |
target属性 |
リンク先の開き方 | 別窓表示（_blank）はJavaScriptで代替。 | ※a要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 | 非推奨 |
| base要素 （文書の基準URL） | ||||
target属性 |
リンク先の開き方 | 代替方法なし | ※base要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 | 非推奨 |
| body要素 （文書の本文） | ||||
alink属性 |
アクティブ時のリンク色 | CSSで代替（a要素のcolorプロパティ） | a:active { |
非推奨 |
background属性 |
背景画像 | CSSで代替（body要素のbackgroundプロパティ） | body { |
非推奨 |
bgcolor属性 |
背景色 | CSSで代替（body要素のbackground-colorプロパティ） | body { |
非推奨 |
link属性 |
通常のリンク色 | CSSで代替（a:hover擬似クラスのcolorプロパティ） | a { |
非推奨 |
text属性 |
文字色 | CSSで代替（body要素のcolorプロパティ） | body { |
非推奨 |
vlink属性 |
訪問済みリンク色 | CSSで代替（a:visited擬似クラスのcolorプロパティ） | a:visited { |
非推奨 |
| br要素 （強制改行） | ||||
clear属性 |
回り込み解除 | CSSで代替（clearプロパティまたはclearfixハック） |
●clearプロパティbr.clr {●clearfixハック .clearfix:after {
|
非推奨 |
| caption要素 （表のタイトル） | ||||
align属性 |
左右整列位置 | CSSで代替（caption-sideプロパティ） | ●要素の上揃え、下揃え、左揃え、右揃えcaption { |
非推奨 |
| div要素 （ブロック要素のグループ化） | ||||
align属性 |
左右整列位置 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ） | ●要素のセンタリングdiv {●要素内のテキストおよび要素の左揃え、センタリング、右揃えdiv { |
非推奨 |
| dl要素 （定義リスト） | ||||
compact属性 |
コンパクト表示 | 代替方法なし | ※dl要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 | 非推奨 |
| form要素 （フォームの定義） | ||||
name属性 |
要素の名前 | id属性で代替 |
【XHTML 1.0】 古いブラウザ対応のためにname属性とid属性の併用可。 <form action="action="search.cgi" method="post" name="frm" id="frm">【XHTML 1.1】 id属性のみ。 <form action="search.cgi" method="post" id="frm">
|
非推奨 |
target属性 |
リンク先の開き方 | 別窓表示（_blank）はJavaScriptで代替。 | ※form要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 | 非推奨 |
| h1～h6要素 （見出し） | ||||
align属性 |
左右整列位置 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ） | ●要素のセンタリングh1 {●要素内のテキストおよび要素の左揃え、センタリング、右揃えh1 { |
非推奨 |
| hr要素 （ブロック要素の区切り線） | ||||
align属性 |
左右整列位置 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ） | ●要素のセンタリングhr { |
非推奨 |
noshade属性 |
区切り線に影を付けない | CSSで代替（borderプロパティ） | hr {※<hr noshade=”noshade” />は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 |
非推奨 |
size属性 |
区切り線の太さ | CSSで代替（borderプロパティ、heightプロパティ） | hr { |
非推奨 |
width属性 |
区切り線の幅 | CSSで代替（heightプロパティ） | hr { |
非推奨 |
| html要素 （文書ルート） | ||||
version属性 |
HTML文書のバージョン番号 | 代替方法なし | ※html要素のversion属性は、DTD（文書型宣言）があるので不要。 | 非推奨 |
| img要素 （画像の埋め込み） | ||||
align属性 |
左右整列位置 | CSSで代替（floatプロパティまたはvertical-alignプロパティ） | ●要素の左揃え、右揃えimg {●要素の上揃え、上下中央揃え、下揃えimg { |
非推奨 |
border属性 |
枠線 | CSSで代替（borderプロパティ） | img { |
非推奨 |
hspace属性 |
左右外余白 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ） | img { |
非推奨 |
name属性 |
要素の名前 | id属性で代替 |
【XHTML 1.0】 古いブラウザ対応のためにname属性とid属性の併用可。 <img id="pic" name="pic" src="photo.jpg" alt="写真" />【XHTML 1.1】 id属性のみ。 <img id="pic" src="photo.jpg" alt="写真" />
|
非推奨 |
vspace属性 |
上下外余白 | CSSで代替（margin-topプロパティ、margin-bottomプロパティ） | img { |
非推奨 |
| input要素 （入力要素） | ||||
align属性 |
左右整列位置 | CSSで代替（floatプロパティまたはvertical-alignプロパティ） | ●要素の左揃え、右揃えinput {●要素の上揃え、上下中央揃え、下揃えinput { |
非推奨 |
| legend要素 （フォーム要素のグループのタイトル） | ||||
align属性 |
左右整列位置 | 代替方法なし | ●要素の左揃え、右揃えlegend {●要素の上揃え、下揃えlegend { |
非推奨 |
| li要素 （リストの項目） | ||||
type属性 |
リストマーク | CSSで代替（list-style-typeプロパティ） | li { |
非推奨 |
value属性 |
リスト項目の値 | 代替方法なし | – | 非推奨 |
| link要素 （文書の関連ファイル） | ||||
target属性 |
リンク先の開き方 | 代替方法なし | ※link要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 | 非推奨 |
| map要素 （イメージマップの定義） | ||||
name属性 |
要素の名前 | id属性で代替 |
【XHTML 1.0】 古いブラウザ対応のためにname属性とid属性の併用可。 <map id="umap" name="umap">【XHTML 1.1】 id属性のみ。 <map id="umap">
|
非推奨 |
| object要素 （オブジェクトの埋め込み） | ||||
align属性 |
左右整列位置 | CSSで代替（floatプロパティまたはvertical-alignプロパティ） | ●要素の左揃え、右揃えobject {●要素の上揃え、上下中央揃え、下揃えobject { |
非推奨 |
border属性 |
枠線 | CSSで代替（borderプロパティ） | object { |
非推奨 |
hspace属性 |
左右外余白 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ） | object { |
非推奨 |
vspace属性 |
上下外余白 | CSSで代替（margin-topプロパティ、margin-bottomプロパティ） | object { |
非推奨 |
| ol要素 （番号付きリスト） | ||||
compact属性 |
コンパクト表示 | 代替方法なし | ※ol要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 | 非推奨 |
start属性 |
開始番号 | 代替方法なし | ※ol要素のstart属性は、XHTML 1.0 Tranditional/Framesetで使用可だが非推奨属性のため使用しない。 | 非推奨 |
type属性 |
リストマーク | CSSで代替（list-style-typeプロパティ） | ol { |
非推奨 |
| p要素 （段落） | ||||
align属性 |
左右整列位置 | CSSで代替（margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ） | ●要素のセンタリングp {●要素内のテキストおよび要素の左揃え、センタリング、右揃えp { |
非推奨 |
| pre要素 （整形済みテキスト） | ||||
width属性 |
要素の幅 | CSSで代替（widthプロパティ） | pre { |
非推奨 |
| script要素 （外部スクリプトファイルの読み込み、スクリプトの記述） | ||||
language属性 |
言語 | type属性で代替 |
【XHTML 1.0 Transitional/Frameset】 古いブラウザ対応するためにtype属性とlanguage属性の併用可。 <script type="text/javascript" language="JavaScript">【XHTML 1.0 Strict、XHTML 1.1】 type属性のみ。 <script type="text/javascript">
|
非推奨 |
| table要素 （表の定義） | ||||
align属性 |
左右整列位置 | CSSで代替（floatプロパティまたはmargin-leftプロパティ＋margin-rightプロパティ） | ●要素の左揃え、右揃えtable {●要素のセンタリングtable { |
非推奨 |
bgcolor属性 |
背景色 | CSSで代替（background-colorプロパティ） | table { |
非推奨 |
border属性 |
枠線 | CSSで代替（table要素・th要素・td要素のborderプロパティ、border-collapseプロパティ） | table {※table要素のborder属性は、XHTML1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
cellpadding属性 |
セルの内余白 | CSSで代替（th要素・td要素のpaddingプロパティ） | th, td {※table要素のcellpadding属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
cellspacing属性 |
セルの外余白 | CSSで代替（border-spacingプロパティ） | table {※table要素のcellspacing属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
frame属性 |
表の外枠の表示形式 | CSSで代替（borderプロパティ） | table {※table要素のframe属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
rules属性 |
行・列の線の引き方式 | CSSで代替（thead、tbody、colgroup、col、tr要素のborderプロパティ） | thead,tbody,colgroup,col,tr {※table要素のrules属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
width属性 |
表の幅 | CSSで代替（widthプロパティ） | table {※table要素のwidth属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
| th要素 （見出しセル）、td要素 （データセル） | ||||
align属性 |
セル内の左右整列位置 | CSSで代替（text-alignプロパティ） | ●セル内のテキストおよび要素の左揃え、センタリング、右揃えth, td {※th要素およびtd要素のalign属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
bgcolor属性 |
セルの背景色 | CSSで代替（background-colorプロパティ） | th, td { |
非推奨 |
height属性 |
セルの高さ | CSSで代替（heightプロパティ） | th, td { |
非推奨 |
nowrap属性 |
セル内のテキストの折り返し | CSSで代替（white-spaceプロパティ） | th, td { |
非推奨 |
valign属性 |
セル内の上下整列位置 | CSSで代替（vertical-alignプロパティ） | ●セル内のテキストおよび要素の上揃え、上下中央揃え、下揃えth, td {※th要素およびtd要素のvalign属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。 |
CSS推奨 |
width属性 |
セルの幅 | CSSで代替（widthプロパティ） | th, td { |
非推奨 |
| tr要素 （行グループ） | ||||
bgcolor属性 |
行グループの背景色 | CSSで代替（background-colorプロパティ） | tr { |
非推奨 |
| ul要素 （箇条書きリスト） | ||||
compact属性 |
コンパクト表示 | 代替方法なし | ※ul要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 | 非推奨 |
type属性 |
リストマーク | CSSで代替（list-style-typeプロパティ） | ul { |
非推奨 |
2回にわたって、XHTMLの要素・属性のガイドラインをご紹介してきました。
Web制作に関わる社内外の人々の共通認識となるガイドラインを作成しておくと、コーディングの統一化や作業効率化が図れます。
一覧やリスト化しておけば、DTD移行時やソース確認時などにも活用できます。
さて次回は、「XHTMLの書式と記述のルール」です。
