«FIVe3Dを試してみた | ホーム | Pixel Bender Toolkitを試してみた»
[Web制作]
【アリンコWeb標準】XHTMLの使ってよい要素・属性をガイドライン化しよう（1/2）
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点を修正・追記しました。
- 厳密にはXML宣言とDOCTYPE宣言は「XHTMLの要素」ではないため、要素一覧から外し、「XHTMLの文書宣言」としました。
- XML宣言省略可能な文字コードが「UTF-8」のみとなっていましたが、「UTF-16」の場合、またHTTPレスポンスヘッダーのContent-typeのcharsetに文字コードが設定されている場合も省略可に訂正しました。
フィードバックをくださった方々、ありがとうございました。
| タグ | 説明 | 使用の可否 | 代替方法 | 補足 |
|---|---|---|---|---|
| タグ | 説明 | 使用の可否 | 代替方法 | 補足 |
| 宣言 | ||||
<? xml ?> | XML宣言 | ○ | ||
<!DOCTYPE> | 文書型定義（DTD） | ○ | ||
| 要素名 | 説明 | 使用の可否 | 代替方法 | 補足 |
|---|---|---|---|---|
| 要素名 | 説明 | 使用の可否 | 代替方法 | 補足 |
| 文書構造 | ||||
<html>～</html> | 文書ルート | ○ | ||
<head>～</head> | 文書のヘッダ情報 | ○ | ||
<title>～</title> | 文書の文書タイトル | ○ | ||
<meta /> | 文書のメタ情報 | ○ | ||
<link /> | 文書の関連ファイル | ○ | ||
<base /> | 文書の基準URL | ○ | ||
<body>～</body> | 文書の本文 | ○ | ||
<div>～</div> | ブロック要素のグループ化 | ○ | ||
| 段落 | ||||
<p>～</p> | 段落 | ○ | ||
| 見出し | ||||
<h1>～</h1> | 見出し | ○ | ||
| センタリング | ||||
<center>～</center> | 要素およびテキストの中央揃え | × | CSSで代替margin-left:auto; | |
| リスト | ||||
<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> | 取消線 | × | 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> | 絶対・相対位置にレイヤ表示 | × | 代替方法なし | W3C非公認要素 |
<marquee>～</marquee> | テキストを流す | × | JavaScriptで代替 | W3C非公認要素 |
<nobr>～</nobr> | 改行禁止 | × | CSSで代替white-space:nowrap; | W3C非公認要素 |
<wbr /> | nobr要素内の改行候補位置 | × | 代替方法なし | W3C非公認要素 |
次回は、「XHTMLの属性の関するガイドライン」です。
トラックバック
このエントリーのトラックバックURL:
http://www.anthill.jp/mt/p-tb.cgi/375
コメント