head tag
スポンサーリンク

あらすじ

<head>タグとは、実際のウェブ(web)ページには表示されませんが、ページの重要なデータを記載する場所です。

例えば、CSSを外部ファイルから引っ張ってくるときには<head>タグ内に<link>タグを記載したり、ウェブページ全体の文字コードを決める際もこの<head>タグ内に詳細を記載します。
 

今回はこの<head>タグ内の要素にはどのようなものがあるのかを中心にご紹介していきたいと思います。

 

具体的には、

  • <title>(タイトルタグ)
  • <meta>(メタタグ)
  • <link>(リンクタグ)
  • <style>(スタイルタグ)
  • <script>(スクリプトタグ)

といった要素をご紹介します。

 

スポンサーリンク

<title>(タイトルタグ)

 

title

 

このタイトルタグですが、ウェブブラウザ上のタグに表示されるタイトルを記載する際のタグです。

 

よくページタイトルと混同されがちですが、ページタイトルには基本的に見出し(heading)の意味がある<h1><h2>といったタグが使われるので、タイトルタグとは別物です

 

ページタイトルはウェブページ内には表示されるのに対し、タイトルタグ内に記載されたものはウェブページ内には表示されません

 

スポンサーリンク

<meta>(メタタグ)

 

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>(リンクタグ)

 

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

 

スタイルタグはCSSを外部ファイルではなくHTML文書に直接書き込む際に使用するタグです。

 

<head>
  <style>
    body {
      color: red;
    }
  </style>
</head>

 

なお、CSS文書をHTML文書に反映する方法は

  • 外部ファイルとして取り込む形式
  • <head>タグ内に記載するインファイル形式
  • HTMLのタグ内にstyle属性として直接反映するインライン形式

の3つの形式があります。

 

「CSS文書をHTML文書に反映する方法」に関しての詳しい情報がこちらをご覧ください

 

<script>(スクリプトタグ)

 

javascript

 

スクリプトタグはJavaScriptを取り込む際に使用するタグです。

スクリプトタグ内にJavaScriptを書き込むことで、HTML文書にJavaScriptが反映されます。

 

src

 

JavaScriptをスクリプトタグ内に直接書き込むことで、HTML文書に反映することができますが、その他の方法として外部ファイルから反映することもできます。

 

その際に使用される属性がこのsrc属性です。

 

memo
srcはsource(ソース)の略です。

 

イメージとしては、CSSファイルを外部ファイルから反映させる方法と同じです。

 

<head>
  <script src=”javascript.js”></script>
</head>

 

まとめ

いかがだったでしょうか。

 

<head>タグ内の要素は表には表示されませんが、非常に重要な役割を担っています。

 

ホームページの本文に意識がいってしまいがちですが、<head>タグは忘れずに記載するようにしましょう。

 

スポンサーリンク

Twitterでフォローしよう