- 画面に出ない情報「head」があると分かる
titleと メタ の役わりが分かる- このサイトの一覧カードが、どう作られるか分かる
だい8で作った HTML をつかいます。15〜20分。
見えない情報 head
HTML には、画面に出るところと、画面に出ないところがあります。出ないほうが head です。
head には「このページの名前は？」「なかまわけは？」といった、ページについての説明を書きます。こういう「中身についての情報」を メタ といいます。
<!-- 画面には出ない、ページの情報 -->
<head>
<title>ぼくの じこしょうかい</title>
<meta name="category" content="算数">
<meta name="description" content="ぼくの すきなもの">
<meta name="icon" content="😀">
<meta name="date" content="2026-06-23">
</head>
title はページの名前。meta は name（なんの情報か）と content（その中身）をペアで書きます。
このサイトのひみつ：head からカードを作る
じつは、いま見ているこのサイトの「いちらん」にならんでいるカードは、人が手で作っているのではありません。
サイトを公開するとき（ビルドといいます）、コンピューターが public/docs/ の HTML を1つずつ開いて、それぞれの head を読みます。そして、メタからカードをじどうで作ります。
▼ head のメタが、カードのどこになるかtitle → カードの見出し
category → なかまわけ
description→ せつめいの文
icon → 絵文字
date → ならぶ順（新しい順）
だから、自分の HTML の head にメタを正しく書くだけで、ちゃんとしたカードがいちらんに出るのです。
だい8で作った自己しょうかい HTML（または新しい HTML）の <head> に、つぎの5つを書いてみよう。
title・category・icon・description・dateの5つを入れる- それぞれが、いちらんカードの「どこ」になるか予想してメモする（見出し？絵文字？）
dateを入れた日づけにしておく
つぎの Phase で： ここで書いた HTML を、じっさいにこのサイトの public/docs/ に置いて、自分のカードがいちらんに出るのをたしかめます。おたのしみに！
💡 AI に聞いてみよう：「
date のメタを変えると、いちらんのならび順はどうなるの？」と聞いてみよう。新しい日づけにすると、上のほうにくるのかな？
- head に書いたことは画面に出る？（→ 出ない。ページの情報をしまう場所）
- なかまわけ（カテゴリ）を決めるメタは？（→
category） - カードの見出しになるのは？（→
title）
つぎの回（だい10）では、CSS をつかって、ページの色や大きさ・見た目を自分で変えていきます。