divだらけをやめる — セマンティックHTML（第1回）

見た目は作れる。ただ、自分が書いたHTMLを読み返すと、タグの選び方が雑だと分かる。ここで止まっている人は多いと思います。

HTMLは見た目を作る言語ではなく、意味を伝える言語です。そこが入れ替わっていると、何度書き直しても同じところで雑になります。

そもそもHTMLとは#

文書の構造を説明するための言語です。プログラミング言語ではありません。

Wordで文章を書くとき、見出しには見出しスタイル、本文には本文スタイルを当てますよね。あれと同じことを、タグという記号でやります。<h1>と書けば「ここは大見出しです」、<p>と書けば「ここは段落です」という意味になります。

重要なのは、HTMLが意味を伝える担当だという点です。見た目はCSS、動きはJavaScriptが担当します。HTMLで見た目を作ろうとすると、この分担が崩れます。

よくある書き方（Before）#

<div class="title">旧車図鑑</div>
<div class="list">
  <div class="item">
    <div class="name">スカイライン GT-R</div>
    <div class="text">1969年発売。</div>
  </div>
</div>

見た目はCSSでいくらでも作れます。問題は、このHTMLが何も意味を持っていないことです。

直した書き方（After）#

<h1>旧車図鑑</h1>
<ul class="list">
  <li>
    <article>
      <h2>スカイライン GT-R</h2>
      <p>1969年発売。</p>
    </article>
  </li>
</ul>

なぜそうなるか#

HTMLは「見た目を作る言語」ではなく「文書の構造を説明する言語」です。構造が正しく書かれていると、次の3者が正しく読めます。

• 検索エンジン — 何が見出しで、何が本文かを判断できる
• スクリーンリーダー — 見出しだけを拾って読み上げ、目の見えない人がページを移動できる
• 未来の自分と同僚 — div.item の中身を読まなくても、記事の繰り返しだと分かる

覚えるタグはそう多くありません。まずはこれだけ。

特に事故が多いのが最後の button です。<div onclick="..."> はキーボードで操作できず、Tabキーで選べません。クリックできるものは button か a にする、と覚えてください。

手を動かす課題#

好きな題材で、一覧ページのHTMLを書いてください。CSSはまだ書きません。条件は3つです。

1. h1 はページに1つだけ
2. 一覧は ul と li で組む
3. div は「意味はないがCSSのために囲みたい」場所だけに使う

書けたら、Chromeの拡張機能「HeadingsMap」でアウトラインを見てください。見出しがきれいな階層になっていれば成功です。

次回はCSSの基礎です。このHTMLに、崩れないレイアウトを与えます。

今回の学び#

まず、見た目はCSSでいくらでも作れるということ。だからHTMLの良し悪しは見た目では判定できません。判定できるのは、CSSを全部外したときに文書として読めるかどうかでした。

次に、構造は3者に向けて書いていること。検索エンジン、読み上げソフト、そして未来の自分と同僚です。3者とも、書いた本人がその場で見ている画面とは違うものを見ています。

そして、クリックできるものはbuttonかaにすること。これだけは例外なしで覚えてよい規則です。見た目が同じでも、キーボードで操作できるかどうかが変わります。