今回のテーマはheadタグです。 以下のソースコードをもとに説明していきます。
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
まずはheadタグを理解しましょう。
</body>
</html>
<head>～</head>の部分がheadタグと呼ばれています。headにはメタ情報というサイトの情報を記述することができるようになっています。
なお、ここに入力された内容はブラウザで開いた時には表示されず、ソースコードの確認をしなければ内容は参照できないようになっています。
<body>～</body>の部分がWEBページの本文ですね。ここに書かれた内容がブラウザで開いた時に表示されることになります。
では、headタグについて細かくみていきます。
<meta charset=”UTF-8″>という記述は、「このページは文字コードをUTF-8としてロードしなさい」という意味になります。ページの内容が文字化けしないためにも予め文字コードを宣言しておきます。文字コードというのは、文字や記号をコンピュータで扱うために、文字や記号1つ1つに割り当てられた固有の数字のことです。
<meta charset=”UTF-8″>を見てもらうとわかるかと思いますが、body等のように終了タグ(</body>みたいなの)がありませんね。metaタグは記述の仕方がちょっと変わっていて、オプションを追加するだけで中身がないため終了タグがありません。
次に<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サイトのソースコードを覗いてみましょう。色んなサイトを見ることでかなり勉強になります。