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

DOCTYPE宣言

XHTMLの場合

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

HTML5の場合

<!DOCTYPE html>

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

HTML要素

XHTMLの場合

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

HTML5の場合

<html lang="ja">

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

文字エンコーディングの指定

XHTMLの場合

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

HTML5の場合

<meta charset="UTF-8" />

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

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

CSSの指定

XHTMLの場合

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

HTML5の場合

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

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

script要素

XHTMLの場合

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

HTML5の場合

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

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

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

その他の記事