3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

XHTMLからHTML5に移行する際に行う作業

Posted at

今回はXHTMLからHTML5に移行するときにやっておくべき作業内容を備忘録として残しておきます。
ホームページのSSL化が著しくなった近年、サイトによってはHTML5化をしなければならない場合がでてくると思います。
HTML5では各種宣言がスマートになっていますので、XHTMLで使ってきた不要な宣言等は削除します。

###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>

###空要素を削除

変更前

<img src="hoge.png" alt="" />
<br />

変更後

<img src="hoge.png" alt="">
<br>
3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?