2009/12－2023/11/25

HTML も XML 形式で書いておくと便利かも

追記 (2021)

1) XML 形式で書かれた HTML と 2) XHTML はまったく別物です。

1) XML 形式で書かれた HTML
  XML フォーマットを満たすだけの HTML です。
  2) よりも大分ルーズです。
  XML ツールで HTML ファイルを処理できるメリットがあります。

2) XHTML
  1) に加えて、XHTML の文法 (DTD) を満たすこと。
  1) よりも厳格な制限が付いてきます。
  現在 (2010年代後半) は HTML5 時代になったので、XHTML は廃れています。

XML では 1) と 2) の違いは下のような用語を使います。

well-formed (整形済み)
XML のフォーマットを満たす。プログラミング言語風に言うと、文法エラーが出ない程度の水準を満たすソースコードに相当します。でも中身が正しいかどうかは別の問題です。
valid (妥当)
DTD などの文法的にも妥当。文法エラーがないだけでなく、データの構成・構造、値の妥当性も問題がない水準になります。

上の話の中ではルーズな HTML は文法エラーだらけぐらいの水準になります・・・。

XHTML では要素の親子関係など細かいルールがある

例えば、XHTML では body の直下にいきなりテキストを置くことはできません。 body の直下には p や ul や table などのブロック要素しか置けません。満たさない場合は文法エラーになります。

下は XHTML 的には文法エラーです。

<body>
いきなりテキスト。
<span>body 直下にインライン要素も誤り</span>
</body>

HTML5 では上のようなルールまでは気にしません。

参考で HTML5 でも似たような話があります。例えば p タグの中に div や figure などのタグを入れることはできません。入れてもエラーにはなりませんが、書いた人の期待した動作にはなりません。表示が期待したとおりにならない、 CSS の設定がうまく反映されないなどのトラブルが起こります。
p 要素内にブロック要素を入れない

● HTML5 の p タグ。誤りの例

<p>
pタグの中
    <div>
    div を pタグの中に入れたつもり。
    実際は p の子要素にはならない。
    </div>
</p>

XHTML では上のような誤りを DTD のチェックツールでチェックすることができます。気づきにくい書き誤りを簡単に見つけることができます。

いろいろ (2009)

XHTML ではない HTML を書く場合でも、 XML フォーマットを満たすように書いておくと後々便利かもしれません。 XML フォーマットはガチガチの規格になっている分、書き誤りのチェックや HTML 内のテキストの書き換えなどの操作が楽になります。

XML データを編集するツールはたくさんあるので、大量のHTMLファイルの title を書き換えるとか、特定のタグの情報を抽出したり、置換したり、追加したりするといった処理がとても容易になります。 XML フォーマットを満たさない HTML だと、この種の抽出処理や書き換え作業はとても面倒になるかトリッキーで危ないものになります。このあたりは正規表現の処理の話などを眺めてください・・・。
JavaScript 文字処理

正規表現の話を聞いてめまいがしたら (？)、もうちょっとマシな道具があります・・・それが XML です。

&xxx; の文字に注意

HTML の XML 化にも難点があって、 HTML で使う   © などの表記（エンティティ Entity と呼びます）は XML には定義されていません。このような文字列を含む HTML を XML とみなして読むと & の部分で XML パースエラーが出ます。

● XML で定義されているエンティティ
  HTML を XML として読ませても問題ない文字列。

正常   対応する文字   参考:10進数表記
----------------------------------------------
&quot;  "             &#34;
&lt;    <             &#60;
&gt;    >             &#62;
&amp;   &             &#38;

&#数字;  各種文字コード

● XML の定義にはないエンティティ
  HTML を XML として読ませるとエラーになる文字列の例。
  &#数字; の表記であればエラーにならない。

エラー  10進数   16進数  文字と意味
----------------------------------------------
&nbsp;  &#160;   &#xA0;     No-Break Space, ノーブレークスペース
&copy;  &#169;   &#xA9;  ©  コピーライト
&reg;   &#174;   &#xAE;  ®  登録商標

●資料
  Wikipedia:文字参照の一覧

JavaScript のコメントアウト

HTML の中に JavaScript コードがあり、< や > などの記号が使われていると、 XML とみなしてパースするとエラーになります。 JavaScript の部分は XML からはコメントに見えるようにします。

<script>
//<![CDATA[

// javascript を書く

//]]>
</script>

//<![CDATA[、//]]> が XML 特有の表記で、この部分はコメントになり無視されます。 HTML でいう  に相当します。

追記 2022/01

厳格なセキュリティでは、 HTML の中に script タグを入れるな、 HTML の中に JavaScript を書くな (外部の js ファイルにすべて分離する)、タグの中に style 属性すら入れるな、style タグを入れるな (外部の css ファイルにすべて分離する)、といった話も出てきます。ただまあ、実際のところ巷の Web でそこまでやってる HTML はめったに見かけない。 HTML の中に JavaScript のコードを入れることも多いので参考まで。