www.wanichan.com

HTML 4.01とXHTML 1.0とHTML 5、どれを選択すべき?

Section 1 モバイル対応にするために
最終更新日時: 2014/03/03 14:00:58
  • このエントリーをはてなブックマークに追加

現在よく使われているDOCTYPE型宣言は、HTML 4.01、XHTML 1.0、そしてHTML 5の3種類です。それぞれの違い等について説明します。

はじめに

Expression Web 4でのドキュメントの型宣言は、HTML 5にも対応しています。しかし、HTML 5はまだメジャーではなく、どのブラウザーでも対応させるためのJSファイルの読み込みなどの設定が必要です。

今回、レスポンシブWebデザインにするために、どのドキュメントの型宣言を選択すべきかいろいろと悩みました。結果的にはHTML 4.01 Transitionalにしました。

そこで、それぞれのドキュメントの型宣言の特徴などを挙げていきたいと思います。

HTML or XHTML?

HTMLとXHTMLとの違いについては、すでに『Web標準~HTMLとXHTMLの違い~』の記事に説明した通りです。しかし、その記事は2007年頃に書いた記事であり、現状を反映していません。

モバイルでも表示スピードを上げるには、できるだけ無駄のないコードにしたいものですね。

  • HTML
    • HTML 4.01までは古いブラウザーでもOK
    • 閉じタグが不要
    • HTML 5ではさらにコードがシンプルにできるが、新しいタグでは古いブラウザーが解釈できない
  • XHTML
    • XML宣言が必要だが、IE6では互換モードになる(UTF-8の場合はXML宣言を省略可能)
    • 閉じタグが必要
    • HTML 4.01の一部のタグや属性は旧式のものとして認識され、Expression Webのコードビューでエラー表示となる

HTMLは閉じタグが不要だけれども、XHTMLは閉じタグが必要で、XML宣言も必要となります。その分、HTMLコードサイズが大きくなります。

もし、とにかくシンプルなコードにしたい場合は、最新のHTML 5にした方がいいと思います。しかし、当サイトでは比較的古いブラウザーから閲覧しているユーザーが多いので、彼らには正しくWebページを表示することができなくなります。

IE6~8でも対応するために

IE6~8でもHTML 5で記述されたレスポンシブWebデザインのサイトを正しく表示するために、以下のコードを<head>と</head>の間に記述すればOKです。しかし、対応していないブラウザーはIE6~8だけではなかったように記憶していますが、具体的にどのブラウザーのバージョンがダメなのか思い出せません(汗

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

当サイトの場合は、HTML 5は時期尚早だと判断したため、HTML 4.01 Transitional にして、CSS 3のmedia query に対応するために、respond.jsを適用しています。ちなみにそのJSファイルはこちらから入手できます

注意点として、CSSファイルを指定したlinkタグの後に記述しなければいけない、ということです。

ちなみに、このページでは以下のように記述しています(実際は相対パスになってますけど、絶対パスに書き換えてます)。

<link href="/common/css/pink.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/common/css/web.css">
<script charset="utf-8" src="/common/js/respond.min.js" type="text/javascript"></script>

respond.js には3種類のファイルがあります。ただブラウザー表示に対応させたいだけであれば、圧縮されたrespond.min.jsでOKだと思います。

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、Google+コミュニティ Expression Web Users Group Japan に投稿してください!

▲このページのトップへ