XHTML1.0とHTML5の違いと使い分けを現役エンジニアが解説【初心者向け】

初心者向けにXHTML1.0とHTML5の違いと使い分け方について解説しています。XHTML1.0とHTML5それぞれの特徴と違い、書き方について実際にブラウザで確認しながら詳しく見ていきます。また、Web作成でどのように使い分けていくといいかについても覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

XHTML1.0とHTML5の違いと使い分けについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

今回はXHTML1.0とHTML5の違いと使い分け方について詳しく説明していくね!

大石ゆかり

お願いします!

 

XHTML1.0とは何か

HTMLをXMLで再定義したものです。HTML文書では、冒頭にドキュメントの種類を宣言するための記述が必要です。XHTML1.0は、その中のドキュメントの種類の一種です。特徴として、HTML 4.01の文法の規則などからXMLの文法の規則が適応されています。

XMLとは

XMLは多くの人に使用されるマークアップ言語の1つです。ExtensibleMarkupLanguageの略称です。

また「HTML 4.01の文法の規則からXMLの文法の規則が適応される」とは、XMLによってHTMLを再定義するということです。

 

HTML5とは何か

HTML文書の冒頭に、ドキュメントの種類を宣言するために開発されたHTMLの新規格です。純粋なHTML文書の種類の5回目の改訂版です。HTML5では、HTML 4.01の文法の規則などの基礎を引き継いで、HTML 4.01で使用頻度の低かった記述やタグなどが廃止され、新たなタグや文法に見直されました。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

二つの違いと文法上のポイント

XHTML1.0は、XMLとしても使用されることを前提としているため、ブラウザ以外のアプリケーションにも連携しやすい文書です。一方のHTML5は、これまで通りブラウザとの連携を深めて、ブラウザの新しい技術との結合や表現に活かされます。では、XHTML1.0の宣言文の文法を見ていきましょう。

 

[html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.0でも、さらに3種類の宣言文を使用することが可能です。純粋なHTML文書のドキュメントの種類の宣言は、冒頭に定義することを推奨されています。

しかし、XHTML1.0では、そのHTML文書のドキュメントの種類の宣言文よりも前である冒頭に、XML文書としての宣言文を定義するものです。

 

初めのXHTML1.0の宣告文は、XHTML1.0の文法の規則が厳密に適応されてから非推奨の文法の記述は認められません。

2番目のXHTML1.0の宣告文も、XHTML1.0の文法の規則が厳密に適応されるものの、非推奨の文法の記述は許容されます。

3番目のXHTML1.0の宣告文は、2番目のXHTML1.0の宣告文と同様です。しかし、廃止予定のフレーム機能用を使用するために用意されています。また、細かい文法として、HTML5と異なる文法を例示します。

 

[html]

<img src="sample.jpg" alt="sample" width="100" height="100" />

imgタグなどの終了タグのないタグは、必ず開始タグの終了記号 > の直前に / を定義しなければなりません。

[html]

<img src="sample.jpg" alt="sample" width="100" height="100">

HTML5では、 / の定義は必要ありません。次に、HTML5の宣告文を例示します。

[html]

<!DOCTYPE html>

XHTML1.0も含めて幾つかの他にもあるドキュメントの宣告文よりも、簡素になりました。

 

Web上で検証しよう

[xhtml.html]

<?xml version="1.0" encoding="UTF-8"?>
<!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>XHTML1.0</title>
    <meta http-equiv="Content-type"
          content='text/html; charset="UTF-8"' />
</head>
<body>
  <img src="sample.jpg" alt="sample" width="100" height="100" />
</body>
</html>

 

[html5.html]

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>HTML5</title>
  <meta charset="utf-8">
</head>
<body>
  <img src="sample.jpg" alt="sample" width="100" height="100">
</body>
</html>

画像も用意した上で、上記の二種類のHTML文書をブラウザにて確認します。

どちらも表示の結果は同じです。

 

どちらを使うか

Webサイトとして表示させるブラウザの種類によっては、XHTML1.0の宣告文となるHTML文書では、レイアウトを指定するCSS3による装飾が無効となる場合があります。ブラウザ以外でのアプリケーションに用いるなどの特別な理由がなければ、迷わずHTML5の宣告文による文法を使用してください。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。