[HTML]XHTMLからHTML5に移行するときにやっておくべき作業内容
こんにちわ!Noob Web Designer(@NoobWebDesigner)です!
今回はXHTMLからHTML5に移行するときにやっておくべき作業内容を備忘録。
ホームページのSSL化が著しくなった近年、サイトによってはHTML5化をしなければならない場合がでてくると思います。
私なりの方法ではありますが、XHTMLからHTML5に移行するときの作業内容をご紹介します。
各種宣言、エンコード、ヘッダー部分の修正をする
HTML5では各種宣言がスマートになっていますので、XHTMLで使ってきた不要な宣言等は削除します。DOCTYPE宣言
スニペットを使っていつも入れてきたDOCTYPE宣言、随分とシンプルに。変更前
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
変更後
<!doctype html>
htmlタグ
言語の設定もhtmlタグでやってしまいます。変更前
<html xmlns="http://www.w3.org/1999/xhtml">
変更後
<html lang="ja">
メタタグ
XHTMLでは必須だったメタ情報も、HTML5では全く必要なくなります。文字エンコードだけは必須ですが、よほどのことがない限りUTF-8を指定します。
変更前
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" />
変更後
<meta charset="UTF-8">
必要のないtype属性を削除
type属性もJSやCSSの読み込みにはもはや必要ないので削除。inputタグなど必要なものに関しては残しておいてください。変更前
<link href="css/common.css" rel="stylesheet" type="text/css" /> <script src="js/common.js" type="text/javascript"></script>
変更後
<link href="css/common.css" rel="stylesheet"> <script src="js/common.js"></script>
IE8以下対応の記述を削除
もはやIE8以下の対応をする必要もないでしょう。IE8対策の記述を削除します。<!--[if IE 8]> <script src="/js/css3-mediaqueries.min.js"></script> <![endif]-->
bodyタグ内を修正する
どちらかというとbodyタグ内の修正のほうが面倒です。Dreamweaverなどに搭載されいる「検索/置換」機能で一気にやってしまうと楽です。空要素にあるスペーススラッシュを削除
HTML5では空要素にあるスペーススラッシュ(<br />のような)が必要ないので、ページ容量削減の意味も込めて削除します。
変更前
<img src="hoge.png" alt="" /> <br />
変更後
<img src="hoge.png" alt=""> <br>