目次
あらすじ
<head>タグとは、実際のウェブ(web)ページには表示されませんが、ページの重要なデータを記載する場所です。
例えば、CSSを外部ファイルから引っ張ってくるときには<head>タグ内に<link>タグを記載したり、ウェブページ全体の文字コードを決める際もこの<head>タグ内に詳細を記載します。
今回はこの<head>タグ内の要素にはどのようなものがあるのかを中心にご紹介していきたいと思います。
具体的には、
- <title>(タイトルタグ)
- <meta>(メタタグ)
- <link>(リンクタグ)
- <style>(スタイルタグ)
- <script>(スクリプトタグ)
といった要素をご紹介します。
<title>(タイトルタグ)
このタイトルタグですが、ウェブブラウザ上のタグに表示されるタイトルを記載する際のタグです。
よくページタイトルと混同されがちですが、ページタイトルには基本的に見出し(heading)の意味がある<h1>や<h2>といったタグが使われるので、タイトルタグとは別物です。
ページタイトルはウェブページ内には表示されるのに対し、タイトルタグ内に記載されたものはウェブページ内には表示されません。
<meta>(メタタグ)
メタタグとはウェブページ内のデータに関する情報を記載するタグです。
メタタグにはそれぞれ属性があります。
詳しくは下記にて説明します。
charset
charsetとはcharacter setの略で、文字コードの設定という意味になります。
この文字コードには
- UTF-8
- ASCII
- ANSI
- Shift_JIS
- 8859
といった種類がありますが、とりあえずはUTF-8(Unicode)にすると覚えておいてください。
英語が世界共通語なのと同じように、パソコンにも世界共通の文字があり、それがこの「UTF-8 (Unicode)」にあたるといったイメージでしょうか。
name
name属性は必ずcontent属性とセットで記載してあげる必要があります。
name属性には
- author(ホームページ作成者)
- description(ホームページの概要)
- keywords(検索される際のキーワード)
といった値を選択することができます。
content
このcontent属性ではname属性で指定した値に沿って、それぞれの詳細を記載します。
例えば、name属性でauthorを選んだのならば、content属性の値はそのホームページを作成した人の名前を記載します。
<meta Name=”author” content=”Suzuki Hiroshi”>
name属性でdescriptionを選んだなら、content属性の値には作成したホームページの概要を記載します。
<meta name=”description” content=”Webデザインに関する記事”>
<link>(リンクタグ)
リンクタグは外部ファイルをHTML文書とリンクさせる際に使用するタグです。
特に外部CSSファイルとリンクさせる際にはよく利用しますので、必ず覚えておいた方がいいタグの一つです。
リンクタグでよく使用される属性には
- rel
- href
- type
といったものがあります。
<link rel=”stylesheet” type=”text/css” href=”http//~~~.com”>
それぞれの属性について説明していきます。
rel
relとはrelation(関係)の略で、HTML文書との関係性を表す際に使用される属性です。
値には
- author:
HTML文書の作成者の情報ページへリンクすることを表します。 - stylesheet:
スタイルシート、すなわちCSS文書へのリンクを表します。 - alternate:
alternate(代替え)テキストへのリンクを表します。例えば、翻訳ページやプリントページなど。
といったものがあります。
type
type属性はリンク先のドキュメントがどのようなタイプなのかを明確にする箇所です。
CSS文書であればtype=text/cssと記載します。
href
hypertext referenceの略で、リンク先のURLを記載する箇所になります。
<style>(スタイルタグ)
スタイルタグはCSSを外部ファイルではなくHTML文書に直接書き込む際に使用するタグです。
<head>
<style>
body {
color: red;
}
</style>
</head>
なお、CSS文書をHTML文書に反映する方法は
- 外部ファイルとして取り込む形式
- <head>タグ内に記載するインファイル形式
- HTMLのタグ内にstyle属性として直接反映するインライン形式
の3つの形式があります。
「CSS文書をHTML文書に反映する方法」に関しての詳しい情報がこちらをご覧くださいfa-arrow-circle-down
<script>(スクリプトタグ)
スクリプトタグはJavaScriptを取り込む際に使用するタグです。
スクリプトタグ内にJavaScriptを書き込むことで、HTML文書にJavaScriptが反映されます。
src
JavaScriptをスクリプトタグ内に直接書き込むことで、HTML文書に反映することができますが、その他の方法として外部ファイルから反映することもできます。
その際に使用される属性がこのsrc属性です。
イメージとしては、CSSファイルを外部ファイルから反映させる方法と同じです。
<head>
<script src=”javascript.js”></script>
</head>
まとめ
いかがだったでしょうか。
<head>タグ内の要素は表には表示されませんが、非常に重要な役割を担っています。
ホームページの本文に意識がいってしまいがちですが、<head>タグは忘れずに記載するようにしましょう。
