<head> メタデータのコンテナ

「どういう形式で書いてあるか」を宣言する、head要素

師匠

前に説明したように、HTMLファイルの基本構造は、下の図みたいな感じや。

師匠

前のページ<html>の説明をしたな。

師匠

今から <head><title><body> と、順番に説明するで。

弟子

はい。

師匠

ルート要素である <html>の下には、<head><body> の二人の子供がおる。

師匠

DVDに例えると、<head>は「DVDのパッケージ」で、<body>は「DVDの本体」や。

弟子

はっ?

師匠

アホみたいに (くち)()けとると、アホに見えるで。

弟子

(閉)

師匠

「DVDのパッケージ」と「DVDの本体」、どっちが欲しい?

弟子

「DVDの本体」です。

師匠

そうやな。DVDの価値は「DVDの本体」にあんねん。
HTMLの場合も同じやで。
本質的な価値のある情報は、<body>の中に書くんや。

弟子

じゃ、<head>には何を書くんですか?

師匠

DVDのパッケージには、
「言語は、日本語と英語」
「字幕は、日本語と英語とドイツ語」
「18歳以下閲覧禁止」
「リージョンコードは2」
みたいな情報が 書いてあるやん。

師匠

同じように<head>には、<body>の内容が「どういう形式で書いてあるか」みたいな付加的な情報を書くわけや。

師匠

<head>の内容は、ユーザ(閲覧者)には表示されない。
ブラウザに読んでもらう内容を 書くところや。

弟子

なるほど。
<head>ブラウザに対して書いて、<body>ユーザに対して書くんですね。

4種類の「必須」の要素

師匠

前のページで書いたけど、<html>は必須の要素や。

師匠

同じように、<head>も 必須の要素や。

師匠

ついでに言っておくと、次に説明する <title><body> も 必須の要素や。

弟子

<html><head><title><body> が必須要素、と。

師匠

ほんで、それぞれ書いて良いのは、1組だけ。
2組 書いたら、間違いや。

師匠

つまり、下のHTMLコードが、一番シンプルなHTMLコードや。
既に何回も書いているけど。

<!DOCTYPE html>
<html>
	<head>
		<title>
			
		</title>
	</head>
	<body>
		
	</body>
</html>
師匠

これは、寝てても書けるくらいに、よー覚えとけ。

師匠

で、HTMLコードを読むときには、この構造を見つけるところから始める。

(中級用) 一応、書いとく

師匠

難しい言葉で言うと、<head>メタデータのコンテナ と言うんや。

師匠

「メタデータ」っていうのは、データのためのデータ。
ここでの意味は<body>内のデータのためのデータ。

師匠

「コンテナ」は入れ物。

師匠

だから、「メタデータのコンテナ」ってのは、「<body>内の データのための データの 入れ物」ってことや。

師匠

なお、「 メタ○○ 」という言葉は、「 ○○のための○○ 」と訳すと、なんとなく分かる。
  ・ メタ言語 = 言語のための言語
  ・ メタ文法 = 文法のための文法
  ・ メタ情報 = 情報のための情報
  ・ メタ知識 = 知識のための知識
みたいに。

師匠

今 言ったことは、分からなくても気にするな。

復習

  • <head>には、ブラウザに対して 付加的な情報を書く。
  • 必須の要素: <html><head><title><body> (それぞれ1組)