株式会社antsのホームページへようこそ。
Home  »  Lab.   »   【アリンコWeb標準】XHTMLの使ってよい要素・属性をガイドライン化しよう（1/2）

【アリンコWeb標準】XHTMLの使ってよい要素・属性をガイドライン化しよう（1/2）

19
May

2008
0
Posted in Lab. By Yuko Tsutsumi

Webページは、採用した文書型定義（以下、「DTD」）に基いて作成します。
XHTMLのDTDには、2つのバージョンと3つのタイプがあります。

  • XHTML 1.0 － Strict（厳密型）／Tranditional（移行型）／Frameset（フレーム型）
  • XHTML 1.1 － Strict（厳密型）のみ

更にこれらのバージョンやタイプによって廃止されり、使ってはいけない要素・属性があります。

非推奨要素・属性 「XHTML 1.0 Strict」および「XHTML 1.1」で廃止された要素・属性のため「XHTML 1.0 Tranditional」、「XHTML 1.0 Frameset」での使用が推奨されていない要素・属性。
CSS推奨要素・属性 非推奨でも廃止されてもいませんが、文書構造と視覚表現分離のためにCSSで代替した方がよい要素・属性。
W3C非公認要素・属性 ブラウザが独自に拡張した要素およびその属性のため、一部のブラウザでしか動作しないため、使用しない方がよい要素・属性。

これらの要素・属性をどうするかルールがないと、「DTDでb要素やi要素が定義されているから使っていいのでは？」
「DTDで定義されていても、装飾目的でテキストを太字や斜体にするときは、スタイルシートを使用すべきだよ。」
といったように、各人によってマークアップに対する考え方が異なるため現場の混乱を招いてしまいます。

そのため、DTDごとに使ってよい要素・属性、使ってはいけない要素・属性の代替方法を、明確にルール化しておくと、作業効率がアップします。
それでは、「要素」と「属性」に分けて2回にわたってXHTMLでマークアップする際に使用してよい要素・属性のまとめをご紹介します。

XHTMLの文書宣言と要素に関するガイドライン

『XHTMLの文書宣言と要素に関するガイドライン』を1枚の表にまとめてみました。
「使用の可否」を見れば、どのDTDで使用してよいかが分かるようになっています。

使用の可否 説明
○ 全てのDTDで使用可
× 全てのDTDで使用不可
T 「XHTML 1.0 Tranditional」で使用可
F 「XHTML 1.0 Frameset」で使用可

アリンコWeb標準では、どのDTDを採用してもあまりコーディングの差異がないように、非推奨要素、CSS推奨要素、W3C非公認要素（embed要素を除く）は使用せず、それぞれ適切な代替方法をとっています。

例えば、b要素やi要素などの視覚効果に関する要素は、DTDで定義されていても、CSSで代替するなどのルールを設けており、各DTDにおける大きな違いは下記の2点にとどまっています。

  • 「XHTML 1.0 Tranditional」と「XHTML 1.0 Frameset」の違い
    →　フレームが使用できるか否か。
  • 「XHTML 1.0 Tranditional」と「XHTML 1.0 Strict」および「XHTML 1.1」の違い
    →　applet要素とiframe要素が使用できるか否か。

【追記】一部、記事の内容に誤りがあったため、下記2点を修正・追記しました。

  1. 厳密にはXML宣言とDOCTYPE宣言は「XHTMLの要素」ではないため、要素一覧から外し、「XHTMLの文書宣言」としました。
  2. XML宣言省略可能な文字コードが「UTF-8」のみとなっていましたが、「UTF-16」の場合、またHTTPレスポンスヘッダーのContent-typeのcharsetに文字コードが設定されている場合も省略可に訂正しました。

フィードバックをくださった方々、ありがとうございました。

≪文書宣言に関するガイドライン≫
タグ 説明 使用の可否 代替方法 補足
タグ 説明 使用の可否 代替方法 補足
宣言
<? xml ?> XML宣言 ○ 文字コードが「UTF-8」の場合のみ省略可。文字コードが「UTF-8」、「UTF-16」の場合、HTTPレスポンスヘッダーのContent-typeのcharsetに文字コードが設定されている場合のみ省略可。 　
<!DOCTYPE> 文書型定義（DTD） ○ 　 　

≪XHTMLの要素に関するガイドライン≫
要素名 説明 使用の可否 代替方法 補足
要素名 説明 使用の可否 代替方法 補足
文書構造
<html>～</html> 文書ルート ○ 　 　
<head>～</head> 文書のヘッダ情報 ○ 　 　
<title>～</title> 文書の文書タイトル ○ 　 　
<meta /> 文書のメタ情報 ○ 　 　
<link /> 文書の関連ファイル ○ 　 　
<base /> 文書の基準URL ○ 　 　
<body>～</body> 文書の本文 ○ 　 　
<div>～</div> ブロック要素のグループ化 ○ 　 　
段落
<p>～</p> 段落 ○ 　 　
見出し
<h1>～</h1>
<h2>～</h2>
<h3>～</h3>
<h4>～</h4>
<h5>～</h5>
<h6>～</h6>		 見出し ○ 　 　
センタリング
<center>～</center> 要素およびテキストの中央揃え × CSSで代替
margin-left:auto;
margin-right:auto;
text-align:center;		 　
リスト
<ul>～</ul> 箇条書きリスト ○ 　 　
<ol>～</ol> 番号付きリスト ○ 　 　
<li>～</li> リストの項目 ○ 　 　
<dl>～</dl> 定義リスト ○ 　 　
<dt>～</dt> 定義リストの項目 ○ 　 　
<dd>～</dd> 定義リストの項目の内容 ○ 　 　
<menu>～</menu> 箇条書きリスト × ul要素で代替 非推奨要素
<dir>～</dir> 箇条書きリスト × ul要素で代替 非推奨要素
リスト
<address>～</address> メールアドレス、コピーライト表記など ○ 　 　
水平線
<hr /> ブロック要素の区切り線 ○ 　 　
整形済みテキスト
<pre>～</pre> 整形済みテキスト ○ 　 　
ハイパーテキスト
<a>～</a> アンカー、リンク ○ 　 　
引用
<blockquote>～</blockquote> ブロックレベルの引用 ○ 　 　
<q>～</q> インラインレベルの引用 ○ 　 　
<cite>～</cite> 引用元 ○ 　 　
編集
<del>～</del> 削除した文章であることを示す ○ 　 　
<ins>～</ins> 追加した文章であることを示す ○ 　 　
インライン要素
<span>～</span> インライン要素のグループ化 ○ 　 　
<bdo>～</bdo> テキストの表記方法 ○ 　 　
<br /> 強制改行 ○ 　 　
<em>～</em> 強調 ○ 　 　
<strong>～</strong> 論理的な強調 ○ 　 　
<dfn>～</dfn> 定義語 ○ 　 　
<abbr>～</abbr> 省略語（単語の先頭の頭文字を組合せて、そのまま頭文字を発音する省略語 ex. XHTML、PHP） ○ 　 　
<acronym>～</acronym> 頭字語（単語の先頭の頭文字を組合せてつづり読みにし、ひとつの単語として発音する省略語 ex. Ajax、NASA） ○ 　 　
<sub>～</sub> 下付き文字 ○ 　 　
<sup>～</sup> 上付き文字 ○ 　 　
<i>～</i> 斜体にする × CSSで代替
font-style:italic;		 CSS推奨要素
<b>～</b> 太字にする × CSSで代替
font-weight:bold;		 CSS推奨要素
<big>～</big> 文字を大きくする × CSSで代替
font-size:larger;		 CSS推奨要素
<small>～</small> 文字を小さくする × CSSで代替
font-size:smaller;		 CSS推奨要素
<tt>～/tt> 等幅フォントにする × CSSで代替
font-family:monospace;		 CSS推奨要素
<basefont /> 基準フォントサイズ × CSSで代替（body要素のfont-sizeプロパティ） 非推奨要素
<font>～</font> フォント × CSSで代替（fontプロパティ） 非推奨要素
<s>～</s>
<strike>～</strike>		 取消線 × CSSで代替
text-decoration:line-through;		 非推奨要素
<u>～</u> 下線 × CSSで代替
text-decoration:line-through;		 非推奨要素
プログラム
<code>～</code> スクリプトのソースコード ○ 　 　
<var>～</var> プログラムの変数、引数 ○ 　 　
<samp>～</samp> スクリプトの出力結果のサンプルテキスト ○ 　
<kbd>～</kbd> キーボードの入力テキスト ○ 　 　
オブジェクト
<object>～</object> オブジェクトの埋め込み ○ 　 　
<param /> オブジェクトに渡すパラメータ ○ 　 　
<applet>～</applet> JavaアプレットのWebページ埋め込み TF XHTML 1.0 Strict、XHTML 1.1の場合は、object要素で代替 非推奨要素
クライアントサイド イメージマップ
<map>～</map> イメージマップの定義 ○ 　 　
<area /> イメージマップの領域 ○ 　 　
画像
<img /> 画像の埋め込み ○ 　 　
フォーム
<form>～</form> フォームの定義 ○ 　 　
<label>～</label> ラベル ○ 　 　
<input /> 入力要素 ○ 　 　
<select>～</select> プルダウンメニュー ○ 　 　
<optgroup>～</optgroup> プルダウンメニューの選択肢のグループ化 ○ 　 　
<option>～</option> プルダウンメニューの選択肢の ○ 　 　
<textarea>～</textarea> 複数行テキスト入力欄 ○ 　 　
<fieldset>～</fieldset> フォーム要素のグループ化 ○ 　 　
<legend>～</legend> フォーム要素のグループのタイトル ○ 　 　
<button>～</button> 汎用ボタン ○ 　 　
<isindex /> キーワード検索入力欄 × form要素とinput要素で代替 非推奨要素
表（テーブル）
<table>～</table> 表の定義 ○ 　 　
<caption>～</caption> 表のタイトル ○ 　 　
<colgroup>～</colgroup> 表の行の構造的なグループ化 ○ 　 　
<col /> 表の行の非構造的なグループ化 ○ 　 　
<thead>～</thead> 表のヘッダ部 ○ 　 　
<tfoot>～</tfoot> 表のフッタ部 ○ 　 　
<tbody>～</tbody> 表の本体 ○ 　 　
<tr>～</tr> 行グループ ○ 　 　
<th>～</th> 見出しセル ○ 　 　
<td>～</td> データセル ○ 　 　
スクリプト／スタイルシート
<script>～</script> 外部スクリプトファイルの読み込み、スクリプトの記述 ○ 　 　
<noscript>～</noscript> スクリプト無効ユーザ向け代替テキスト ○ body要素内のみ記述可 　
<style>～</style> 外部スタイルシートの読み込み、スタイルシートの記述 ○ 　 　
フレーム
<frameset>～</frameset> フレームの分割方法の定義 F XHTML 1.0 Framesetのみ使用可 　
<frame /> frameset要素で分割した各フレームの定義 F XHTML 1.0 Framesetのみ使用可 　
<noframes>～</noframes> フレーム未対応ユーザ向け代替テキスト F XHTML 1.0 Framesetのみ使用可 　
<iframe>～</iframe> インラインフレーム TF XHTML 1.0 Strict、XHTML 1.1の場合は、object要素で代替 非推奨要素
W3C非公認要素
<bgsound /> BGMの埋め込み × object要素＋embed要素で代替 W3C非公認要素
<blink>～</blink> テキスト点滅 × JavaScriptで代替 W3C非公認要素
<embed>～</embed> オブジェクトの埋め込み ○ object要素と併用（単独使用不可） W3C非公認要素
<layer>～</layer>
<ilayer>～</ilayer>
<nolayer>～</nolayer>		 絶対・相対位置にレイヤ表示 × 代替方法なし W3C非公認要素
<marquee>～</marquee> テキストを流す × JavaScriptで代替 W3C非公認要素
<nobr>～</nobr> 改行禁止 × CSSで代替
white-space:nowrap;		 W3C非公認要素
<wbr /> nobr要素内の改行候補位置 × 代替方法なし W3C非公認要素

次回は、「XHTMLの属性の関するガイドライン」です。

Related Posts

Written by Yuko Tsutsumi