<head>要素

HTMLの<head>タグはこれから作成するhtmlファイル(サイト)の基本情報人ではなく機械に伝えるという仕事をします。
この基本情報メタデータと呼ばれます。
メタデータにはどのような情報が含まれるのかというと、

  • サイトのタイトル (title)
  • サイトで使われる文字コード (charset)
  • サイトの作者 (author)
  • サイトの内容説明  (description)
  • サイト内容を表現するキーワード (keyword)
  • 外部ファイルの取り込み (link)

メタデータはあくまで「付け足し情報」なので、ブラウザ上には表示されません。(つまり、人には伝えられません。)

注意
ただし、タイトルだけはタブに表示されます

<head>内でよく使われる要素

  • <title>
  • <meta>
  • <link>
  • <style>

<title>要素

<title>要素には作成するサイトのタイトルを記入します。

記入例
<title>ASDサバイバル</title>

<meta>要素

<meta>要素にはメタデータを記入します。

<meta>要素が持つ属性は複数あるのですが、よく使われる属性はcharset属性, name・content属性です。


charset属性

サイトで使用する文字コードを指定します。
最近ではよっぽどのことがない限り”UTF-8″が使われます。

記入例
<meta charset = “utf-8”>

name・content属性

多くの<meta>要素にはname属性とcontent属性が含まれ、この2つはセットで使われます。
name属性には<meta>要素の種類を示します。
例えば、サイトの作者を<meta>要素で定義したい時は
name = “author”と指定します。
これで、機械はあぁ。この<meta>要素は作者を伝えようとしているんだなぁ。と情報を受け取る準備をします。
でも、まだ具体的に作者の名前が何の誰それであるのかは分かりません。
ここでcontent属性の出番です。
content属性で具体的な名前を教えてあげます。
この文書の作者は私ロンでありますので、
content = “ロン”
と指定します。

現在よく使われるname属性には

  • author
  • description
  • keyword

があります。


author(サイトの作者を指定します。)

記入例
<meta name = “author” content = “ロン”>

description(サイトの内容の説明を記入します。70~80文字で書くのが理想とされてます。)

記入例
<meta name = “description” content = “発達障害のASDを持つ管理人の生き様を書いたサイトです。厳しい世の中を生きるために試行錯誤し発信しています。自分も含めASDを抱える人の支えに少しでもなれば幸いです。”>

keyword(サイトを表すキーワードを指定します。ただし、現在は以下の理由から使われないようです。

: 多くの <meta> 機能はもう使われていません。例えば、 keyword の <meta> 要素 (<meta name="keywords" content="fill, in, your, keywords, here">) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。

MDN web docs: head には何が入る? HTML のメタデータ

<link>要素

外部ファイル(CSS, JavaScriptなど)の読み込みに使います。
<link>要素でよく使う属性はrel属性とhref属性です。
まず、rel属性ですがリンク元(自分が作成したサイト)とリンク先との関係性を示します。
次にhref属性ではリンク先の外部ファイルのURLを指定します。

記入例
<link rel = “stylesheet” href= “../../style.css”>

<style>要素

<style>要素にはhtml内に書かれた要素のデザインを行うCSSを書きます。
しかし、CSSのコードが長くなるとhtmlのコードが読みづらくなるので、一般的には外部ファイルとして作成し、<link>で読み込みます。

記入例
<style>・・実行したいCSSコード・・</style>

参考

参考 head には何が入る? HTML のメタデータMDN web docs 参考 HTMLタグリファレンス<HEAD>HTMLクイックリファレンス 参考 メタデータ (metadata)とは「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です