HTMLの<head>タグはこれから作成するhtmlファイル（サイト）の基本情報を人ではなく機械に伝えるという仕事をします。
この基本情報はメタデータと呼ばれます。
メタデータにはどのような情報が含まれるのかというと、
- サイトのタイトル (title)
- サイトで使われる文字コード (charset)
- サイトの作者 (author)
- サイトの内容説明 (description)
- サイト内容を表現するキーワード (keyword)
- 外部ファイルの取り込み (link)
メタデータはあくまで「付け足し情報」なので、ブラウザ上には表示されません。（つまり、人には伝えられません。）
<head>内でよく使われる要素
- <title>
- <meta>
- <link>
- <style>
<title>要素
<title>要素には作成するサイトのタイトルを記入します。
<meta>要素
<meta>要素にはメタデータを記入します。
<meta>要素が持つ属性は複数あるのですが、よく使われる属性はcharset属性, name・content属性です。
charset属性
サイトで使用する文字コードを指定します。
最近ではよっぽどのことがない限り”UTF-8″が使われます。
name・content属性
多くの<meta>要素にはname属性とcontent属性が含まれ、この2つはセットで使われます。
name属性には<meta>要素の種類を示します。
例えば、サイトの作者を<meta>要素で定義したい時は
name = “author”と指定します。
これで、機械はあぁ。この<meta>要素は作者を伝えようとしているんだなぁ。と情報を受け取る準備をします。
でも、まだ具体的に作者の名前が何の誰それであるのかは分かりません。
ここでcontent属性の出番です。
content属性で具体的な名前を教えてあげます。
この文書の作者は私ロンでありますので、
content = “ロン”
と指定します。
現在よく使われるname属性には
- author
- description
- keyword
があります。
author（サイトの作者を指定します。）
description（サイトの内容の説明を記入します。70~80文字で書くのが理想とされてます。）
keyword（サイトを表すキーワードを指定します。ただし、現在は以下の理由から使われないようです。）
注: 多くの
MDN web docs: head には何が入る? HTML のメタデータ<meta>機能はもう使われていません。例えば、 keyword の<meta>要素 (<meta name="keywords" content="fill, in, your, keywords, here">) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。
<link>要素
外部ファイル（CSS, JavaScriptなど）の読み込みに使います。
<link>要素でよく使う属性はrel属性とhref属性です。
まず、rel属性ですがリンク元（自分が作成したサイト）とリンク先との関係性を示します。
次にhref属性ではリンク先の外部ファイルのURLを指定します。
<style>要素
<style>要素にはhtml内に書かれた要素のデザインを行うCSSを書きます。
しかし、CSSのコードが長くなるとhtmlのコードが読みづらくなるので、一般的には外部ファイルとして作成し、<link>で読み込みます。
コメントを残す