head タグエレメント

　head タグエレメントは、web ページの設定情報を入れるための HTML タグエレメントです。

　HTMLページで使用する、言語、作者、使用フォント、スクリプト、CSS、SNS情報などのページ情報は <head> 内に入れます。 webページとしては表示されませんが、商用として作成することや検索ロボットに対応するには重要なエレメントです。

　以下の <title>、 <meta>、 <base>、 <link>、 <script>、 <style> エレメントを包括します。

<title>: ウィンドウ最上部のタブに表示
<meta>: ページの使用文字コード、作成者、ページ説明、ページでの主要単語、検索ロボットへの対応など
<base>: URLのたどり方を変更。全てのページに共通性を持たせなければならないため使用には注意が必要
<link>: SNS、外部との関連情報、CSSファイルの参照先もこのエレメントに指定
<style>: スタイルシートを直接編集
<script>: JavaScriptなどのスクリプトファイルの参照先、直接記述することもできる

＊<noscript> エレメントは <body> 内に入れます。

　<head> は、１つの HTML に１つです。HTML ページの内容以外で必要な情報をこのタグ内に記述します。 <title> も必ず一つにします。それ以外は自由です。

　<head> は開始タグ、終了タグが省略可能です。省略されたサイトはあまり見かけません。

title タグエレメント

　title タグエレメントは、ウィンドウやタブの上部に表示される web ページのタイトルになります。詳しくはtitle タグエレメントページを参照してください。

<title></title>

<meta>

　<meta>エレメントに付加情報を記述します。<meta>エレメントの主な属性は"http-equiv"、"name"、"content"、"charset"です。これら以外にはグローバル属性があります。
　詳しくはmeta タグエレメントページを参照してください。

検索ロボットへの許可/不許可

<meta name="robots" content="">

制作者名

<meta name="author" content="">

概要

　<meta name="description" content="">

キーワード

　<meta name="keywords" content="">

文字コード

<meta charset="">

　HTMLファイル記録した文字コードに合わせます。windows標準shift_jisで記録して、charset属性をutf-8に宣言はできません。

スクリプト名

　HTML5 以降のページで JavaScript を利用する場合には以下の宣言は不要になりました。

<meta http-equiv="Content-Script-Type" content="text/javascript">

詳しくは<script>エレメントを参照してください。

スタイルシート名

　HTML5 以降のページで CSS を利用する場合には以下の宣言は不要になりました。

<meta http-equiv="Content-Style-Type" content="text/css">

詳しくは<style>エレメントを参照してください。

　リフレッシュによるページの遷移は以下のように記述します。ブラウザによっては動作しない場合があります。

リフレッシュによるページ遷移例

<meta http-equiv="refresh" content="1;URL=url;" />

<base>

　URIのroot、基幹URIを定義します。ブラウザは<base>で設定されたURIを暗黙の内に辿ります。URLの辿り方が変化するのに注意が必要です。

<base target="_self" href="">

　定義しないもありです。
作成しない作成する

　詳しくはbase タグエレメントページを参照してください。

<link>

　<link> エレメントは、サイト内を適切に閲覧できるように誘導する機能や外部ファイルを取り込むための設定をする HTML タグエレメントです。

CSS の読み込み

<link rel="stylesheet" href="css/example.css" />

　詳しくはlink タグエレメントページを参照してください。

スタイルシート定義

スタイルシートを直接記述

　<style>によって、スタイルシート宣言を直接記述することができます。

記述しない記述する

<style type="text/css">
...
</style>

　<style> の詳しくはstyle タグエレメントページを参照してください。

スタイルシートの外部ファイル読み込み

　外部ファイルとして作成したCSSを読み込むには <link> エレメントを使います。

<link rel="stylesheet" type="text/css" href="">

　HTML5 以降では以下のメタ宣言は不要です。CSS の一択のためです。

<meta http-equiv="Content-Style-Type" content="text/">

<script>

　スクリプトは外部ファイルによる読み込み、直接記述ができます。
　スクリプトが利用できない場合の配慮も必要になります。詳しくは script タグエレメントページを参照してください。

　HTML5 以降での既定のスクリプトは JavaScript の一択になっています。スクリプトを使用するにはメタ宣言が先ず必要ですが、 HTML5 以降で JavaScript を利用する場合には省略が可能です。

Script の外部ファイル読み込み

　<script> エレメントで、外部ファイルとして作成したスクリプトファイルを読み込みます。

<script src="">

Scriptを直接記述

　スクリプトを直接書くことができます。<script> エレメントを使用します。
作成しない作成する

<script>
...
</script>

代替テキスト　<noscript>

　スクリプトに対応していない場合は、代替として<noscript>エレメントを使います。
　<noscript>エレメントは、<body>内に記述します。

Script メタ宣言

　HTML5 以降の web ページでは以下のメタ宣言は不要です。<!DOCTYPE html>と HTML5 であることが宣言された web ページについては<!DOCTYPE>を参照してください。

<meta http-equiv="Content-Script-Type" content="text/">

Example

　上記の選択肢によって簡単なHTMLページを作成することができます。<body>〜</body>内に何も記述がなければ何も表示されません。

JavaScript

　<head> のインターフェイスは、HTMLHeadElement に定義されています。詳しくは HTMLHeadElement を参照してください。