【HTML5】METAタグ等のHTML4との違い

スポンサーリンク

仕事ではHTML4とHTML5の両方を使っていますが、よくmetaタグの記述法とか変わっている所がわからなくなります。まだ他にもありますが基本的にどのHTMLにも入ってくるであろうものをまとめてみました。

DOCTYPEの指定

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

かなりシンプルになりました。

HTML5
<!DOCTYPE html>

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

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

HTML5でも上記の記述で問題ないですがcharset属性を使用すれば短くする事が可能です。

HTML5
<meta charset="UTF-8">

基準スタイルシートとスクリプト言語の指定

HTML4
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

HTML5では上記の内容はデフォルトとなり、省略されることになりました。

コンテンツ言語の指定

HTML4
<meta http-equiv="content-language" content="ja">

<html lang="ja">で指定するため不要になりました。一応今も使えます。

スクリプト埋め込み

HTML4
<script type="text/javascript"></script>

type属性が必須でしたがHTML5ではtype属性の初期値がtype="text/javascript"となっているため省略可能になりました。

<script></script>

HTML4まとめ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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 name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="">
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>

HTML5まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="">
<script></script>
</head>
<body>
</body>
</html>

Simple is Bestですね。