そのdiv、本当にdivでいい？HTMLタグを改めて考えてみた

HTMLを書いていると、とりあえず増殖する div 。

<div class="wrapper">
  <div class="inner">
    <div class="content">
      ...
    </div>
  </div>
</div>

もちろん、div を使うこと自体は何も悪くありません。

レイアウトのためのラッパーだったり、スタイルを当てるためのまとまりだったり。

意味を持たせる必要のない箱なら、むしろ div がちょうどいい。

ただ最近、

「これ、本当に div でいいんだっけ？」

と思うことが増えました。

きっかけのひとつが、あるページの小さなインデックスを作っていたときのこと。

セクション内の小見出しをまとめた、補助的なリンクのまとまりです。

いつものように要素を書こうとしていると、エディタの候補に出てきたのが、

<aside>

でした。

aside。

そういえば見たことはある。

でも、自分で使ったことはほとんどない。

「これって何に使うタグだっけ？」

と思って調べ始めたところから、話が少し大きくなりました。

asideは「横にあるもの」ではない

aside という名前から、なんとなく「サイドバーに使うタグ」というイメージを持っていました。

実際、サイドバーに使われることもあります。

でも、aside が表しているのは配置ではなく、メインの内容に対して補足的・間接的な関係にあるコンテンツです。

たとえば、

• 本文に関連する補足情報
• 関連リンク
• 用語の説明
• 記事に付随するプロフィール
• 補助的なナビゲーション

など。

右にあっても左にあっても、場合によっては本文の途中にあっても aside になり得ます。

逆に、画面の右側にあるからといって必ず aside になるわけでもありません。

「どこに置かれているか」ではなく、

「この内容はページの中でどんな役割なのか」

で決まるらしい。

ここで、少し嫌な予感がしました。

そういえば私は section も、かなり雰囲気で使っている。

section、なんとなく使っていない？

私はこれまで、section を

「ここからひとつのテーマを持ったブロックだから」

くらいの感覚で使っていました。

大きく間違っていたわけではなさそうです。

ただ、今思えばその「テーマを持っている」の判断がかなりフィーリングでした。

判断がふんわりしているせいで、度々悩むのがMV（メインビジュアル）を section にするかどうか。

あるとき改めて調べてみると、「中に見出しがあるか」という考え方に出会いました。

ここで、

「見出し？」

となりました。

section は、単純にデザイン上のひとかたまりを作るためのタグではなく、ページの中でひとつのテーマを持った意味のあるまとまりを表す要素です。

そして通常、そのテーマを示す見出しを伴います。

<section>
  <h2>サービスについて</h2>
  ...
</section>

こんな形です。

もちろん、「見出しが入っていれば何でも section」というわけでも、「見出しがなければ絶対に使えない」というわけでもありません。

ただ、

「このまとまりは、ページの中でひとつのテーマとして区切る意味があるだろうか？」

と考えると、以前より少し判断しやすくなりました。

「見出しを付けるとしたら何になるか」

というのもひとつのヒントになりそうです。

逆に、単純にレイアウトをまとめたいだけなら、

<div>

で十分です。

これを知ってから、これまでかなり感覚で選んでいた section と div の境目を、少しだけ意識するようになりました。

divは「意味がない」から使える

section と div の境目を意識するようになると、今度は逆に、

「じゃあ div はどんなときに使うのがいいんだろう？」

と気になってきました。

div は、特別な意味を持たない汎用的なコンテナです。

「意味を持たない」というと、なんとなく何も考えずに使うタグのようにも聞こえます。

でも、意味を持たせる必要のない箱だからこそ、

• レイアウトの都合で囲みたい
• CSSを当てるためにラッパーが必要
• 内容全体に共通する意味を特に持たせる必要がない

といった場面でちょうどいい。

つまり、

div は「特別な意味を持たせる必要がないときの箱」

と考えると分かりやすそうです。

よく使うタグを改めて見てみる

ここで、普段よく使うタグも改めて見てみます。

それぞれの役割を、ざっくり整理してみました。

section

ページの中の、ひとつのテーマを持ったまとまり。

<section>
  <h2>会社概要</h2>
  ...
</section>

ページの中でひとつのテーマとして区切る意味があるか。

「見出しを付けるとしたら何になるか」も、ひとつの目安になります。

article

それ単体でも意味が通る、独立したコンテンツ。

<article>
  <h2>ブログ記事のタイトル</h2>
  ...
</article>

ブログ記事やニュース記事、投稿などが分かりやすい例です。

ページからその部分だけ取り出しても、ひとつのコンテンツとして成立するか。

そう考えると section との違いも少し見えやすくなります。

aside

メインの内容に対して、補足的な内容。

<aside>
  <h2>関連記事</h2>
  ...
</aside>

重要なのは「横にあるか」ではなく、本題との関係です。

nav

主要なナビゲーションをまとめる要素。

<nav>
  <ul>
    <li><a href="/">HOME</a></li>
    <li><a href="/about/">ABOUT</a></li>
  </ul>
</nav>

リンクが並んでいれば何でも nav、というわけではありません。

サイトのグローバルナビゲーションや、ページ内の目次など、ナビゲーションとして意味のあるまとまりに使います。

最初に出てきた「小見出しをまとめたインデックス」も、その役割によっては aside だけでなく nav を検討できそうです。

main

そのページの中心となる内容。

<main>
  ...
</main>

ヘッダーやナビゲーション、フッターなどを除いた、そのページの中心となるコンテンツを表します。

header / footer

名前の通り、ヘッダーとフッター。

ただし、ページ全体に一度しか使えないわけではありません。

たとえば、

<article>
  <header>
    <h2>記事タイトル</h2>
    <p>公開日：...</p>
  </header>

  ...

  <footer>
    <p>この記事を書いた人：...</p>
  </footer>
</article>

のように、article や section の中で使うこともできます。

これも「画面の一番上・一番下」という位置ではなく、そのコンテンツに対する役割で決まります。

調べると、知らなかったタグが結構ある

ここまで調べ始めると、

「HTMLって思ったよりタグがあるな」

となりました。

たとえば figure。

以前は、

「画像とキャプションをまとめるやつ」

くらいの認識でした。

もちろん画像にも使いますが、それだけではありません。

本文から少し切り離しても意味が通る、自己完結したコンテンツを表すので、

• 画像
• 図
• グラフ
• コード
• 引用

などにも使えます。

<figure>
  <pre><code>
    overflow: clip;
  </code></pre>

  <figcaption>コード例</figcaption>
</figure>

「figureって、そんな使い方もするんだ」

となりました。

details も最近知ったタグのひとつです。

<details>
  <summary>詳しく見る</summary>
  <p>ここに詳細が入ります。</p>
</details>

これだけで、開閉できるUIを作れます。

JavaScriptで開閉UIを一から作る前に、

「そもそもHTMLにそのための要素がないか」

を一度考えてみるのもよさそうです。

HTMLには、普段あまり使わなくても、ちゃんと役割を持ったタグが思っていた以上にありました。

タグを変えれば、見た目が変わるわけではない

こういう話をしていると、

「そこまで細かくタグを分ける必要があるの？」

とも思います。

実際、

<div class="article">

で書いても、

<article>

で書いても、CSSを同じように当てれば見た目は同じです。

JavaScriptも普通に動きます。

ユーザーが画面を見るだけなら、違いに気づかないことも多いと思います。

でもHTMLは、見た目を作るためだけのものではありません。

article と書けば「これは独立した記事」。

nav と書けば「これはナビゲーション」。

aside と書けば「これは本題を補助する内容」。

ブラウザや支援技術に、そのコンテンツが何なのかを伝えることができます。

CSSが「どう見せるか」だとしたら、

HTMLは「これは何なのか」。

そう考えると、少しタグを選びやすくなりました。

だからといって、全部に意味を持たせなくてもいい

ここまで見てくると、

「相応しいタグがあるなら、なるべく div を使わない方がいいのでは？」

という気もしてきます。

でも、もちろんそんなこともありません。

レイアウトのためだけの箱なら div でいい。

見出しを付けるほどのまとまりでなければ、無理に section にしなくてもいい。

すべての要素に何か特別な意味を持たせる必要はありません。

ただ、

<div>

と書こうとしたときに、

「これって、何のための箱だろう？」

と一度だけ考えてみる。

そうすると、今まで使ったことのなかったタグが選択肢に入ってくることもあります。

最近は、div を打つたびに、

「ここ、本当にdiv？」

と、少しだけ考えることが増えました。