【HTML】 head要素内のタグ title･link･script要素の解説

前回に引き続き、この記事ではhead要素内のタグについて解説します。
title要素とlink要素について、サンプルコードを元に詳しく説明していきます。

head要素の中に書くタグの種類

title要素の役割

title要素は、その名の通りページのタイトルを指定します。
トップページではサイトタイトルのみを記載すれば問題ありません。

<title>サイトのタイトルです。</title>

個別ページでは、個別ページのタイトルとサイトタイトルを両方記載するようにしましょう。
先に個別ページタイトルを記載し、その次にサイトタイトルを記載します。
間は「｜」（パイプ）で繋いでおきましょう。

<title>個別ページのタイトルです。｜サイトのタイトルです。</title>

link要素の役割と種類

link要素では、そのページにリンク（連結）されているファイルを指定します。

最初にrelの属性値で何のファイルなのか指定し、その後の属性で細かな設定を指定します。
以下で主要なlink要素を詳しく解説しますので、それぞれのlink要素を必要に応じて記載してください。

rel属性

属性値「stylesheet」

<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,projection,tv" />

「stylesheet」は、そのページにリンクされているスタイルシートを表しています。
「type」はリンクされているスタイルシートのMINEタイプ（ファイルの形式のこと）を表しています。
スタイルシートはこのMINEタイプで問題ありません。
「href」はスタイルシートの置いてある場所を指定し、「media」はそのスタイルシートを適用するメディアを指定します。

属性値「alternate」

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="feed.xml" />

「alternate」は、そのサイトのRSSを表しています。
RSSを導入していない場合は、記載しなくても大丈夫です。
「type」にMINEタイプ、「title」に分かりやすい名称、「href」にRSSファイルの場所を指定します。

属性値「contents」

<link rel="contents" href="index.html" title="ホーム" />

「contents」は、そのサイトのトップページの場所を表しています。
「href」にトップページの場所を指定し、「title」に分かりやすい名称を記載します。

script要素の役割と種類

script要素では、そのページに使用するスクリプトを直接記述するか、スクリプトの外部ファイルの場所を指定します。

直接記述するやり方は、そのページのみにしか適用できず、改変する場合もページを直接編集しなければなりませんので、私はこちらを推奨しておりません。
HTMLのファイル内には、なるべく構造の部分のみを記載したほうが良いでしょう。

なぜなら、外部ファイルとして読み込ませておけば、各種変更が生じた場合にも外部ファイルを編集すれば全てのリンクされたファイルにその変更が適用されるからです。

構造はHTML、デザインはCSS、スクリプトはjavascriptといった形でそれぞれ分けて書く方式を意識しましょう。

では、外部ファイルを読み込ませる書き方を以下で紹介します。

<script type="text/javascript" src="js/jquery.js"></script>

「type」はMINEタイプ、「src」は外部ファイルの場所を指定します。
script要素は、裏側で処理させたい場合はhead要素内に記載します。
ページ内に埋め込んだり表示させたりする場合は、body要素内に記載します。
head要素とbody要素のどちらに記載するかは、用途によって使い分けてください。