1. ホーム /
  2. HTML /
  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,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>タイトル</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
  コンテンツ
</body>
</html>

簡単に説明すると、
2行目：このHTMLページは日本語で書かれていますよと明示
4行目：UTF-8で書かれていますよと明示
5行目：viewportは任意にサイズ指定できます
6行目：電話番号の自動リンク機能を無効化
8行目：CSSの読み込み。CSSファイル名、設置場所は任意で修正

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

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


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

javascriptを直接書き込む場合


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