2. HTML
  3. HTMLとXHTMLの違いは何？HTML５の違いは？初心者のためのHTML講座
HTMLとXHTMLの違いは何？HTML５の違いは？初心者のためのHTML講座
html

HTMLとXHTMLの違いは何？HTML５の違いは？初心者のためのHTML講座

どうも、Tommy(@SitommyBlog)です。

HTMLとXHTMLについてですが、Web系エンジニアと呼ばれる業種だと必須の言語になります。

Webサイトというのは、このHTMLまたはXHTMLで構成されておりこのブログサイトもまたHTMLで作成しています。

題名通り、HTMLとXHTMLの違いを説明するほか、現在主流なHTML5についても説明していきますので、是非参考にしてください。

HTMLとは？

HTMLとは、HyperText Markup Languade（ハイパーテキストマークアップランゲージ）の略で、ハイパーテキストをマークアップする言語のことを言います。

webページというのは、画面に表示されている1ページがHTMLで記述された1つのテキストファイルとなっており、違うページに遷移した場合別のテキストファイルに移動したということになります。

マークアップとは？

文章を『タグ』と呼ばれる特別なマークで囲うことによって、文章の構造や修飾情報を記述していくことをマークアップするといいます。

ちなみに、HTMLの記述方法はW3Cで定められており、その定めるHTMLを中心に学習しておくととてもいいと思います。

W3Cとは？

W3C（ダブルスリーシー）は、World wide web Consortiumの略で、HTML/XHTML、CSSなどのWebで利用する技術の標準化を進める団体です。

設立は、1994年でW3Cが定めている記述方法で作成することにより良いWebページとされて、検索順位などにも優位になることができます。

HTMLとXHTMLの違いは？

先程も説明した通り、Webサイトを表示するためにHTMLで構築すると説明しましたが、別にXHTMLというものも存在します。

そして、題名には入れてはないですが、実は、XMLというものも存在します。

HTML/XHTML/XMLは歴史が少し違います。それぞれの歴史を簡単にまず説明していきましょう。

HTML/XHTML/XMLの歴史

図のように、それぞれ歴史が違います。

XHTMLは、Extensible HyperText Markup Language（エクステンシブルハイパーテキストマークアップランゲージ）の略で、XMLというマークアップ言語から生まれた言語で、XML言語にHTMLの特徴もプラスしたっと言った感じです。

HTMLはブラウザが解釈できたら書き方は多少違っていても表示はされますが、XMLは曖昧な記述だと表示されない特徴があります。

XHTMLは、そのXMLの『きちんとした記述でないと表示できない』というルールをHTMLに適用し、より言語としての定義を明確にした言語ということです。

例えば、XHTMLではタグは必ず小文字で表記すること。

HTMLではタグを大文字と小文字で表記してもブラウザには表示されます。

W3Cは、XMLを元にHTML4.01に非常によく似たXHTML1.0を開発しました。

現在も、XHTML/HTMLと両方が使われてはいますが、2014年にHTML５というHTMLのもっとも優れたバージョンが発表され、XHTMLは影が薄くなって来ているのが現状です。

今後は、HTML5が主流となるため新しいサイトを制作する場合は『HTML5』一択で問題ないです。

ただ、新規制作ばかりではないため、XHTMLのサイトの修正依頼が来ても対応できるような知識は必須かと思います。

HTML５とは？

先程言った通り現在では、HTML5が主流となっております。

2016年あたりには既に各ブラウザがHTML5に対応したことで時代はHTML5となりました。

HTML5は、HTML4.01やXHTMLと比べて改善され、『複雑でめんどくさい記述、処理を簡単にし、HTMLをより構造的にスッキリ記述出来るようにした』のが最大の特徴です。

改善された箇所は多数ありますが、特に目立つものをいくつか紹介しましょう。

1.文章構造がシンプルかつ明確になった

初心者の方でタグなどの理解不足の人だとあまりわからないかと思いますが、HTML4.01やXHTMLまではページを構築するために『div』タグというもので埋め尽くされていました。

<div id="header"></div>
<div id="sidemenu"></div>
<div id="main"></div>
<div id="footer"></div>

HTML5からは、文章構造を表す新しい要素が加わり、パッとコードだけみてもシンプルでなおかつ明確で分かりやすくなりました。

<header></header>
<aside></aside>
<main></main>
<footer></footer>

それぞれの役割に応じて適切な要素に割り当てることが出来るようになりました。

2.動画・音声の埋め込みが非常に楽になった

今までは、動画なら「Flash」というものを使用しなくてはならなかったのです。なので、動画を入れるためにはFlashの組み込みも必要になってきます。それは多少複雑なため安易に出来るものではなかったのです。

※その時代は、Flasherという職種もありFlash専門のエンジニアがいましたが、今ではFlashが使われるケースが非常に少なくなりほとんどの人が違う言語を学ばないと食べていけなくなったそうです。

HTML5では、『video』タグや『audio』タグが使用出来るようになり、シンプルに扱えるようになりました。また、PCだけでなくスマホでも再生可能になっているのでWeb制作の敷居もかなり低くなったのではないでしょうか。

3.Webアプリケーションが作りやすくなった

今まででは実現することが難しい高度な機能を実現するための様々なAPIが新たに追加されました。

APIとは、Application Programming Interfaceの略で、アプリケーションをプログラミングする際の決まりごとです。何らかの機能を実現する際に指定する命令や関数の記述ルールを定めたものです。

例えば、位置情報を取得したり、ドラッグ&ドロップ機能を追加したりすることは以前では非常に難しかったのですが、簡単に組み込めるようになりました。

位置情報など使用したことある人は多いと思います。APIを利用することで、ただただ文章を作成するだけではなく、より高度な機能を持ったWebアプリケーションを構築することが出来るようになりました。

DOCTYPE宣言の違い

HTML/XHTMLの違いは、多数ありますがここではもっとも重要な『DOCTYPE宣言』について違いを見ていきましょう。

そもそも、『DOCTYPE宣言』とは、HTML/XHTMLの文章の一番初めに指定するもので、ブラウザは、設定した宣言の内容に従って表示されます。

また別の記事にHTMLの書き方を説明しますが、ここではDOCTYPE宣言をどこに書くかだけでも記載しておきます。

<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>

このように、一番上に宣言します。また、今回の記述はHTML5です。XHTMLやHTML4.01だと宣言が違うので下の表をみておいてください。

言語規格 DOCTYPE宣言
HTML4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
XHTML1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML5   <!DOCTYPE html>

上記の表は横スクロールします。

Strict型とTransitional型

実は、HTMLとXHTMLのまた細分化があり、Strict型とTransitional型があります。

Strict型は、言語仕様に厳密に従って記述することが求められる文書型で、少しでも仕様に違反するとエラーとなります。

Transitional型は、移行型とも呼ばれ、HTML4.01/XHTML1.0の仕様に定められていない古い時代のHTMLの文法で記述してもエラーとしない文書型になります。

HTMLとXHTMLではコードを記述する際の細かいルールに多少違いがありますが、一般的にHTMLよりもXHTMLの方がコードを記述する上での制約が多く、省略せずにまた、厳密に書く必要があります。

基本的にXHTMLの記述ルールに従って書いたものはHTMLとしても正しいものとされるので、より厳しい方のXHTMLのルールを理解している方が得です。

まとめ

XHTMLは、記述ルールが厳密のため覚えないといけないことが多々あります。

そんな細かいルールを取っ払ってくれたのがHTML5です。

HTML5によって表現の仕方やできることも増え、Webサイトで表現豊かなものが作れるようになりました。

もし、修正対応等でXHTMLを触っていてうまくいかない場合は、厳密なルールから外れているケースがありますので、そこをしっかり確認しましょう。

初心者の方は、HTML5から勉強して問題ないので、まずはそちらを勉強してからXHTMLの違いを調べたほうが理解しやすいかと思います。

同じような言葉がたくさん出てきましたが、理解できましたでしょうか？

これに懲りずに、頑張って勉強進めてください。

html

Related

Ranking

目次