XHTMLとは?HTMLとの違いは?初心者向けにわかりやすく解説

こんにちは、ITプロパートナーズ編集部です。

HTMLを学習していると、「XHTML」という用語も出てきますが、両者は何が違うのでしょうか?

この記事では「HTML」と「XHTML」の違いを初心者の方にもわかりやすく解説していきます。

また2つのメリットとデメリットにも触れているので、「Webサイトを作るためにどちらを学べば良いかわからない」という方は、ぜひ最後までご一読ください。

フリーランスエンジニアの
ドンピシャ案件の探し方

「案件はたくさんあるはずなのに、なかなか自分の望む案件が見つからない…」

エンジニア市場は売り手市場であるものの、いまだに正しいマッチングノウハウが確立されておらず、多くの方が案件探しに苦労されています。

ですが、現在の市場感や企業側に刺さる経験・スキルを理解し正しく案件探しをすれば、誰でも自身のバリューを活かし単価を伸ばすことができる、というのも事実です。

ITプロパートナーズでは、

・9割がエンド直案件のため、高単価
・約6割が週3-4案件のため、柔軟に働ける
・事業会社の自社開発案件が多い

などの魅力的な案件を数多く保有し、マッチング能力の高い即戦力エージェントが完全サポートします。

初めてのフリーランス、情報収集段階でも大丈夫です。あなたの働き方にマッチし、単価も高く、最もバリューを発揮できる案件を探しませんか?

⇨ ITプロパートナーズに無料登録してみる

そもそもHTMLとXHTMLとは?

そもそもHTMLとXHTMLとは何か、2つの特徴について解説していきます。

HTMLの特徴とは

早速、HTMLから見ていきます。皆さんが今、見てくださっているこのページもHTMLという文書でできています。HTMLはHyper Text Markup Languageの略で大きく2つの特徴を持った言語です。

1.マークアップ

1つ目の特徴としてはHTMLはタグとよばれる目印(Markup)を文書にいれることができます。例えば「<b>test</b>」と書くとtestという文字を太文字にすることができたり、「<button>OK</button>」と書くとOKと書かれたボタンをページ上に作ることができます。

この<b>~</b>両端の目印をタグといいます。厳密には始まりの部分を開始タグ、終わりを示す部分を終了タグといい、このように様々なタグを使用してページを作ることができます。

2.ハイパーテキスト

続いて2つ目の特徴としてはHyper Textという他のページにリンクする仕組みが挙げられます。Webページのなかで青字になっていて他のページに飛べるようなものを見たことがあると思います。

この機能によって、ブラウザーのアドレス欄に「http://~~」というのを、わざわざ毎回、入力することなく関連するページに、すぐに遷移することが可能となり、より早く情報にたどり着くことができます。

HTMLを作るのにさほど、準備はいりません。メモ帳などのテキストエディターとブラウザーがあれば、作って見ることができますのでソフトの専門の仕事ではあるものの比較的、取り掛かりやすいという側面もあります。

SGMLとXML

さてXHTMLの説明に移りたいところですがXHTMLを説明するためには、前提知識としてSGMLと、その派生言語としてXMLの理解を必要とします。

HTMLについては上で説明しましたが、HTMLも始まりは、このSGMLという言語からです。SGMLは1980年代にアメリカの軍事利用を発端とした様々な環境で長期間の使用を目的としてできた言語です。

例えば、今では文章を書くときにMicrosoft OfficeのWordを使用したりするケースが多いですが、Wordは数年、経過すると新しいバージョンができて古いバージョンとの互換性の問題などが、しばしば見受けられたりします。

そんな経緯で作られたSGMLですが作るためにはルールが複雑すぎて扱うためには、多くの学習を必要とするため一般的に便利なものとしては使われるに至りませんでした。

そこで、SGMLの利点は保持しつつルールを緩和したものとしてHTMLとXMLが開発されました。両者を簡単に分けるとHTMLは見栄えを重視、XMLは文書のルールのほうを重視されているようなイメージです。

XHTMLの特徴とは

前置きが長くなりましたが、XHTMLとはExtensible HTMLの略で、一言でいうとHTMLを拡張したものということになります。XMLの厳密なルールを保持しつつ書かれたHTMLをXHTMLといいます。

イメージとしてはHTMLとXMLを混ぜたもので、HTMLのタグなどとXMLの厳密なルールを守ることで多少、書き方は難しくなったものの、ブラウザー以外の様々なソフトウェアで扱えるようになるという利点を得たものになります。

HTMLとXHTMLの違い

両者の概要をざっと見たところで両者の違いとして、まず書き方の厳密さが大きな違いです。初心者の方にとってみればHTMLは多少、間違った書き方をしても、ある程度はブラウザーが間違いを補ってくれます。

例えばHTMLはファイルの最初に<html>、最後を</html>で閉じなければなりませんが、忘れていたとしてもブラウザーはあるものだと、みなしてくれます。

ところがXHTMLだと、このような曖昧さは認められません。もしプログラム言語を勉強したことがある方なら、「;」を忘れていたり、大文字と小文字を区別していなかったりするとエラーが起きるといった具合です。

ただしXHTMLはHTMLの拡張ですから両者は基本的に似ている部分が非常に多いです。

XHTMLにおける4つの記述ルール

ここからは、XHTMLの特徴を4つに分けて紹介します。

1.冒頭で使われていることを宣言する

XHTMLは冒頭で「これはXHTMLで書かれています」と宣言する必要があります。冒頭で宣言することで、以降はXHTMLのルールを適用できるからです。冒頭で宣言することはHTMLと同じですが、書き方が異なるので注意してください。

  2.タグは小文字表記

XHTMLでは、HTMLのタグはすべて小文字で表記しなければなりません。HTMLでは大文字で飽きても問題ない部分が、XHTMLだとエラーが発生します。

<P>これはサンプルです</P>:×

<p>サンプル></p>:〇

3.属性値は引用符を使う

XHTMLでは、各タグの属性値をダブルクォーテーションまたはシングルクォーテーションで囲む必要があります。引用符によって属性と値の組み合わせが検証されるため、引用符がないと認識されません。

<div id="1">サンプル</div>

4.タグはすべて閉じる

XHTMLではHTMLと異なり、すべてのタグに必ずスラッシュを付けないとエラーが発生します。各タグを適切に閉じないと、コードが読みづらくなり、表示されません。

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

HTMLとXHTMLのメリット

次に両者の良いところをそれぞれ見ていきます。

HTMLのメリット

まずHTMLの最も良いところとしては世の中に深く浸透してきていることが挙げられ、今や企業や学校、店舗から個人に至るまで様々なWebページがHTMLで作られています。

そして、それだけ多くのところで使われているということは作っている人の数も非常に多いです。そのため、HTMLに関する情報はとても手に入りやすいです。書店に行けば分かりやすいかどうかはさておき、多くの書籍が所狭しと並んでいます。

それこそインターネットで「HTML 背景色」などと検索すればすぐに情報を得られます。一昔前まではソフト開発者の専売特許だった知識が今では多少、パソコンを使える人であれば既存のWebページをいじることくらいであれば容易にできるような状況です。

さらに最近ではHTMLの知識がなくてもブログやWebページを作ることができるようになってきています。

例えばFC2ブログやアメブロなどの有名なブログサイトもありますし、もう少し自分用にカスタマイズしたWebページを持ちたい方はWordPressなどヴィジュアルにWebページを作るといったこともできるようなサービスが提供されています。

XHTMLのメリット

続いてはXHTMLの良いところについてです。

そもそもXHTML自体がまだまだ一般的ではないため伝わりづらくなってしまうかもしれませんがルールがかなり厳密なのでソフトで色々な処理をかけやすいことと、管轄外のところでも使いまわしやすいということが挙げられます。

HTMLとXHTMLのデメリット

続いて、HTMLとXHTMLのデメリットを紹介します。

HTMLのデメリット

非常に便利で多くの人に情報を発信できるHTMLですが、逆にその多くの方が見るがゆえに問題点となることもあります。
それはブラウザーやキャリアの問題です。

例えばInternet ExplorerやGoogle Chromeではきれいに表示されるけどFirefoxでは違ったように見えたり、最悪の場合には画面が崩れてしまうといったような問題です。

「おはよう」という言葉をHTMLに書いたとするとブラウザーには確かに「おはよう」と表示されるのですが詳細は全く指定されていませんから文字の大きさは何ピクセルなのか文字のフォントはゴシックなのか、それとも明朝体なのかといったようなことはブラウザーに任されることになります。

最近ではHTMLのバージョンアップが進み、レイアウトに関することはスタイルシートと呼ばれるHTMLを補助する役割の仕組みを用いるように推奨されているのですが、まだまだXHTMLに比べるとルールが曖昧なままになっている部分も多いです。

XHTMLのデメリット

XHTMLのデメリットは認知、普及している範囲が非常に狭いことが挙げられます。

そのため学習して利用しようにも書籍がなかったり、Webページで情報を探そうにも英語のサイトであることが多いです。また見つけたとして知りたい内容のキーワードについて難しい専門用語を並べ立てて説明されていることもあります。

XHTMLを学ぶためにはXHTMLをいきなり学ぶのではなくXMLから入るほうが結果的に近道になるかもしれません。

Webサイト作成ならHTMLを使おう

HTML5は、IE8以下のブラウザに対応する場合を除き、Webページの設計・開発において活用することが推奨されます。IE9をはじめとする主要なウェブブラウザは、HTML5を基本としているからです。

また、HTML5はResponsive Web Design(レスポンシブWebデザイン)にも対応していますので、モバイル端末での表示も問題ありません。

XHTMLを学習できるWebサイト

XHTMLを学習できるWebサイトを2つ紹介します。

  • とほほのWWW入門
  • XHTML基礎講座

2つからどのようなことが学べるのか、見ていきましょう。

とほほのWWW入門

とほほのWWW入門は、Web関連の基礎的な知識を解説するサイトです。XHYMLの基本的な部分やタグの書き方など、注意点が詳しく解説されています。

XHTML基礎講座

XHTML基礎講座では、CSSのレイアウトを主に解説してくれます。一部XHTMLについても解説しているため、基礎的な部分を丁寧に知りたい方に向いています。

まとめ

それではまとめに入っていきたいと思います。

まずはHTMLとXHTML、どちらを使った方がいいのか、という疑問につきましては多分に主観が入りますがHTMLのほうが個人的には良いと思います。

Web上で情報を公開するだけであればHTMLのほうが簡単で短時間で作れますし、何より更新もしやすくなってきています。また最近ではHTML5やCSS3という新しいバージョンが出たことによって、これまでは複雑なことをしなければできなかったことなどが簡単にできるようになってきています。

今のところはまだHTMLを使用を続けて今後、XHTMLのメリットの方が大きくなってきたときに使用し始めるくらいで十分ではないかと思います。

フリーランスの方でこのようなお悩みありませんか?
  • 高額案件を定期的に紹介してもらいたい
  • 週2日、リモートワークなど自由な働き方をしてみたい
  • 面倒な契約周りはまかせて仕事に集中したい

そのような方はぜひ、ITプロパートナーズをご利用ください!

フリーランスの方に代わって高額案件を獲得
週2日、リモートなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート

まずは会員登録をして案件をチェック!

この記事を書いた人
アバター画像
ITプロマガジン
ITプロパートナーズはITフリーランスの方に案件紹介をしているエージェントです。当メディア「ITプロマガジン」では、フリーランスの働き方から仕事探しまで幅広い情報を日々発信しています。