迷いやすいHTML タグのまとめ

HTML

Sinatraのメモアプリを開発中にマークアップを行っていたところHTMLのアウトラインを意識したマークアップへの理解がとても曖昧だったのでタグの選び方にとても時間が掛かってしまった。 別にHTMLを舐めていた訳じゃないけどFBCのプラクティスでもあまり深く理解しようとしていなかったことを今頃になって猛反省しています。 HTMLは深堀りすればするほど沼だということに気付いたので特に使用頻度の高い部分だけをメモ。

HTML のドキュメント

HTML関連のドキュメントはとてもたくさんあるが特に以下のドキュメントを参考にすると良さそう。

アウトラインを意識したマークアップ時に使用するタグ

  • article: 独立して意味をなすもの
  • section: 見出しとコンテンツがセットで表現できるもの、hタグとセットで使う
  • aside: 余談・補足など
  • header: メインコンテンツのヘッダー、メニューバーなど
  • main: メインコンテンツ
  • footer: フッター、コピーライトなど
  • div: ひとかたまりの範囲として定義する、スタイルを目的にマークアップする場合に使う

divタグとsectionタグの使い分け

見出しとコンテンツをまとめられるならsection、スタイル目的で囲みたいならdiv を使う

アウトラインを意識したマークアップのサンプル

<!DOCTYPE html>
<html>
  <head>
    <mata charset="utf-8">
    <title>タイトル</title>
    <!-- CSS等の読込 -->
  </head>
  <body>

    <header>
      <h1>タイトル</h1>
      <nav>
        <ul>
          <li><a>リンク1</a></li>
          <li><a>リンク2</a></li>
          <li><a>リンク3</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>見出し1</h2>
        <p>コンテンツ1</p>
        <section>
          <h3>見出し2</h3>
          <p>コンテンツ2</p>
        </section>
      </article>
      <aside>
        <h2>関連リンク</h2>
        <ul>
          <li><a>リンク1</a></li>
          <li><a>リンク2</a></li>
          <li><a>リンク3</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p><small>©Copyright</small></p>
    </footer>

  </body>
</html>

まとめ

なんとなく理解していた部分がはっきり理解できたのでスッキリ。 とはいえ実際にマークアップする時には毎回悩みそうな予感がバリバリする...

参照

HTMLのタグ選びで迷うところ - Qiita