PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

[HTML]XHTMLからHTML5に移行するときにやっておくべき作業内容

f:id:game-web-design:20180115104044p:plain
Icon made by Freepik from www.flaticon.com
こんにちわ!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>