html5のタグを、使うものと使わないものに仕分けするよ

前にhtml5のタグ一覧をアップしましたが、そもそも、あのタグを全部使うことってないと思います。個人的な観点から、絶対に使うもの、使う可能性のあるもの、ひょっとしたら使うかもしれないもの、使わないものに分けておきたいと思います。なんでこれをやるかというと、wordpressのテーマ作成の際に、どのタグに関するデザインをするか、を考えておくためです。はい、これも完全な自分用のメモです。

絶対に使うタグ、使う可能性のあるタグ

まずは、絶対に使うタグ、使う可能性のあるタグを挙げていきたいと思います。新しくサイトやテーマを作る場合には、これらのタグに対してcssでデザインすることは必須です。（メタタグは除きますが）

head, title, base, link, meta, style, script, noscript

とりあえず、これらはheadタグ内で、どれも使うと思います。baseタグは、ほとんど使ったことがありませんが。

html, body

これらも必須です。

header, nav（ナビゲーション）, article（記事）, section, aside（補足）, footer

レイアウト関連で、これらのセクショニングタグも使うと思います。

h1, h2, h3, h4, h5, h6

hxタグは、h5とかh6まで使わないかもしれませんが、一応使うことにしときましょう。

p, hr（区切り線）, pre（整形済テキスト）, blockquote（引用）, div

文章のかたまりについて、タグ付するこれらもいると思います。hrタグはちと微妙ですけどね。

ol, ul, li, dl, dt, dd

リスト関連も使います。

a, strong（強調）, small（細目）, cite（引用タイトル）, q（引用句）, time, code（ソースコード）, mark（ハイライト）, span, br, ins（挿入）, del（削除）

そして、テキストを装飾するタグも使うと思います。頻繁に使うものは、aタグとbrタグぐらいでしょうけど。

img, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

画像とテーブル関係。テーブル関係は、使う頻度が少ないものも入ってますが、tableのデザインをひとまとめで考えた方がいいと思うので、ここでピックアップしておきます。

form, fieldset, legend, label, input, button, select, datalist, opgroup, option, textarea

フォーム関連。テキスト中ではなく、コメント欄や検索フォーム、問い合わせフォームなど、部品的な使い方になります。

ひょっとしたら使うかもしれないタグ

ここからは、今のところ使いどころがよくわからないんだけど、html5っぽいことがしたくなったり、上のタグでは足りないと思ったりしたら使うかもしれない、というタグです。cssのデザインは特に必要ないと思っていて、タグを使うことがあればその時にデザインすればいいやと考えてます。

figure, figcaption

図表。キャプション付の画像なんかを載せたい場合は、使うのかもしれません。

em（アクセント）, u（軽いラベル）, wbr（改行可能箇所）

emはstrongで代用可能なんじゃないかと思います。uも他のタグでいいんじゃないかと。wbrはそもそも使わないような気がします。テキストはすべてどこでも改行可能とcssで設定すればいいわけですし。

video, audio, source, track, iframe, embed, object, param, canvas, map, area

これらは、html5っぽいことをしたくなったら、使えばいいかなという感じ。
iframeははてなブックマークのボタンなど、外部のプログラムを導入するときに使うことがあるけれど、自分で作るページにわざわざ埋め込んで使うことはあまりないかなと思います。

keygen, output, progress, meter

フォーム関連で新しく追加された要素ですが、これらもhtml5っぽいことをしたくなったら使えばよいかと。

たぶん使わないタグ

これらは、たぶん使わないし、そもそも使いどころがよくわからんというタグです。

address

他のタグで代替しちゃいそうです。

ruby, rt, rp

ルビ関係です。例えば、テキスト中に難しい漢字を使うけど、子供にも読んでほしい場合にはいるでしょう。例えば、キッズgooで、よみがなを「あり」にしたページなんかが参考になるでしょう。
が、普通のサイト作成ではいらんでしょう。

var（変数）, samp（出力結果サンプル）

使いどころがわかりません。プログラマー向けのサイトではいるかもしれません。

s（正確ではなくなった情報）, dfn（定義）, abbr（略語）, kdb（キーボード）, sup, sub, i（心の声）, b（製品名など）, bdi（文字の方向に影響を受けない）, bdo（文字の方向）

sは、delを使えばいいかなと思います。dfnやabbrもあまり使わないかなと。dlタグで書くか、そもそも書かないかですかね。他も特に使いどころはなさそうです。

details（備考、操作方法）, summary（detailsの要約）, command（操作メニューのコマンド）, menu（操作メニュー）

使いどころがわかりません。特に、これらのタグを使わなくても書けるのではないかと思います。

hgroup

これは、廃止されるかもしれないので、使用しません。個人的には、使えると思うんですけどね。例えば、目次としてhxタグのみをグルーピングして表示したり、ブログ名とブログの説明文をh1とh2タグでそれぞれ書いてそれをグルーピングしたり。使いどころはあると思うのですが、どうやら廃止の可能性があるようです。

まとめ

よく使いそうなのは、全体の半分強くらいですね。

前の記事：

html5 のタグ一覧

次の記事：

はてブのRSS一覧