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行目、呪文ですｗ
5行目、viewportは任意にサイズ指定できますが、指定した場合は表示崩れに気をつけてください。
7行目、CSSの読み込みを入れました。CSSファイルの名前が違う、設置場所が異なる場合は修正してください。

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

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

javascriptを直接書き込む場合

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

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