headタグの基礎を理解しよう

今回のテーマはheadタグです。以下のソースコードをもとに説明していきます。

<html>
  <head>
   <meta charset="UTF-8">
   <title>HTMLの基礎</title>
  </head>

    <body>
    まずはheadタグを理解しましょう。
    </body>
</html>

<head>～</head>の部分がheadタグと呼ばれています。headにはメタ情報というサイトの情報を記述することができるようになっています。

なお、ここに入力された内容はブラウザで開いた時には表示されず、ソースコードの確認をしなければ内容は参照できないようになっています。

<body>～</body>の部分がWEBページの本文ですね。ここに書かれた内容がブラウザで開いた時に表示されることになります。

では、headタグについて細かくみていきます。

次に<title>HTML演習</title>という記述ですが、titleタグといってWEBページのタイトルになります。そのままですね。ここで記述した内容は、検索結果やブラウザでブックマーク/お気に入りに追加した時に、表示される名前にも使われますのでしっかり記述しておきましょう。

その他headタグに記述できる内容の中でも重要なものを説明いたします。

スポンサードリンク

キーワードを指定する

作成しているWEBページにとって重要なキーワードを記述します。検索で上位表示させたいキーワードを入れましょう。<meta name=”keywords” content=””>というような記述の仕方をしますが、contentの中にカンマ(,)区切りでキーワードを入れていきます。何でも詰め込むのではなく、数は3～5個くらいにおさめましょう。

<meta name="keywords" content="HTMLの基礎,headタグ,meta">

説明文を入れる

WEBページの説明を記述します。<meta name=”description” content=””> というような記述の仕方をしますが、contentの中に説明を書きます。ここに記述した内容は検索結果でタイトルの下に説明文として表示されます。

<meta name="description" content="HTMLのheadタグを学ぶページです。">

スタイルシートを読み込む

スタイルシートというのは、WEBページの見た目を指定するための言語です。良く使われるのはCSSと呼ばれる言語で、CSSで記述したファイルを読み込んでWEBページの見た目を変えることができます。

<link rel="stylesheet" href="style.css">

rel⇒種類が何であるか href⇒CSSファイルがどこに保存されているかこれらの情報を記述してCSSファイルを読み込みます。なお、CSSについての詳細は、CSSカテゴリをご参照ください。

ファビコンを指定する

ファビコンというのは、ブラウザのタブ等に小さく表示されているWEBページを表すアイコンのことです。このファビコンを指定する場合もheadタグで指定します。

<link rel="shortcut icon" href="favicon.ico">

rel⇒種類 href⇒ファイルの場所これらの情報を記述してファビコンを指定します。

なんとなくheadタグについて理解できましたか？はじめはこれらのことを理解できていれば十分です。慣れてきたら他にどのようなものがあるのか、色んなWEBサイトのソースコードを覗いてみましょう。色んなサイトを見ることでかなり勉強になります。

headタグの基礎を理解しよう