難波校OPEN記念入学金無料キャンペーン実施中!
DMM WEBCAMPは難波校の開校を記念して、通常100,000円(税抜)無料で入校できるキャンペーンを実施しています。
関西未経験からエンジニアになりたいプログラミングで人生を変えたい方はこの機会にぜひご検討ください!

xhtmlとはxmlとhtmlをあわせたような特徴のあるマークアップ言語です。htmlと似たような言語ですが、ルールが細かく設定されていたりと違いもあります。今回はxhtmlについて特徴や言語のルール、学習ツールの紹介といったことをお伝えしていきたいと思います。

xhtmlとは?

xhtmlとはxmlとhtmlのいいところどりをしたような言語です。カテゴリーとしてはhtmlやxmlと同様、マークアップ言語で、タグとデータで文書を構成していきます。

ブラウザでhtmlのように表示することもでき、独自のタグも設定できるのでサーバサイドとデータのやり取りも行えます。

xhtmlはhtml4の次に世に出てきた規格で、html4の次世代マークアップ言語だとされてきた時期もありました。しかしまた新たにhtml5が登場したことで、またhtmlの勢いが盛り返しているという状況です。

とは言うもののxhtmlはhtml4と同様、多くのブラウザで対応しています。html5はまだ対応していないブラウザがある状況なので、多くの環境で使うことができるというのはメリットのひとつです。

xhtmlとhtmlの違いは?

xhtmlはhtmlの性質も受け継いでいますが、htmlとは異なる点も多くあります。

まずxhtmlはhtmlに比べてルールが厳密に決められています。doctypeの宣言方法も違いますし、htmlではタグを終了タグで閉じなくてもエラーにならないものが、xhtmlの場合はエラーになるなど細かいルールが多く定められてる言語です。

ルールが厳密になるということは、ルールを守るための工数が必要になり開発が滞る可能性もある一方で、品質の管理が向上するということもあります。

細かい規則はたくさんあるけど、一定の品質を保持することができるというのが、主なxhtmlの特徴です。

xhtmlのルールはこちら

冒頭でxhtmlである旨などを宣言する

xhtmlは文書の冒頭で、これはxhtmlで書かれていますといった旨の宣言を書かなくてはいけません。冒頭でxhtmlであることを宣言することで、後の文書にxhtmlの厳密なルールを適用することができます。

<?xml version=”1.0” encode=”utf-8” ?>

タグは小文字で表記する

要素をあらわすタグを表記するときは小文字で表記するという規則があります。htmlでは大文字でタグを書いてもブラウザでエラーになることはありませんが、xhtmlの場合はエラーになるので注意が必要です。

<p>testです</p>

属性の値は引用符で閉じる

タグに付随して設定する属性の値は必ずダブルクォーテーションやシングルクォーテーションなどの引用符で閉じる必要があります。

htmlでは属性の値を省略して書くことも可能ですが、xhtmlの場合はそれができません。属性にはかならず値を設定しなくてはなりません。

<div id=”id01”>test</div>

タグはすべて閉じる

htmlではタグを閉じなくてもブラウザに表示されましたが、xhtmlではタグを閉じない場合エラーが起こります。終了タグが必要ない要素の場合でも必ず最後にスラッシュ(/)が必要です。

例えばbrタグのような終了タグが必要ない要素でも<br />といったように表記しなくてはいけません。

<p>
改行です<br />
</p>

xhtmlを学習できるサイトはこちら

とほほのxhtml入門

http://www.tohoho-web.com/ex/xhtml.htm

htmlやcssなどの解説を提供しているとほほのxhtmlの解説ページです。xhtmlの歴史的な経緯やhtmlとの記述の違いなども丁寧に解説されています。xhtmlの概要をざっくりと知りたい場合に役立つページです。

xhtml入門

http://itref.fc2web.com/html/xhtml.html

xhtmlの概要やルールについて解説しています。こちらもざっくりとxhtmlを理解するのに良いページです。

たのしいxml/xhtml

http://www6.airnet.ne.jp/manyo/xml/index.html

xmlやxhtmlについての概要のほか、具体的なxhtmlの書き方についても解説されているサイトです。xhtmlの書き方の注意点や、サンプルなども提供されています。xhtmlはこういう感じで書くのかといったことを把握するのに役立つでしょう。

xhtmlを学習できる書籍はこちら

html/xhtml&スタイルシートレッスンブック

htmlとxhtmlについて初歩の初歩から詳しく解説している書籍です。html5が出てくる前の書籍なので一部古い記述もありますが、html+xhtml+cssで作るサイトの作り方が丁寧にわかりやすく書かれています。

現場のプロから学ぶxhtml+css

xhtmlとcssを使ってつくるサイトの作り方が実践的に解説されている書籍です。初心者向きというよりもhtmlやcssの知識を多少でも持っている人に向いています。実際に開発の現場で使えるようなリファレンスも載っているのでxhtmlを使う必要があるので急遽学びたいという場合にも役に立つ書籍でしょう。

まとめ

いかがでしたか?xhtmlについてご理解いただけましたか?

xhtmlはxmlとhtmlをあわせたような性質を持つマークアップ言語です。htmlとよく似ていますが、htmlよりもルールが細かく定められています。

xhtmlは厳密な書き方が求められるので、開発に手間取ることもある一方、品質が一定に保ちやすいというメリットも存在します。

2017年10月の時点ではhtml5が主流になりつつあるので、1世代前の技術という印象があるxhtmlですが、xhtmlで作られているサイトもゼロではありません。また移り変わりが速いWebの世界においてふたたびxhtmlが脚光を浴びる可能性もあります。

興味がある方は一度xhtmlについて学んでみてはいかがでしょうか?

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

5月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
4月受入枠は満員となっております。5月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!


▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事