HTMLヘッダ (head) の書き方


headタグ内に書けるタグ

 headタグ内には宣言やメタ情報を書きます。ここに書くことができるタグは以下の通りです。

baseこのHTMLのベースURLとターゲット。
metaメタ情報。例えば、文字コードなど。
titleそのHTMLページのタイトル。これは必須です。
linkこのHTMLにリンクするファイルを指定する。
styleスタイルシートの定義。
scriptスクリプトの定義。
noscriptブラウザがスクリプトに対応していない場合の表示。
主要ブラウザはすべてスクリプトに対応しているので、このタグを使う必要はない。


headタグの例
<head>
<base href="http://localhost/doc/" />
<meta charset="utf-8" />
<title>sample</title>
</head>

ヘッダ内タグの詳細

base

 baseタグを使うとこのページ内のリンクのURLを相対パスで書けるようになります。絶対パスが長い場合、これは便利です。一方、baseで指定するURLは絶対パスなので、このドキュメントを他のサイトへ移動すると正しく表示できなくなります。(元のサイトに全部コンテンツが残っていれば別ですが)

baseタグの例
<base href="http://localhost/doc/" />

サンプル


meta

 metaタグはHTML文書のメタデータを定義します。メタデータとは、文字コードやHTML文書の説明、キーワードなどです。

 よく使われるメタデータは文字コードですが、次のように書きます。この例では文字コードとしてUTF-8を指定しています。LinuxではたいていUTF-8が使われています。UTF-8以外ではShift_JISやEUCがよく使われます。

<meta charset="utf-8" />
 HTML4やXHTMLでは次のように書きます。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 HTMLページのキーワードを定義するには次のようにします。キーワードは検索エンジンなどで利用されるようですが、実際は全文検索なのであまり意味がないようです。

<meta name="keywords" content="HTML,CSS,XML" />

title

 titleタグはこのHTMLページのタイトル文字列を指定します。この文字列はたいていブラウザのタブに表示されます。

<title>ホームページ</title>


link

 linkタブは外部ファイルをこのHTMLに関連付けるのに使います。よく、外部CSSファイルを指定するのにつかわれています。

<link rel="stylesheet" href="style1.css" />
<link type="text/css" rel="stylesheet" href="../css/style2.css" />
<link type="image/x-icon" rel="icon" href="/favicon.ico" />

 linkタブ固有の属性を下に示します。

属性説明
hrefURL (例) href="../css/style1.css"リンク先のURLを指定する。
hreflang言語コード (例) hreflang="ja"リンク先のリソースの言語コードを指定する。
mediaメディア。(例) media="all"出力先のデバイスやその属性を指定する。
例えば、プロジェクターに表示するときは media="projection"などとする。
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
(例) rel="stylesheet"
リンク先の関連性を示す。この属性は必須である。
sizes高さ x 幅rel="icon"のときのサイズ。
type(例) type="text/css"リンク先のメディアタイプ。


style

 styleタグは、このHTMLのスタイルシートを記述するとき使います。

<style>
h1 {
  color: red;
  text-align: center;
}

.border1 {
  padding: 4px;
  border: dotted 1px blue;
}
</style>

 styleタブ固有の属性を下に示します。

属性説明
media(例) media="projection"対象のデバイスやメディアを指定する。
scoped(例) scoped="scoped"HTML本体内でローカルなスタイルを記述するとき使う。
typetext/css左の通り記述する。

scoped属性の使用例

<div>
<style scoped="scoped">
  p { color: red; }
</style>
 <p>赤で表示される。</p>
</div>

赤で表示される。


script

 scriptタグはスクリプトを読み込んだり内部で定義するのに使用します。

 例えば、jQueryライブラリ v1.8.1 を読み込んで使用するには下のようにします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

 タグ内に直接、スクリプトを記述することもできます。

<script>
window.location.href = "http://localhost/index.html";
</script>

 scriptタグ固有の属性を下に示します。

属性説明
charset文字コード。(例) charset="Shift_JIS"外部ソースの文字コードを指定する。
defer(例) defer="defer"HTMLページが読み込まれた後、すぐ実行するソースを指定する。これはsrc属性とともに使用する。
srcURL。(例) src="userlib.js"外部スクリプトソースのURLを指定する。
typeスクリプトのMIMEタイプ。(例) type="text/javascript"スクリプトの種類を指定する。


noscript

 noscriptは古いブラウザのために残されています。現在の主要ブラウザで使用することはありません。