1. /
  2. /
  3. HTML5の宣言文～<head>内の記述

HTML5の宣言文～<head>内の記述

HTML4.0xやXHTMLではhead内の記述が長かった（私が覚えきれてないだけ）のですが、HTML5の宣言文はすごくスッキリしています。

例えば、文字エンコーディングを指定するmeta要素の部分だけを見ても

HTML4.01での文字エンコーディング

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

HTML5での文字エンコーディング

<meta charset="utf-8">

これくらいなら覚えられますｗ

HTMLファイル初期設定

HTML5-宣言文～head内記述（簡易版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>

また、外部javascriptやスタイルシートの読み込みの記述も簡素化されています。

外部ファイルの読み込み

<link rel="stylesheet" href="style.css">
<script src="foo.js"></script>

とりあえずHTMLファイルを作るときにコピペで楽をするため用

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>

<body>

</body>
</html>

一応説明すると、
2行目、呪文ですｗ　viewportは任意に指定できますが、指定した場合は表示崩れに気をつけてください。
7行目、CSSの読み込みを入れました。CSSの名前が違う場合は修正してください。

スタイルシートを直接書き込む場合

<style>/* --css-- */</style>

javascriptを直接書き込む場合

<script>/* --javascriptコード-- */</script>

スタイルシートの『type=”text/css”』、javascriptの『type=”text/javascript”』、つまりtype属性は省略してもOKになりました。

古いバージョンのIE（Internet Explorer）でもHTML5の新要素を使えるようにするには？
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/html5shiv.js"></script>
<![endif]-->

注意：このjavascriptライブラリはHTML5の新要素に未対応のIEに新要素（<header>等）を認識させるスクリプトなので、スタイルシートの読み込み前に記述しないとHTML5タグと認識されずスタイルが反映しません。
ダウンロードはこちら（Google – html5shiv）