Day 1・HTMLの構造 — 骨組みを読む
要素・タグ・属性 — ラベル付きの箱
HTMLの一番小さな部品「要素」を、開きタグ・中身・閉じタグ・属性に分けて読めるようになる。
AIに「ホームページを作って」と頼むと、たくさんのが返ってきます。最初は暗号のように見えますが、実はとても単純な部品のくり返しでできています。その一番小さな部品を(要素)と呼びます。まずはこの一個を読めるようになりましょう。
たとえるなら
HTMLの要素は「ラベルを貼った箱」です。箱の中に中身を入れて、外側に何が入っているかのラベルを貼る。ラベルを見れば、開けなくても中身の種類がわかる。HTMLもまったく同じ考え方です。
<p>これは段落です</p>上の1行を分解します。先頭の <p> が「ここから段落が始まるよ」という開きタグ、まん中の「これは段落です」が中身、最後の </p> が「段落おわり」という閉じタグです。閉じタグにはスラッシュ(/)が付くのが目印。この開きタグ＋中身＋閉じタグの3点セットで、1つのになります。
たとえるなら
開きタグと閉じタグは「かっこ」のペアです。( で開いたら必ず ) で閉じるように、<p> で開いたら </p> で閉じる。片方を閉じ忘れると、文章がどこまで続くのか誰にもわからなくなります。
次に(属性)です。属性は、タグに付ける「追加のメモ」です。開きタグの中に 名前="値" の形で書きます。たとえばリンクなら「どこへ飛ぶか」を、画像なら「どのファイルを表示するか」を、この属性で指定します。
<a href="/company">会社概要</a>たとえるなら
属性は宅配便の「送り状」です。箱(タグ)そのものは同じでも、送り状に書く宛先(値)によって届け先が変わる。href="/company" は「会社概要ページ宛」と書いた送り状だと思ってください。
壊れやすい書き方
属性の値をダブルクォートで囲っていない。今は動いても、値に空白や記号が入ると崩れる。
<a href=/company>会社概要</a>安全な書き方
値を " で囲む。AIもふつうこう書く。読むときは 名前="値" のかたまりを探すと属性が見つけやすい。
<a href="/company">会社概要</a>img など「中身のない要素」もある
画像の <img> や改行の <br> は中身を持たないので、閉じタグがありません。「中身がない箱＝閉じタグなし」と覚えると混乱しません。すべての要素に </...> があるわけではない、と知っておけば十分です。
AIにはこう頼む
AI生成のHTMLで意味がわからないタグに出会ったら、そのまま貼り付けて「この <◯◯> は何の要素で、この属性は何を指定していますか。初心者向けに一言で説明して」と聞けば、確実に読み解けます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
<a href="/company">会社概要</a> の href="/company" の部分は何と呼ばれますか。
閉じタグの見分け方として正しいものはどれですか。
「要素・タグ・属性」の関係を、たとえを使って自分の言葉で説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。