XHTMLとHTML5の違い

XHTMLとHTML5の違いについて、具体的にどのように書き方などが違うのか比べてみたいと思います。

DOCTYPE宣言

DOCTYPE宣言の書き方には、以下のような違いがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

ご覧の通り、HTML5ではすごくシンプルなコードになりました。
この文書型宣言は、ブラウザーを標準モードにするという目的で記述しています。

HTML要素の書き方には、以下のような違いがあります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" lang="ja">

<html lang="ja">

HTML要素もとてもシンプルになりましたね。

文字エンコーディングを指定する際の書き方には、以下のような違いがあります。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta charset="UTF-8" />

文字エンコーディングについてもシンプルになりました。
なお、文字エンコーディングの指定はファイルの先頭から1024バイト以内に記述する必要があるため、なるべく先頭に近い位置に記述するようにしましょう。

ちなみに、HTML5では文字エンコーディングはUTF-8が強く推奨されています。理由としては、フォームやURLエンコーディングで予期しない結果になることがあるためとされているからのようです。

スタイルシートを指定する際の書き方には、以下のような違いがあります。

<link type="text/css" rel="stylesheet" href="style.css" media="all">

<link rel="stylesheet" href="style.css" media="all" />

スタイルシートは、今まで通りlink要素で指定をしますが、type属性によるMIMEタイプの指定は省略できるようになりました。また、style要素でCSSを扱う場合も、同様にtype属性を省略することができます。

スクリプトを指定する際の書き方には、以下のような違いがあります。

<script type="text/javascript" src="basic.js"></script>

<script src="basic.js"></script>

HTML5ではscript要素のデフォルトMIMEタイプがtext/javascriptとなるため、使用するスクリプトがJavaScriptの場合はtype属性を省略できるようになりました。また、script要素の中に記述する場合も、同様にtype属性を省略することができます。

概ね、このような感じで書き換えればHTML5形式として書くことができます。基本的なコンテンツ部分のマークアップに関してはHTML5の基本的なマークアップをご覧ください。