head要素

head要素は、その文書の基本情報を指定するスペースで、画面には表示されない。title要素やmeta要素を含む。以下、XHTML 1.0 Transitional の場合の記述例。



1. XHTMLのMIMEタイプ / 文字コード

<head>
<meta http-equiv="content-language" 
content="ja" />
<meta http-equiv="Content-Type" 
content="application/xhtml+xml; charset=utf-8" />

※ XHTMLの場合 "application/xhtml+xml" が推奨されている。
(MIMEタイプはHTMLの場合は"text/html")
※ meta要素は空要素(「 />」が必要)。



2. ページタイトル / キーワード / ディスクリプション

<title>webnote.info</title>
<meta name="keywords" 
content="Web,ウェブデザイン" lang="ja" 
xml:lang="ja" />
<meta name="description" 
content="webnote(ウェブノート)は…です。" 
lang="ja" xml:lang="ja" />

※ 属性には「name="keywords"」「content="任意のテキスト"」を記述する。



3. CSS

<meta http-equiv="content-style-type"
content="text/css" />
<link rel="stylesheet" type="text/css" 
href="css/style.css" media="screen,print" />

※ CSSのMIMEタイプは"text/css"。
※ 外部スタイルシートはlink要素を設定し「rel」「type」「href="ファイル名.css"」を使用する(外部JavaScriptの場合は「src="ファイル名.js"」と属性が異なる)。
※ meta要素もlink要素も空要素(「 />」が必要)。



4. JavaScript

<meta http-equiv="content-script-type" 
content="text/javascript" />  
<script type="text/javascript" 
src="js/script.js"></script>

※ JavaScriptのMIMEタイプは"text/javascript"。
※ script要素の属性には「type="text/javascript"」「src="ファイル名"」を記述する(外部CSSの場合は「href="ファイル名.css"」と属性が異なる)。
※ script要素には、終了タグが必要。



5. 作成者情報 / 著作権 / ファビコン

<meta name="author" content="ウェブノート" 
lang="ja" xml:lang="ja" />

<meta name="copyright" 
content="Copyright 2012 webnote" />

<link rel="shortcut icon" href="./favicon.ico" />
<link rel="icon" href="./favicon.ico" />
</head>

※ link要素は空要素(「 />」が必要)。

go to top