【HTML】ページの構造を表すタグ早見表
最近のサイトはHTMLの区分けのためになんでもかんでもdivを使わなくなってよくなったんだなぁ……と感心したので、忘れてもいいようにタグと役割をメモしておきます。
「いまさらすぎんだろ」ですが、普段はSEOとか一切関係ないところにいるので……。
ページ構造タグと用途例
ページにひとつだけあればいいタグ
以下のタグは基本的にページ内に１つだけあればいいエリアを示すものになります。
| タグ名 | 意味 | 用途例 |
|---|---|---|
| header | 上部 | ページのヘッダー |
| footer | 下部 | ページのフッター |
| main | 主な | そのページのメインとなるコンテンツ ※ページ内につき１つが望ましい |
mainタグの中にあるのが望ましいタグ
mainの中でコンテンツを表現していくのに使うタグが以下になります。
これらのタグはmain内に複数個あってもかまいません。
| タグ名 | 意味 | 用途例 |
|---|---|---|
| article | 記事 | 記事一覧のひとつひとつの塊、ブログ記事本文 |
| section | 章 | articleの中の文章の章分け |
sectionの中に<h1>とか<p>とか使って本文が書かれているといい感じだそうです。
その他のタグ
mainの外でメインコンテンツとは関係のないエリアを表現するのに使います。
| タグ名 | 意味 | 用途例 |
|---|---|---|
| nav | ナビ | ナビゲーションリンクのエリアを示すときに使う |
| aside | 傍ら | 本文と関係のないサイドバー（リンクやカテゴリなど） |
じゃあdivはお払い箱なのか？ と言われるとそうではなくて、本当に上のどれにも当てはまらない最後の手段としてdivが使われるそうです。主にレイアウトの関係でエリアを作りたいときなど。
構造
要するに以下のような構造です。
- header
- nav
- main
- article
- section
- article
- aside
- footer
使い方
該当するコンテンツを上のタグで包めば完成です。
具体的には下のような感じになればいいようです。
<body> <header> ヘッダー </header> <nav> <ul> <li>このサイトについて</li> <li>作品一覧</li> <li>お問い合わせ</li> </ul> </nav> <main> <article> <h1>今日の日記</h1> <section> <h2>通勤路の誘惑</h2> <p> 通勤路にそば屋があるんですが、毎朝だしの香りの誘惑がすごいんです。<br /> ..... </p> </section> <section> <h2>サブレもらった</h2> <p> 仕事中に食べるお菓子っていいですよね。<br /> ..... </p> </section> </article> </main> <aside> サイドバー </aside> <footer> フッター </footer> </body>
使い分けるための心得
要は、「webページを作るときはコンテンツひとつひとつの役割を明確化し、それを最もよく表しているタグを使おう」ということだと思います。
