headタグ内に記載するものとは?title,link,meta,style,scriptタグ等

2019年8月16日 2021年1月26日

xxsuguruxx

1 あらすじ
2 <title>(タイトルタグ)
3 <meta>(メタタグ)
4 <link>(リンクタグ)
5 <style>(スタイルタグ)
6 <script>(スクリプトタグ)
- 6.1 src
7 まとめ

あらすじ

<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文書に反映する方法」に関しての詳しい情報がこちらをご覧ください

CSSをHTMLドキュメントに反映する方法は3つ!それぞれのメリット・デメリットは

2019.8.3

あらすじ Webサイトを作成する際、HTMLだけでは色のない単調なサイトが出来上がってしまいます。そこでCascade Style Sheet (カスケイド・スタイル・シート)、通称CSS、を一緒に使ってあげるだけで華やかなサイトに仕上げることができます。ではこのCSSをどのようにしてHTML...

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

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

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

src

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

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

memo

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

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

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

まとめ

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

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

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

この記事を書いた人

xxsuguruxx

Web Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。