XHTMLとは？書き方やメリットを初心者向けに解説！HTMLとの違いは？HTMLから変換する際の注意点も紹介！
HTMLが有名なマークアップ言語
文書の構造を定義するために使用される「マークアップ言語」。
HTMLがマークアップ言語として非常に有名で代表的な存在になっていますが、他にも数々のマークアップ言語があることはご存知でしょうか。
XMLやSGMLなど、HTML以外にも様々なマークアップ言語が存在しています。
とはいえ現代のWebサイト構築で主に使われているのは、HTMLとXMLが世界的に見て主流だといえるでしょう。
多くのWebサイトが、HTMLやXMLを活用しマークアップされて開発・構築されています。
XHTMLにフォーカスを当てていく
今回の記事で注目するのはマークアップ言語の内の1つである「XHTML（Extensible HyperText Markup Language）」です。
2000年にW3Cの勧告となったXHTMLですが、HTMLと比較するとあまり知名度が高いとはいえないマークアップ言語です。
この記事ではXHTMLがどんなマークアップ言語なのかということについて、初歩的な部分から解説していきます。
書き方はもちろん、XHTMLを利用するメリットまで注目しつつ、HTMLとの違いについてもチェックしましょう。
加えて、HTMLからの変換時に注意するべきポイントについても注目。
初心者の方向けに解説を進めていきます。
XHTMLは「HTML + XML」である
XHTMLというマークアップ言語は「HTML」と「XML」を組み合わせた言語です。
「XHTML」という名前から何となく察したという方もいらっしゃるかもしれません。
両言語の特徴を併せ持っています。
HTMLは曖昧な言語
XHTMLは両言語の特徴を融合させたマークアップ言語で、XMLの厳格な記述ルールをHTMLにも適用していると言い表せます。
HTMLはもともと曖昧な部分がある言語でした。
例えば「<p>」タグの「p」は、大文字のPであろうと小文字のpであろうとどちらでも認識されます。
しかしXHTMLにおけるpタグは、小文字でなければなりません。
これはpタグに限らず、基本的に全てのタグを小文字で記述する必要があります。
小文字でなければ、正しく処理させることができません。
HTMLの定義をきっちりさせたのがXHTML
曖昧な部分のあるHTMLにXMLの厳格なルールを乗っけることで、定義をきっちりとさせたのがXHTMLだといえるでしょう。
この厳格さがHTMLとXHTMLの大きな違いだといえるポイントです。
先ほどお伝えしたように大文字と小文字の区別の厳格さや、曖昧な記述が認められません。
非常に厳しいルールを持っている言語だといえます。
HTMLでは省略できる終了タグを省略できない
HTMLでは、内容モデルを持つ要素の終了タグを省略できる場合があります。
例えばリスト項目で「li」タグを利用している場合、閉じタグを省略することが可能です。
しかし、XHTMLの場合閉じタグを省略することはできません。
省略して記述するのが癖になっているエンジニアに立ちはだかるハードルだといえるでしょう。
独自タグが使用可能
XMLの特徴といえば、独自タグを使用できるという部分だといえます。
HTMLとXMLの特徴を融合させているXHTMLでも、もちろん独自タグを作成・設定することが可能です。
言い方を変えれば「XMLでできることはXHTMLでもできる」と捉えることができるでしょう。
XML文書の埋め込みも可能です。
XHTMLを使うメリット
一見すると「厳格」という単語から、非常に扱いにくそうに感じてしまう可能性のあるXHTML。
しかし、XHTMLを採用することで得られるメリットも存在しています。
そのメリットは「ルールが厳密だからこそ」得られるものが多くあるので1つずつチェックしていきましょう。
ルールが厳しいからこそ処理が安定する
XHTMLは定義が厳格で、僅かな記述ミスがあれば適切に処理・表示が行われません。
だからこそ、コンピュータにとっては扱いやすい言語ともいえます。
高速に処理ができ、安定するということです。
ソースが見やすくなる
XHTMLはタグの大文字・小文字の区別をします。
そのためコードを記述するときには注意しなければなりませんが、だからこそ後から見直しやすいコードを自然と作ることができるでしょう。
厳密な定義があることで結果的にソースコードの品質が向上するということです。
XHTMLにおけるタグの定義が厳密だからこそ、意識せずに自然に得られるメリットだといえます。
XMLの独自タグが使える
先ほども触れた通り、XHTMLではXML特有の機能である「独自タグ」を使用・設定することができます。
既存のタグに捉われないので、HTMLでWebページを作るよりも自由に制作することができるでしょう。
利用する環境やシーンに応じて、柔軟にタグの設定をすることが可能です。
XMLとHTMLの要素両方を併せ持つXHTMLだからこそのメリットだといえるでしょう。
XHTMLの書き方
それでは、実際にXHTMLの書き方をチェックしてみましょう。
厳密なルールが存在しているXHTMLのコードは、どのようなものなのでしょうか。
実はXHTMLファイルは、拡張子は「.html」のファイルが使われることが多いです。
XHTMLのサンプルコード
実際にXHTMLがどんなコードなのかチェックしてみましょう。
DTD（ドキュメントタイプ）の指定を含め、サンプルコードとしてこちらをご覧ください。
- <?xml version=“1.0” encoding=“Shift_JIS” ?>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
- <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“ja” lang=“ja”>
- <head>
- <title>XHTMLサンプルコード</title>
- </head>
- <body>
- <p>テストです。</p>
- </body>
- </html>
1行目が「XML処理命令」です。
2行目は「スキーマ定義」であり、3行目以降がXMLインスタンスとなっています。
上記を見れば分かる通り、XHTMLは要素タイプ名・属性名を全て小文字で表記しなければなりません。
タグの記述に関しても同様であり、仮に大文字で記述した場合上手く処理が行われないので注意が必要です。
とはいえ、基本的には HTMLおよびXMLと同様です。
どちらか一方について知っている方であれば、ある程度は問題なく読み、理解することができるでしょう。
習得にもさほど時間はかからないはずです。
HTMLからXHTMLへ変換するときの注意点をチェック
仮にHTMLからXHTMLへ変換・移行しようということになった際に注意すべき点があります。
ここからは、HTMLからXHTMLへ変換するときの注意点に注目していきましょう。
文書の先頭でXML宣言をする
XHTMLにおいて、先頭行でXML宣言をするように勧められています。
- <?xml version=“1.0” encoding=“Shift_JIS”?>
XMLのバージョンと文字コードを指定しましょう。
上記サンプルコードではXMLのバージョン1.0、文字コードとしてShift_JISを指定しています。
宣言の省略が可能なケースがありますが、仮に省略が可能な場合でもXML宣言をしておくことが推奨されているのを頭に留めておきましょう。
基本的には必ずXML宣言をするという認識をしておくべきだということです。
3種類のDTD宣言
XHTMLのDTD（ドキュメントタイプ）宣言は3種類あります。
厳密な「Strict」、移行型の「Transitional」、フレーム設定用の「Frameset」の3種類です。
Strictは非推奨の要素や属性は使えない、まさに「厳密」なDTD。
対して移行型のTransitionalはStrictほど厳密ではありません。
非推奨要素・属性も使用可能です。
ただし、フレームは使用できません。
そんなTransitionalにフレームを加えたのが、Framesetになります。
1つずつ、DTD宣言のコードをチェックしてみましょう。
DTD宣言：Strict
StrictはこのようにDTD宣言をします。
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
DTD宣言：Transitional
Transitionalはこちらの宣言です。
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
DTD宣言：Frameset
Transitional DTDにフレームが加わったFramesetは以下のように宣言してください。
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
上記3つの宣言を参考に、実際にコードを記述するようにしましょう。
名前空間と言語コードの指定
HTMLでは言語コードはlang属性で指定するのはご存知の通りです。
XHTMLでは、<html>要素内部にxml:lang属性で指定し、更にlang属性での指定も併せて記述するのが一般的です。
具体的には以下の通り指定します。
- <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“ja” lang=“ja”>
xml:lang属性、lang属性両方を記述するのは慣れるまで時間がかかるかもしれません。
忘れないよう意識しましょう。
空要素も閉じなければならない
HTMLでは<br>や<img>タグなどは閉じる必要がありません。
これらは要素内容を持たないことから「空要素」と呼ばれています。
しかし、XHTMLにおいてはbrなどの空要素も閉じなければならないので注意が必要です。
この場合の閉じ方は「<br />」、imgの場合「<img src=”xxxx.xxx” alt=”xx” />」といった具合に、最後に「/（スラッシュ）」を付けましょう。
HTML5という存在
現代のIT業界では、XHTMLからHTML5へと移行する動きも見られます。
大切なのは、時代に合わせて遅れることなく上手く移行をしていくことです。
HTML5はどんどんと広がり、非常にポピュラーなものとなってきました。
XHTMLからHTML5へ移行するのも、決して間違ったことではないので移行する際は良い意味で大胆に行動していきましょう。
ちなみに、HTML5をXMLの文法で記述する際は「XHTML5」と表記するので、XHTMLと混同しないよう注意してください。
マークアップ言語を使いこなす
今回の記事では、マークアップ言語であるXHTMLについて注目してきました。
HTMLとXMLの特徴を組み合わせたという、少し特殊なマークアップ言語といえるXHTML。
両方の特徴や文法を併せ持っている言語ですが、基本的には HTMLにXMLの要素を加えたという言葉が適切かもしれません。
XMLのような厳格さをHTMLに求めた言語ともいえ、その定義の厳しさが特徴です。
定義が厳しいので取っ付きにくく感じる方もいるかもしれませんが、結果的に高品質なコードを書き上げることにも繋がります。
大切なのは、1つのマークアップ言語だけでなく複数のマークアップ言語について知識を蓄えておくことです。
そうすれば、状況に応じて様々な選択ができるかもしれません。
ぜひ現状に満足せずに、新しい言語にもトライできるような高いモチベーションを維持していきましょう。
