xhtmlってなに？学ぶのにはどうすれば良いのかも解説
「xhtml」という言葉に出会ったことがありますか？
Webサイトを作ろうとしている方、Webデザイナーやコーダーを目指し、独学で勉強をしている方は、一度くらいは出会ったことがあるのではないでしょうか。
まったくなんのことか分からない方もいれば、なんとなく推測ができる方もいるでしょう。
今回は、このxhtmlとはなにか、どのように学べば良いのかについて解説していきます。
xhtmlとは～xhtmlの基礎知識～
xhtmlとは、「Extensible HyperText Markup Language」を略した言葉です。
すこし勉強をはじめている人は、html(HyperText Markup Language)に「Extenshible」がついたものであり、関連性がありそうだということがすぐにお分かりいただけるでしょう。
○htmlとは○
hmtlとは、Webページをつくるために記述する言語の1つです。
html(HyperText Markup Language)のうち「HyperText＝ハイパーテキスト」とは、クリックすると、別のWebページにとんだり、新しいウインドウが開いたりする文字（リンクが貼られている）のことです。
下線部がついていたり、色が違っていたりすることが多いですし、みなさんも普段から見慣れていることと思います。
ほかにも、Webページ内に画像や動画などを埋め込むことが可能です。
これもリンクを貼ることによりコンテンツを結びつけているのです。
次に、「MarkUp＝マークアップ」とは、目印をつけるということです。
簡単に言うと、「これは見出しです」「これは段落です」「これは本文です」などと、それぞれのパーツに対する役割をつけてあげるということです。
みなさんがWebサイトを見ているときに、どれが見出しでどれが本文かなどと意識してご覧になることは少ないかも知れませんが、膨大な数のWebサイトが集まるインターネット内では、情報を整理するうえでとても重要な役割となるのです。
しかしこれらは、人間に対してではなく、コンピューターに理解してもらわないといけないわけですから、コンピューターに分かるようなLanguage=言語で書かれていることが特徴です。
これでhtmlとはなんなのかという基本的な意味において、おおまかにご理解いただけたのではないでしょうか。
ちなみに、このWebページにも当然htmlが使われています。
Webページには、ほかに、CSSやJavaScriptという言語が使われていますが、ここでは詳しい説明は省いておきます。
○xhtmlはXMLから生まれた言語
次に、肝心のxhtmlですが、これはXMLという言語から発展したものです。
XMLは「Extensible Markup Language」、直訳すると「拡張可能なマークアップ言語」となります。すでに気がつかれた方も多いと思いますが、htmlと同じマークアップ言語なのです。
さきほどは説明しませんでしたが、htmlはマークアップするとき、「タグ」と呼ばれるものを利用して役割をふっていきます。
このXMLもhtmlと同じように、タグを使って役割をふっていくという点で共通点があります。
タグをつけるといっても、お店で実際の商品に値札をつけるようにはいきません。
コンピューター上のデータ、文字にタグをつけるのには、以下のようなやり方で行います。
まずはhtmlにおけるタグの付け方の一例をご紹介させていただきます。
————————————————————————————————–
【例1】
<h1>xhtmlとは</h1>
＜＞で囲んでタグ付けを行います。
こちらの例の場合は<h1></h1>がタグとなります。
＜＞内にあるhはheadingの略で、<h1>の後からくる言葉が見出しになるということを、コンピューターに教えてあげているわけです。
次に、</h1>と書くことで、見出しはここまでとコンピューターに指示しているわけです。
上の例で言うと、「xhtmlとは」が実際に見出しになります。
ちなみに<h1>の「1」の数字は大きさです。「1」はもっとも大きな見出しにつける大見出しで、「2」は2番目に大きい見出しとなります。全部で6種類あるので、<h6>の場合はもっとも小さい小見出しにつけることになります。
【例2】
<strong>ここを強調したい</strong>
次の<>内に入っているstrongは強調したいときに使います。
この<strong></strong>の間に挟まれている「ここを強調したい」は太文字になります。
皆さんもWebページを見ているとき、文の途中で、重要ポイントだけ太文字になっているのを見たことがあると思います。本文を書いていて一番強調したい文字の前にこの<strong></strong>タグをもってくることで、それが可能になるというわけです。
————————————————————————————————–
このようにしてhtmlでは、文字に対して役割を示したり、文字を装飾したり、リンクをはったりすることができるので、この<>内に記述できる文字（「要素」といいます）を覚えることがwebページを作るための基礎知識になります。
画像を挿入するときの要素、リンクを貼るときの要素、リストをつくるときの要素など、その種類はさまざまで覚えきるのは大変ですが、一般的にさきほど紹介した見出しのタグや、強調のタグ、リンクのタグなど頻繁に使うタグだけ覚えておいて、特別なことがしたいときだけ本を開いたりネット検索などを行うなどして対応すれば良いので、htmlは比較的使いこなしやすい言語と言えます。
一方でXMLの場合は、この<>内の要素自体を自由に決めることができます。
たとえば、「今月のおすすめは＜商品＞国産栗のマロンケーキ＜商品＞です」などといったようにです。
この商品タグをつけることにより、国産栗のマロンケーキがインターネット上で検索されやすくなります。
ほかにも＜住所＞＜店舗一覧＞＜価格＞など自由に設定可能であり、htmlよりも拡張性が高いと言えます。
ただし、上の例からなんとなくお分かりいただけるように、おもに文書やデータの保管といった目的で使われることが多いです。
htmlとXMLについてご理解いただけたと思いますが、本題であるxhtmlとはなにかというと、xhtmlはXMLとhtmlを混ぜた言語であり、それぞれの良いとこ取りをした言語と言えます。
xhtmlの使い道やデメリット
次に、xhtmlは、どのような場で使われるのかを説明していきます。
XMLは、文書やデータの保存を目的にしているのに対し、htmlはインターネット上で見られるWebページを作成するために使われていますが、データをインターネット上、つまりオンラインでやり取りするというケースを想定して開発されたのがxhtmlなのです。
もう少し具体的にいうと、XMLで作成されたデータを、htmlのように表示するといったような使い方がされます。
一般的なWebページというよりは、なにかのデータを抽出して表示させるといったようなアプリケーションをつくるときに、そのUI（ユーザーインターフェース）部分にxhtmlが使われるのです。
○xhtmlはルールが大変
これまでの説明から、xhtmlはとても優れているという印象を抱かれたと思いますが、xhtmlには1つデメリットがあります。
それは記述の方法に厳格なルールがあるということです。
htmlはタグの要素を大文字にしても小文字にしても、きちんと認識してもらうことができるのですが、xhtmlの場合は小文字でなければ認識されないなど、正確性が要求されます。
たとえば、本文を書くときに使用する<p></p>タグですが、htmlの場合<P></P>と書いても認識されWebページに表示されますが、xhtmlの場合は認識されず表示されません。
また、必ず</○○>といった終了タグをつけなければなりません。
データを取り扱うプログラムを使用するような場面で便利になる反面、htmlよりもきっちりと作り込まないとうまくいかないということなのです。
xhtmlを学ぶにはhtmlとXMLから
正確性を求められるとはいえ、xhtml自体はそれほど難しいものではありません。
とくにhtmlに通じている方にとっては、同じようなマークアップ言語ということで、すんなりと学びやすいと言えるでしょう。
一方で、htmlもXMLもまったく分からないといった方は、まずはこの2つの習得から行うことがおすすめです。
○htmlの習得方法
【1】 オンラインスクールで学ぶ
もっとも簡単に学べる方法であり、くじけにくいのがオンラインスクールです。
htmlのタグを学べるだけでなく、webデザインの基礎やhtml以外の、webページを構成する言語、CSSやJavaScriptといった言語も一緒に学べることが多いです。
【2】独学で学ぶ
htmlを学ぶための書籍は、本屋さんで簡単に見つけることができます。
初心者向けのガイド本も多いので、読んで、実際に自分で試しているうちに習得できる方が多いです。
または、さまざまなwebサイトで、htmlの解説が行われています。
なかには、ストーリーを楽しみながらweb制作を学べるサービスや動画で説明してくれているWebサイトもあり、お金をかけずに学んでいくことができます。
————————————————————————————————–
htmlを学べるwebサイト
・webliker
とにかくわかりやすい。ステップを1つ1つ進んでいくと、いつの間にかhtmlを学べるようになっています。理解を手助けするイラストがふんだんに使われていること、それぞれにかかる時間も目安で書かれていることもポイントです。
※出典：webliker
・CreatorQuest（YouTube）
初心者にも分かりやすいテンポで教えてくれるのがCreatorQuest の制作するYouTube。
通勤時間を利用して気軽に視聴できるのがポイントです。
※出典：CreatorQuest（YouTube）
・Progate
イラストの多いスライド学習でhtmlを学べるWebサービス。
直感的に理解できるうえ、動画とは異なり自分のペースで進んでいけるので、どんな方でも確実に学べると評判です。
ただし、基礎レベルの18レッスン以降の、応用力をつけるコースは有料（月額980円）となります。
※出典：Progate
・ドットインストール
動画でhtmlを学べるのがドットインストール。一番のポイントは、各動画はすべて3分以内におさえられていることです。1つ1つが短いので、少しずつ理解を進めることができ、つまずきが少なくなります。
結果として、443レッスン、6,660本もの動画に分かれていますが、Webページを作成するための応用力やJavaScriptやCSSにかんする動画もしめているので、htmlの基礎的な部分だけであれば、「はじめてのhtml（全14回）」など限られた部分だけで大丈夫です。
出典：ドットインストール
○XMLの習得方法
【1】 独学で学ぶ
オンラインスクールでXMLが学べるコースは見つかりませんでしたので、独学で学ぶしかありません。
以下おすすめのWebサイトをご紹介していきます。
・XML徹底入門【わかりやすい図解解説】
ごくごくシンプルですが、カテゴリーに分かれていて、整理して学べるのがポイントです。
・Let’sプログラミング・XML入門
初心者～中級者の方を対象とし、具体例を示しながら分かりやすく解説してくれている差Webサイトです。
・XML FirstStep
XMLについて、全部で7つのステップで紹介しているWebサイトです。
・日経XTECH（ニッケイクロステック）動かして覚えるXML入門
IT、自動車、電子・機械、建築・土木などさまざまな分野における技術を紹介するWebメディアによる解説ページです。
・XMLとは？8分でわかるXML形式データの使い方入門（YouTube）
動画で学びたいという方におすすめなのが、XMLの基礎的な部分について解説いるこちらのYouTubeチャンネルです。
xhtmlを学ぶ方法
【1】独学で学ぶ
オンラインスクールでxhtmlが学べるコースは見つかりませんでしたので、独学で学ぶしかありません。
以下おすすめのWebサイトをご紹介していきます。
・とほほのＷＷＷ入門「XHTML入門」
htmlからCSS、xhtmlなど、さまざまな分野における解説を行ってくれているWebサイトです。シンプルでイラストなどはありませんが、記述例を示してくれているので比較的分かりやすいサイトと言えるでしょう。
・WebDesignLessonのHTML/XHTML入門
htmlおよびxhtmlについて、全部で22このセクションに分けて説明してくれているWebサイトです。
記述例あり、わかりづらいところはイラスト解説ありです。
ほかにもhtmlとの違いなど、一部のポイントについて説明しているWebサイトもありますので、いろいろなWebサイトを参照していくことでより知識を深めることは可能です。
xhtmlの現状とHTML5との関係について
xhtmlにかんして、xhtmlとはなんなのか、どういったことができるのか、どのように学ぶのか知りたいかたむけに解説して参りましたが、実はこのxhtmlは開発がストップしている言語なのです。
そもそも、Webページを生成するこのxhtmlだけでなく、プログラミング言語というものは開発されたとしても、その後、進化し、バージョンが変わったり、新しい機能が追加されたり、場合によってはその言語をもとに違う言語が作られたりと、姿形を変えていく物なのです。htmlにかんしてもそうです。
1999年に勧告されたHTML4.01でしたが、そのあとすぐ勧告されたのがXHTML1.0となります。その後。XHTML1.1や1.2などと変化をとげましたが、XHTML 2.0が策定される前に開発はストップとなってしまったのです。
なぜなら、このxhtmlを使用するユーザーは非常に限られていると判断されたからです。
その代わりになるものとして策定されたのがHTML5です。
XHTML5という言葉も実在していますが、詳しい情報や断定的な情報はないに等しく、さらに、一部の専門性の高いユーザー向けの記事であり、すでにxhtmlを習得している方向けのものであると言えます。
参考までにそのWebサイトをご紹介します。
・XHTML5は死んだのですか、それともHTML5の同義語ですか？
・teratail「XHTMLとHTML5の違いについて」
まとめると、新しく開発されたHTML5がXHTMLの変わりとして十分使えることから、ほとんどの企業ではHTML5で記述するといった方法に移行しており、あえてXHTMLを今から学ぶことは、それほど重要ではないといった論調が目立ちます。
なお、Google ChromeやMicrosoftのInternet Explorerといったブラウザが、XHTMLのタグを、どれほど、いつまでサポートし続けるかということも関係していきます。
これまでxhtmlで制作していたWebサイトを、HTML5に変換するサービスも出ており、わざわざ作り直す手間をかけることなくHTMLに変えることも可能であるいま、すでにつくられているものを、どうしても使いこなさなければならないといった特別な事情がない限り、HTML5において知識を深めていくことが有用だと思います。
▽HTML5に変換するサービス
Simple XHTML to HTML5 converter!
ちなみに、XHTML1.0にかんしてはWebクリエイター能力認定試験が行われていますので、XHTMLを学びたい方は、自分の理解度を確認したり、スキルを証明するためにもそちらも利用されると良いでしょう。
—————————————————————————————————
【Webクリエイター能力認定試験-XHTML1.0対応版-】
主催：サーティファイ Web利用･技術認定委員会
レベル：2段階
・スタンダード･･･Web制作の基礎であるXHTML、CSSを理解し、ページの修正ができる
・エキスパート･･･Webサイト制作に必要な知識と実践能力があり、Webサイトの制作ができる
試験時間
・スタンダード･･･テキストエディターの方は70分 Webページ作成ソフト使用者は60分
・エキスパート･･･テキストエディターの方は120分 Webページ作成ソフト使用者は90
分、知識問題に20分
合格基準：
・スタンダード･･･実技問題の得点において得点率65％以上
・エキスパート･･･知識問題と実技問題の合計得点において得点率65％以上
合格率･･･81.7％（2018年度平均合格率）※累計受験者数：14,305名（2019年3月31日）
受験料：
・スタンダード･･･5,900円（税込）
・エキスパート･･･7,500円（税込）
なお、学習の目安はスタンダードで32時間、エキスパートはスタンダードの知識を有している方で42時間ほどかかるとのことです。
—————————————————————————————————
XHTML5にかんする能力認定試験は現在ありませんし、オンラインスクールによる講座や書籍などはありませんが、以下のWebサイトでそのルールについて確認いただくことが可能なので紹介しておきます。
ただし、あくまでXHTMLの基礎を理解している方向けです。
・「しらぎくサイト」XHTML5 について
HTML5ってなに？
ここまで読んでいただき、HTML5について気になった方が多いのではないでしょうか。
Webページの作成術について学ぼうと漠然と考えていた方でも、htmlは知っているけど、バージョンがあるなんて知らなかったなんて方もいるかもしれませんね。
しかし、HTMLは進化しており、これまでできなかったことができるようになっているのです。
そこで、最後に、HTML5について説明しておきます。
HTML5が発表されたのは2014年です。それまではHTML4というバージョンでつくられており、いまでもHTML4.0のままのWebページは多数存在しています。
しかし、HTML4から5に変わることで作る側にも見る側にも大きなメリットが生まれているのです。
全てではありませんが、代表的なものをご紹介していきます。
○レスポンシブル対応になった
HTML5にもっとも大きいメリットは、スマホなどパソコン以外のデバイスへの対応が簡単になった（レスポンシブル）という点です。
デバイスにより画面の大きさは違いますが、そのデバイスに応じてWebページサイズが変わるので、みな違和感なく見ることができるということになります。
最近は、パソコンよりもスマートフォンでの閲覧が増えていますので重要ポイントとなりますね。
○映像や音楽を簡単にうめこめるようになった
これまでも映像や音楽をWebサイトに入れることは、プラグインソフトを使用すれば可能でした。
しかし、そのプラグインソフトを持っていないユーザーは再生できないといった問題がありました。
HTML5では、「video」「audio」という新しい要素が追加されたので、プラグインソフトがなくても再生できるようになったのです。
結果、Flashが不要となり、2020年にサポートが終了することが発表されています。
○文章構造がすっきり
HTML5には文章構成にかんする新しいタグも追加され、これまでのようなたくさんのタグを書くことが不要になりました。
全体的にすっきりとしたコードになるので、作成する人も修整する人も楽になりました。一般ユーザーにとっての利点というよりは作る側の利点ですが、新しく学ぶ人にとっては特に嬉しい点と言えるでしょう。
なお、このHTML5にはほとんどのブラウザが対応しているので、ほとんどのユーザーが正しく、つまり、作成者の意図通りに見えているということになります。
★HTML5に対応している主なブラウザ
・Google Chrome
・Google Chrome
・Edge
・Internet Explorer
・Safari
・Firefox
※2020年11月時点で、国内で使用されているブラウザシェアランキング（https://webrage.jp/techblog/pc_browser_share/）に入ったブラウザのみを挙げていますが、ほかにも、海外で使用されているWebブラウザにも対応しています。
ちなみに、HTML5にかんしても能力認定試験が実施されています。
学ぶにあたり役に立つと思いますので、ご紹介しておきます。
HTML5プロフェッショナル認定
※出典：HTML5プロフェッショナル認定
主催：LPI-Japan
レベル：2段階 level.1・level.2
所要時間：90分
試験問題：
・level.1･･･60分
・level.2･･･40～45分
受験料：15,000円（税別）
試験内容：コンピューターベーステスト（マウスによる選択式、一部キーボード入力あり）
※level2はlevel1に合格している必要があります。
なお、試験を主催しているLPI-Japan自体がセミナーやイベントを実施しているので、一度そちらに参加したうえ、オンラインスクールで学ぶか独学で学ぶか決めても良いと思います。
今回は、xhtmlとはなにか、どうやって学べば良いかについての解説と、新しいバージョンになりWeb制作の主流となっているHTML5についての概要についても説明させていただきました。
ご自分がなにをしたいのかにより、学ぶ対象や学ぶ方法が変わってくると思います。
今回の記事が少しでも参考になれば幸いです。
