head要素内を記述する

表示されないが重要なhead要素

head要素の内部に必要な要素を追加していきます。

文字コードの指定

cssやjavaScriptの利用を明記します。

HTML

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

CSSファイルパス、javaScriptファイルパスの指定

link要素を使って、このドキュメントで利用するcssファイルパスを明記します。cssファイル名はstyle.cssとします。実際にスタイリングを行う場合は、このファイルに追加していきます。

javaScritpは未だ使う予定がないので記述しません。

HTML

<link rel="stylesheet" href="http://xhtmlsample.web.fc2.com/css/style.css" type="text/css">

meta要素 descriptionの記述

このXHTML文書の概要を記述しておきましょう。検索エンジンでの結果表示において、タイトルと共に使われる場合があります。ユーザにとって魅力的な文章を記述しましょう。

検索結果例: タイトル下3行がdescriptionの記述

meta要素 keywordの記述

このXHTML文書のキーワードを記述しておきましょう。キーワードの区切りにはカンマを使います。検索エンジンはこのキーワードを利用して、文書と検索ワードの関連を決めるかもしれません（どのように利用されるかは検索エンジン次第です）。

その他にも必要に応じて要素を追加してください。

ここまでのhead要素内記述をまとめました。

HTML

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <link rel="stylesheet" href="http://xhtmlsample.web.fc2.com/css/style.css" type="text/css" />
    <title>HTMLX　Sample Web page</title>
    <meta name="description" content="XHTMLとCSSを利用したウェブサイト制作の実践講座です。部分的な説明に留まらず制作の最初からワークフロー形式で説明していくためHTMLに関する理解を深めることができます。" />
    <meta name="keywords" content="XHTML,CSS,実践" />
</head>

→次のページ：body要素内を記述する

←前のページ：HTMLコーディング開始