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>
|