• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

HTML to XHTML

提供: WordPress Codex 日本語版
移動先: 案内検索

この項目「HTML to XHTML」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。

XHTML は何であり何でないか

システムとしての WordPress は XHTML スクリプト言語で書かれた文書に基づいています。XHTML 1.0 (現在最も広くサポートされているバージョン。eXtensible Hyper Text Markup Language、拡張可能なハイパーテキストマークアップ言語の略) が W3C の推奨になったのは西暦2000年で、XHTML 2.0 が標準化されるまでの中継ぎとされていました。しかし8年が過ぎても XHTML 2.0 は標準になっていません (訳注: 2009年に策定が打ち切られました)。この文書では XHTML という用語を XHTML 1.0 を指すものとして使います。

XHTML はどちらも SGML と呼ばれた言語の後継である点で HTML にとてもよく似ています。しかし XHTML は、HTML よりもっと厳格な構文規則を持つスクリプト言語 XML の後継でもあり、その規則の一部を受け継いでいます。主に新しい MIME タイプの使用と新しい文法の追加という点で、XHTML は HTML と異なっています。以下にそれらの差異を説明します。

XHTML を使う理由

WordPress はすべての内部関数から XHTML を出力します。そのためすべてのテーマと、大部分のプラグインも同様に XHTML を出力します。ですから WordPress を使いたいなら、今こそが XHTML に取り組み学ぶべき時です。

XHTML と HTML の違い

HTML に慣れているなら、HTML の知識の大部分が XHTML でも通用することにホッとするでしょう。主な違いは、XHTML を使う Web ページ作者は従来よりも一貫性があり読みやすいコードを書く必要がある点です。しかし構文と文法に幾つか違いがあり、一部の HTML タグが廃止された、その程度です。HTML を知っていれば XHTML への乗り換えの容易さに驚くでしょう。そして XHTML の新しい規則はあなたを良いプログラマーに育てるでしょう !

XHTML の書き方

以下は XHTML の重要な要件と HTML との差異に関する簡単なチェックリストです。これは XHTML 言語を網羅したリファレンスではありませんリファレンスはこちらを見てください。

わかりやすさのため例では一部のコードを省略しています。

タグ、属性、値をすべて必ず小文字で書く

正しい例:

<a href="www.kilroyjames.co.uk" >

間違った例:

<A HREF="www.kilroyjames.co.uk" >

属性値を必ずクォートで囲む

正しい例:

<a href="www.kilroyjames.co.uk">

間違った例:

<a href=www.kilroyjames.co.uk>

タグの入れ子を正しく

正しい例:

<em>this emphasis just keeps getting <strong>stronger and stronger</strong></em>

間違った例:

<em>this emphasis just keeps getting <strong>stronger and stronger</em></strong>

XHTML 文書に必ず DOCTYPE 定義を付ける

DOCTYPE はあらゆる XHTML 文書の先頭に必ず登場すべき、威圧的に見えるコードです。

DOCTYPE タグの規則:

  • 文書の最初のタグでなければならない
  • DOCTYPE は事実上 XHTML 文書の一部ではないので閉じるスラッシュを付けない
  • DTD と呼ばれる有効な定義ファイルを指し示さなければならない。これは文書の解釈方法をブラウザーへ伝える
  • DOCTYPE タグを正しく書かなければ文書は分解され* (「タグスープ」と呼ばれる HTML の破片) 検証できなくなる。

* I am, of course, perfectly serious...


XHTML 1.0 文書は Strict, Transitional, そして Frameset の3種類あります。文書を「Strict」の検証に通せるならそうしましょう。しかし一部のレガシーなタグと属性は Strict では許されず、代わりに「Transitional」を使うことができます。

参考1: WordPress を Strict で検証すると問題が生じるかもしれません。バージョン2.6.2の場合、内部で生成される <form> 要素が "name" 属性を使うからです。つまり <input name="my_button" /> のように。これは Strict DTD では許されません。

参考2: Transitional DTD はほとんどのブラウザーが「標準」モードから外れます。ブラウザーが標準モードでなければ、web ページを異なるブラウザーで一貫性を持たせて表示するのはとてもトリッキーです。DOCTYPE タグを掘り下げるにつれ複雑さが増すので、ここで詳細は説明しませんが、最高の結果を得るには以下の何れかを使いましょう、中でも1番目 (Strict) がお勧めです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML タグに必ず XMLNS 属性を含める

「XML 名前空間」属性を理解する必要はありませんが、すべての XHTML 文書に必要であることだけは知っておきましょう。これは書き方の例です:

<html xmlns="http://www.w3.org/1999/xhtml">

HTML, HEAD, TITLE および BODY タグを使った適切な形式の文書

HTML なら上記のタグをまったく含まない web ページを書けます。しかし XHTML は違います。上記のタグを必ず含み、入れ子と順番が正しくなければなりません。このように (DOCTYPE は省略):

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title></title>
 </head>
 
 <body>
  <p>   
    See how the TITLE must be placed in the document HEAD – the TITLE is considered 
to be a "required child" element of the HEAD.
Notice that the HEAD must also appear before the document BODY.
Notice also how both the HEAD and the BODY must be contained
within the HTML tag. Again, HEAD and BODY are "required child"
elements of the HTML tag. Finally, notice that this text is
written within a <p>paragraph</p> tag; in XHTML you may
not write text directly in the BODY tag without using a suitable
container tag, such as <p> or <div>. </p> </body> </html>

独立タグでも必ず正しく閉じる

<p>Mary had a little lamb
<p>It's fleece was white as snow

上のコードは閉じる </p> タグがないので有効な XHTML ではありません。次は正しい例です。

<p>Mary had a little lamb</p>
<p>It's fleece was white as snow</p>

XHTML では単独のタグも閉じなければなりません - どのタグも開いたままではダメです。

<p>
 Mary had a little lamb <br>
 It's fleece was white as snow
</p>

上の例は <br> タグが閉じていないので誤りです。<br><hr> のような単独のタグを閉じるには、末尾の > の直前にスラッシュを入れて <br /><hr /> (スペースはオプション) のようにします。上の例を正しく書くと:

<p>
 Mary had a little lamb <br />
 It's fleece was white as snow
</p>

これが正しい XHTML です。

属性の最小化は禁止

HTML では属性をキーワードのように連続させることができます。例えば <dl compact> のように書き、これを属性の最小化 (attribute minimisation) と呼びます。 これは XHTML では許されず、属性と値は明示しなければなりません。例えば <dl compact="compact"> のように。

ID および NAME 属性

HTML では ID と NAME 属性を置き換えて使うことが許されていました。XHTML では NAME 属性が正式に廃止され使えません。NAME 属性を使おうと思ったところではどこでも必ず ID を使わなければなりません。

正しい HTML

<input type="submit" name="s" value=" Search " >

正しい XHTML バージョン

<input type="submit" id="s" value=" Search " >

STYLE はすべて HEAD に入れる

XHTML は STYLE 宣言を文書の body に含めることを許しません。必ず HEAD に置かなければなりません。

実体参照

文字の & は &amp; と書きましょう。& と書くと実体参照の一部と見なされます。例えば &reg; はシンボル ® の実体参照です。 従って M&S は &S が実体参照ではないので無効な XHTML です。正しくは M&amp;S と書きます。

まとめ

先ほど触れたように、この記事は完全なリファレンスではありません。ですがとても短時間に XHTML を使えるようになるには充分と思います。幸運を !

XHTML の問題点

XHTML を適切に使うには新しい MIME タイプ "application/xhtml+xml" を用いる必要がありますが、ほとんどの人は知りません。 MIME タイプを簡単に言うと、どんな種類のドキュメントが送られるかを web サーバーがブラウザーへ伝える説明です。例えば JPG イメージは MIME タイプ "image/jpeg"、HTML ドキュメントは MIME タイプ "text/html" として送られます。 XHTML ドキュメントを MIME タイプ "text/html" として送ると、それは HTML としてパースおよび検証されます。これは期待される XHTML ではありません。XHTML を使いたければ正しい MIME タイプを使わなければなりません。そうしなければ非標準の HTML を使ったことになってしまいます。この問題を避けて標準に準拠したコードを出力するには XHTML to HTML wordpress プラグイン を使うことができます。

HTML5

XHTML の開発には解決困難と思われる問題 (主に XHTML 2 が旧バージョンの XHTML とも HTML とも非互換であることと、MIME TYPE の課題) があります。そのため Mozilla (Firefox), Apple (Safari), Opera, Microsoft (Internet Explorer) および幾つかの重要な Internet プレーヤーがサポートする別の標準規格が、古い HTML 4.01 標準の新たな後継として期待されています。

HTML5 は2008年1月に working draft (草案) として W3C に承認され、2012年12月に candidate recommendation (勧告候補) になりました。

関連項目

最新英語版: WordPress Codex » HTML to XHTML最新版との差分