“武器になる” HTML を考える

mk-0A0

2023.3.31

学びの共有

こんにちは、上條 (mk-0A0) です！

先日『武器になる HTML 』という本を読んだので、今回はその学びや感想を書いていきます。

余計な CSS などの解説は無く HTML に特化した内容となっており、初学者はもちろん現役の方でも学びの多い一冊だと思いました。

読む前の自分

私はかれこれ4年ほど HTML に触れており、基本的なコーディングは問題なくできる状態だと思っていました。

ですが、アクセシビリティについての知見が浅かったり、HTML の仕様をちゃんと理解できているかと言われると疑問がありました。

そのため、今までなんとなくで書いていた HTML をちゃんと理解して、ただコーディングするだけではなく「正しいマークアップ」ができるようになりたいと思いこの本を手に取りました。

学んだこと

この本で学んだことは主に3つです。

要素の親子関係はカテゴリによって決まる
アウトラインを意識する
セマンティックな HTML の重要性

それぞれ詳しく書いていきます。

要素の親子関係はカテゴリによって決まる

HTML を記述する際には、要素の中に配置できる要素（親子関係）を意識する必要があります。

HTML の要素は主に以下の7つのカテゴリに分類され、そのカテゴリ同士で大まかな親子関係が定義されています。

公式ドキュメント：https://html.spec.whatwg.org/#kinds-of-content

HTML Live Standard 4.3.11.2 Exposing outlines to users

Metadata：ページのメタ情報（meta, script, style, link など）
Flow：body 内で使われるほぼ全てのタグ
Sectioning：セクションを定義するタグ（section, article, aside など）
Heading：見出しを定義するタグ（h1 ~ h6, hgroup）
Phrasing：テキストに意味を与えるタグ（a, strong, time など）
Embedded：コンテンツを埋め込むタグ（iframe, img, video など）
Interactive：ユーザーが操作できるタグ（button, a(href), input など）

入れ子にできる要素はコンテンツ・モデルと呼ばれており、仕様書の各 HTML 要素に記載されています。

ここで、そもそもなぜ親子関係を意識する必要があるのかを私なりに考えてみました。

カテゴリにも分類されているように各要素にはそれぞれ役割があり、サイトの情報に意味を持たせます。そのため役割とは違う要素が入れ子になっていると、サイトの情報が正しく伝わらないために親子関係が重要になるのではないかという結論に至りました。

あまり意識してこなかった部分ですが、改めて考えるとマークアップをする上でとても重要なポイントであると感じました。

アウトラインを意識する

要素の親子関係を意識すると、HTML のタグは階層構造になっていることが分かります。

その構造をアウトラインと言います。

アウトラインは目次のようなもので、見出し要素の番号によってそのセクションのレベルが決まります。

<h1>メニュー</h1>

<section>
  <h2>フード</h2>
  <article>
    <h3>カレー</h3>
  </article>
  <article>
    <h3>オムライス</h3>
  </article>
</section>

<section>
  <h2>ドリンク</h2>
  <article>
    <h3>コーヒー</h3>
  </article>
  <article>
    <h3>紅茶</h3>
  </article>
</section>

この HTML の場合、アウトラインは以下のようになります。

ここで一点気になったのが、アウトラインを意識する必要性です。アウトラインのセクションではありませんが、本にはこのような記載がありました。

HTML では、タグを使ってページ上の文書に（中略）文章構造を示していきます。こうした構造をきちんとマークアップすることで、どれが見出しでどれが箇条書きかなどが、コンピューターにも理解できるようになります。また、スクリーンリーダー（画面の上方を読み上げ、操作を助けるソフト）などの支援ソフトや、検索エンジンのような機械を介して閲覧するユーザーに対しても、Web ページの内容を正しく伝達するためのサポートができます。
p16 0-2 HTML と CSS と JavaScript の立ち位置

アウトラインは目に見えるものではありませんが、サイトの骨格として意識するべき部分だと思いました。

セマンティックな HTML の重要性

前2節の学びから、「 HTML はサイト内の情報に意味や役割を与える存在である」ということを強く意識するようになりました。

このように正しくマークアップすることをセマンティックと言います。

そしてセマンティックなマークアップができると一定のアクセシビリティが担保され、サイトを利用できるユーザーが増えるということにも気が付きました。

26ページに書かれているコラムでは、Web を発明したティム・バーナーズ＝リー氏の言葉を引用してこのような記載がありました。

“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”
訳：Web の力はその普遍性にある。障がいの有無に関わらず誰もがアクセスできることが重要な側面だ。
（中略）
Web は、ほかのメディアに比べて障がいの有無や環境に関係なく情報を伝達することができるメディアなのです。
（中略）
Web サイトを構築する時は、この素敵な特性を妨げることのないように、1人でも多くの人が利用できるように意識することが大切です。どれほどビジュアルの優れた Web サイトだったとしても、そもそも利用することができなければ、ユーザーにとっては意味を成しません。
p26 誰もがアクセスできる Web メディアの特性

Web には「障がいの有無に関係なく誰でも利用できる」という特性があります。セマンティックではないサイトだと、スクリーンリーダーなどの支援ソフトを必要とする人たちが利用しづらくなり、結果特性を活かせないサイトとなってしまいます。誰でも利用できるという Web ならではの特性があるからこそ、その特性を阻んではいけないということに気づきました。