HTMLのHeader部分は、meta要素（keydowordsやdescription）、link要素、script要素、tittle要素を記述します。Webサイト内で共通利用するファイルなどを基本セットを統一します。複数人が共同でWEBサイトを作る場合は、記述ルールを策定してスタッフ内で共有しましょう。
headerの記述例
よく使われる記述の例は以下の通りです。ほんの一例ですので、これら全てを記述する必要はありません。
index.html
| <html xmlns=”http://www.w3.org/1999/xhtml”>・・・1 |
| <head profile=”http://gmpg.org/xfn/11″>・・・2 |
| |
| <meta charset=”UTF-8″>・・・3 |
| |
| <!– keywords and description –>・・・4 |
| <meta name=”keywords” conten=”HTMLタグ・WEBカラー |
| 等の早見表。” /> |
| <meta name=”description” conten=”HTML,カラー,画像, |
| 特殊文字” /> |
| |
| <!– for SmartDevice –>・・・5 |
| <meta name=”viewport” content=”width=device-width, |
| initial-scale=1.0,user-scalable=no” /> |
| <meta name=”format-detection” content=”telephone=no” |
| /> |
| |
| <!– for Microdata & ORG –>・・・6 |
| <meta itemprop=”name” content=”” /> |
| <meta itemprop=”description” content=”” /> |
| <meta property=”og:tittle” content=”” /> |
| <meta property=”og:type” content=”” /> |
| <meta property=”og:url” content=”” /> |
| <meta property=”og:image” content=”” /> |
| <meta property=”og:site_name” content=”” /> |
| <meta property=”og:detection” content=”” /> |
| |
| <!– Favicon & icon –>・・・7 |
| <link rel=”shortcut icon” href=”./common/img/favicon.ico” |
| type=”image/vnd.microsoft.icon” /> |
| <link rel=”apple-touch-icon” href=”./common/img/ |
| apple-touch-icon.png” /> |
| |
| <!– Style Sheet –>・・・8 |
| <link rel=”stylesheet” href=”./common/css/initialize.css” |
| media=”screen,projection,print” /> |
| <link rel=”stylesheet” href=”./common/css/style.css” |
| media=”screen,projection,print” /> |
|
| <!– Script –>・・・9 |
| <Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/ |
| jquery.min.js”></Script> |
| <Script src=”js/xxx.js”></Script> |
| |
| <!– html5 for under ie8 –>・・・10 |
| <!–[if it IE 9]> |
| <Script type=”text/javascript” src=”./common/js/html5shiv |
| .js”></Script> |
| <![endif]–> |
| |
| <!–[if it IE 6]> |
| <Script src=”./common/js/DD_belatedPNG.js”></Script> |
| <Script> |
| DD_belatedPNG.fix(‘transpng’); |
| </Script> |
| <![endif]–> |
| |
| <!– google analytics trackingcode –>・・・11 |
| [解析用スクリプトを記述] |
| <!– /google analytics trackingcode –> |
| |
| <title>Name of Web site</title>・・・12 |
| </head> |
1.ルート要素（html要素）
HTML文書の始まりは、必ずルート要素（<html>）を記述します。また、HTML文書の終わりは必ず</html>を記述して閉じます。
XML名前空間を宣言
HTML文書で利用しているタグがXHTMLのものであることを示すため、以下のように記述します。
<html xmlns=”http://www.w3.org/1999/xhtml”>
これにより、XML対応ツールやブラウザは、XHTMLのものであることを認識します。すると文書をXHTMLとして標準的に（見出し、段落などの要素をそれらしく）レンダリングして表示してくれます。
2.ヘッダータグ
ヘッダーの開始を表します。「profile=”http://gmpg.org/xfn/11″」とは、HTML内でXFN（XHTML Friends Network）のバージョン1.1を使いますというプロファイルです。必ず記述するわけではありません。
HTML文書の文字コードを指定します。WordPressではPHPを使用しますので、「charset=utf-8」を指定します。
・文字コード指定は、文字化け防止のために必ず指定しましょう。
・「<title>」タグなどが読み込まれる前に指定します。
・HTML5からは、ファイルの文字エンコーディングにUTF-8を使用することが推奨されています。
HTML5の記述方法
meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。以下のポイントを押さえましょう。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
HTML5でも問題ありませんが、charset属性を使用すれば以下のように省略できます。
<meta charset=”UTF-8″>
そのHTML文書の説明（description）とキーワード（keyword）を指定します。 ここで指定した値は検索エンジンで利用されるので、慎重に言葉を選んで記述しましょう。
スマートフォン向けの機能です。meta要素に「name=”viewport”」を記述すると、文書の表示領域を設定することができます。
マイクロデータと、「いいね！」（facebook）ボタンなどで利用するOGPコードを記述します。
7.ファビコンへのリンクを記述
Favicon（ファビコン）へのリンクを記述します。
8.CSS（スタイルシート）へのリンクを記述
CSS（スタイルシート）の外部ファイルへのリンクを記述します。htmlファイルに直接スタイルを書くよりも、スタイルをCSSファイルにまとめる方が1度の記述で済みます。
media=（メディアタイプ）
スタイル・シートが適用される媒体やメディアタイプを設定します。デフォルト値は｢screen｣で、「media=」は必ず記述する必要はありません。しかし、設定しておけばコンピュータにとって親切です。以下のように設定することができます。
| 値 |
説明 |
| screen |
初期値。ページ概念のないコンピューター画面上での表現。 |
| print |
プリンター出力用。 |
| projection |
プロジェクト表現用。 |
| aural |
音声合成装置用。 |
| braille |
点字感触装置の表現用。 |
| tv |
テレビジョン用。 |
| all |
汎用装置用。 |
9.JavaScriptファイルへのリンクを記述
JavaScriptの外部ファイルへのリンクを記述します。htmlファイル内にjavasCriptを記述する場合は、Scriptタグ（</Script>～</Script>）を記述して、その中に関数を定義する必要があります。しかし、予めJavaScriptの記述を「xxx.js」などの外部ファイルにまとめれば、記述をスッキリさせることができます。
jquery読み込み
以下の記述により、GoogleがホストしているjQueryを取り込んでいます。jQueryを予めダウンロードして読み込む場合もありますが、以下のようにすればダウンロードする必要はありません。
<Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></Script>
10.IEの下位バージョンに対応する際の記述
サイトの閲覧者が使うブラウザがIEの下位バージョンだった場合、そのバージョンに対応するための記述が必要です。
html5shiv.js
<Script type=”text/javascript” src=”./common/js/html5shiv.js”></Script>
「html5shiv」はJavaScriptで書かれたライブラリです。ie8以下にhtml5の新要素を認識させます。以下のURLからダウンロードできます。
→html5shiv
DD_belatedPNG.js
<Script src=”./common/js/DD_belatedPNG.js”></Script>
「DD_belatedPNG.js」は、IE6で透明部分のあるPNG画像を表示させることができるJavaScriptで書かれたライブラリです。以下のURLからダウンロードできます。
→DD_belatedPNG
11.アクセス解析用スクリプト
アクセス解析するためのスクリプトを記述します。
12.タイトル
WEBサイトのタイトルを記述します。
WordPressのヘッダー要素（例
私が、WordPressサイトを作るときによく使用する記述例です。タイトル名や、画像のフォルダまでのパスをWordpressの関数によって取得します。
<!DOCTYPE HTML>
|
<html dir=”ltr” lang=”ja”>
|
| <head>
|
| <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
|
| <title><?php bloginfo(‘name’); ?></title>
|
| <link rel=”apple-touch-icon” href=”<?php bloginfo(‘template_url’); ?>
|
| /images/xxxx-icon.png” />?>
|
| <link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>
|
| /images/xxxx-favicon.ico” />
|
| <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php
|
| bloginfo(‘stylesheet_url’); ?>” />
|
<!–[if lt IE 9]>
|
| <meta http-equiv=”Imagetoolbar” content=”no” />
|
| <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
|
<![endif]–>
|
| <script src=”<?php bloginfo(‘template_url’); ?>/js/xxxx.js”></script>
|
| <?php wp_head(); ?>
|
| </head>
|
