青い「次へ」は、押しても動かなかった。
一秒前まで、ちゃんとボタンに見えていた。
大きな白文字の題名。
画面いっぱいの夕焼け。
その下に、青く光る「次へ」。
ところが構造試験の幕が下り、色と画像が消えた瞬間、三つとも平らな箱になった。
検査台に赤い結果が並ぶ。
- 主な見出し: 見つかりません
- 画像の代わりになる説明: ありません
- 次のページへのリンク: 見つかりません
提出は残り一回。時計は五十秒。
イト
見えていたときは、ちゃんとページだったのに
ピコ
見た目は似せられても、この箱は自分の役割を伝えていないんだ
イト
じゃあ、色が消えても残るものを作るの？
イトの初稿には、同じ形の箱が三つ並んでいた。
題名らしい箱。
画像らしい箱。
リンクらしい箱。
「らしい」だけで、HTMLの中には何の役なのか書かれていなかった。
HTMLは、見た目より先に役割を渡す
HTMLは、ページの内容へ構造と意味を与えるためのマークアップ言語だ。
たとえば、h1はその区画の見出しを表す。
pは段落を表す。
aは、href属性を持つと行き先のあるリンクになる。
imgは画像を埋め込み、alt属性は画像を置き換える文章を持つ。
WHATWG HTML Living Standardは、HTMLの各要素が何を表すかを定めている。divとspanはほかに適切な要素がないときに使う一般的な箱で、それだけでは見出しやリンクの役割を持たない。
ユイ
大きく見えることと、大見出しであることは別なんですね
マコト
青い文字に見えても、行き先がなければリンクとは限らない
ピコ
うん。CSSは見た目を変えられるけれど、HTMLで何の内容かを選ぶ仕事は残るよ
ブラウザはHTMLを読み、要素の関係を木のような構造へ組み立てる。
さらに要素の意味は、支援技術へ伝えるアクセシビリティ情報の手がかりにもなる。
W3C HTML Accessibility API Mappingsは、HTML要素をアクセシビリティAPIへ対応付ける方法を定めている。ただし、要素名を正しくしただけで、すべての人に使いやすいページが自動完成するわけではない。
タグと要素は、同じ言葉ではない
ピコが題名の箱を開いた。
中から、三つの部品が出てくる。
<h1>夕焼けのあとで</h1><h1>は開始タグ。
夕焼けのあとでは内容。
</h1>は終了タグ。
開始タグから終了タグまでを含むまとまりが、h1要素だ。
タグはマークアップの印で、要素は内容や属性を含む構成単位として扱う。
画像のimgのように終了タグを持たない空要素もあるため、すべてを「前後のタグで囲む箱」とは考えない。
属性は、要素へ追加情報を渡す。
<a href="/episodes/next">次へ</a>
<img src="/images/sunset.avif" alt="夕焼けの丘で主人公が振り返る">hrefはリンクの行き先を持つ。
srcは使う画像を示す。
今回のaltは、画像が担う意味を短い文章で置き換える。
装飾だけの画像など、目的によって適切な代替文の扱いは変わる。ファイル名を機械的に入れれば完成、という欄ではない。
残り一回で、どの骨組みにする？
残り三十六秒。
修正台に三つの案が現れた。
- 同じ箱へ、もっと大きな文字と強い青色を付ける
- 箱を押したら動くように、JavaScriptだけを足す
- 内容の役割に合うHTML要素と属性へ組み直す
一つ目なら、色付きの画面ではまた本物らしく見える。
けれど構造試験が見ているのは、文字の大きさではない。
二つ目なら、マウスで押したときだけ次へ進めるかもしれない。
しかし、リンクの役割や行き先をHTMLから読み取れる形にはならない。
三つ目は、入れ子まで直す必要がある。
残り時間内に閉じタグを間違えれば、構造そのものが崩れる。
イトは色付きのプレビューを閉じた。
「これは、ページの題名」
最初の箱を外し、h1要素へ置き換える。
「これは、場面の説明が必要な画像」
imgへsrcとaltを持たせる。
「これは、次の話へ進む道」
青いだけの箱を外し、行き先を持つa要素へ組み直す。
最後に、題名、段落、画像、リンクの順序と入れ子を、イト自身が指でたどった。
残り九秒。
イトは作り直したHTMLを、最後の提出枠へ置いた。
色と画像を消しても、道が残った
時計がゼロになった。
構造試験の幕が、もう一度下りる。
青い色が消えた。
夕焼け画像も消えた。
ページは白地に黒い文字だけになった。
それでも検査台は、今度は緑に変わった。
- 主な見出し:
夕焼けのあとで - 画像の代わりになる説明:
夕焼けの丘で主人公が振り返る - 次のページへのリンク:
/episodes/next
イトが「次へ」を選ぶ。
色のない文字から、青い道が伸びた。
次の話の入口が開く。
見た目が消えても、見出しの役割、画像の代わりになる説明、リンクの行き先はHTMLに残っていた。
イト
きれいだから読めるんじゃなくて、何なのかを書いたから道具も読めたんだ
ピコ
そう。人に見える言葉と、機械が扱える構造を同じ内容から作る
ユイ
見た目と意味を分けると、どこを直すべきかも見えますね
正しい要素だけでも、完成ではない
構造試験は通った。
だが、ページはまだ白地のままだ。
題名は大きく見えるものの、物語に合う色ではない。
画像の置き場所も、画面幅いっぱいに広がっている。
余白も、並び方も決めていない。
HTMLは、内容の役割と関係を伝えた。
一方で、色、文字の大きさ、余白、配置などはCSSが主に受け持つ。
意味に合うHTML要素を選ぶことと、望む見た目へ整えることは、協力するが同じ作業ではない。
イトの手元には、外した青い色札と大きさ札が残った。
さっきまで、それを骨組みだと思っていた。
今は、骨組みに重ねる服のように見える。
白いページの奥で、色と余白の布が何枚も揺れた。
どの布も、まだHTMLのどこへ結ぶか決まっていない。
次回：見た目のルールはどこへ重なる？
HTMLでは、内容に合う要素と属性を選び、ページの構造と意味を伝える。
タグは印で、要素は内容や属性を含む構成単位として扱う。
色を消しても見出し、画像の説明、リンク先が残る骨組みを先に確かめる。
次回、ピコルート第9話。
見た目のルールはどこへ重なる？
HTMLの基本を図でも整理するなら、HTMLとはへ進めます。