head要素の書き方

この記事を書いている人 - WRITER -

shoutarou123

HN：しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び（Input）、人に教えること（Output）で、共に成長し喜び合える仲間を大切に思っています。

head要素には、そのWebページがどのような文書なのかをコンピューターに伝える情報が入っています。

では実際に記述する具体的な内容と、書き方について見ていきます。

必ず使われる要素

head要素に入れる要素は個々のWebページによって異なりますが、ある程度共通で使われる要素があります。

必ずといってよいほど使われるのは、『meta要素』、『title要素』、『list要素』です。

meta要素

meta要素は、Webページの仕様を伝えます。

Webサイトはページごとに仕様が異なるので、各ページの内容に合ったmeta要素と属性を記述します。

例えば、ページの文字コード（charset）、筆者名（author）、キーワード（keywords）、説明文（description）の

各属性を記述し、必要に応じて他の種類も入れます。

title要素

title要素は、Webページのタイトルを入れます。

１つのページに１度だけ「<title>タイトル</title>」で記述し、そのページのタイトルになります。

通常、title要素に入れた内容がブラウザのタイトルバーやタブに表示されます。

また、検索エンジンの検索結果に表示されるため、入れる内容の長さや分かりやすさが、重要になります。

link要素

link要素は、Webページに関連したHTMLファイル、CSSファイル、RSSファイルなど、外部ファイルへのリンクを示します。

これは、CSSファイルを読み込むときによく使います。

また、関連するファイルを記述するのにも使います。

link要素には、『rel属性』と『href属性』が必須です

rel属性は、リンク先の外部ファイルに対する関連性を示す。

href属性は、外部ファイルのURLを示す。

よく使われる要素

その他によく使われる要素は『base要素』、『script要素』、『style要素』です。

base要素

base要素は、文書の基本となるURL（href属性）で指定します。

例えば、「<base  href=”http://shoutarou.club/presents”>」と記述すると、

「presents」ディレクトリが文書内のリンク基準URLになります。

script要素

script要素は、使用頻度が高く、Webページ内にJavaScriptを書き込んだり読み込んだりします。

外部のJavaScriptを読み込む場合は『src属性』を使用します。

例えば、「<script  tipe=”text/JavaScript”  src=”JavaScript.js”></script>」のように記述します。

また、HTML内に直接JavaScriptを記述ｓることもできます。

その場合は、「<script  type=”text/JavaScript”>　～　</script>」の間にコードを記述します。

style要素

style要素は、Webページの中にスタイルシートを書き込むときに使います。

link要素が外部のCSSファイルを参照するのに対し、style要素はWebページに直接CSSを記述するのです。

まとめ

1. meta要素は、ページの説明や筆者などの仕様を伝える
2. title要素は、長さや表記をよく考える
3. link要素は、外部の関連ファイルやCSSを参照するときに使う