HTML5タグを改めて見なおしてみる
HTML5が注目されて久しいですが、自分自身はというと余り使いこなせていません。
HTML5には audio のような新機能としてのタグと、セマンティック・ウェブのためのタグがありますが、前者は使いシーンがあれど後者はクローズドなWebサービスだとあまり必要性が無く、つい div タグを乱用してしまっています。
これはマズイなと思い、HTML5にどんなタグがあるのか改めて見なおしてみました。
※ タグは↓を参考にさせて頂きました。タグの詳細についてはそちらをご確認くだしあ。
タグ
利用状況
HTML5追加
メモ
html
○
head
○
title
○
ページタイトル
base
×
相対パス指定の際の基準URIを指定するためのタグ。切り替えたい時だけ使う??
link
○
CSS読み込んだり
meta
○
meta 指定の詳細は別途見直す
style
○
基本はCSSを利用するので使わない。実装上の都合があるときだけ。
script
○
JS読み込み
noscript
×
「JavaScriptを有効にしてください」とか表示したい時に
body
○
section
○
○
最近使い始めた。意味付けされた枠を囲う。
nav
○
○
ヘッダ・フッタのナビゲーション等に使う。たまに使うのを忘れる。タブにも使ったほうが良いのかな。
article
×
○
サービスによっては使うかも。
aside
×
○
サービスによっては使うかも。
h1-h6
○
見出し
hgroup
×
こんなのあったんだ。
header
○
○
使ってる。nav を内包することが多い。
footer
○
○
使ってる。nav を内包することが多い。
address
×
サービスによっては使うかも。
p
○
つい div を使ってしまいがち。文章の段落はこちらを使う。
hr
○
罫線
pre
×
使わない。CSSで実現する。
blockquote
×
CGM系だと使うかも。
ol
○
ul
○
li
○
dl
×
使ってないけど、「名前: ほげほげ」みたいな表現に使った方が良いかも。
dt
×
使ってないけど、「名前: ほげほげ」みたいな表現に使った方が良いかも。
dd
×
使ってないけど、「名前: ほげほげ」みたいな表現に使った方が良いかも。
figure
×
○
使い所が難しい。
figcaption
×
○
使い所が難しい。
div
○
意味が無い故に使いやすい。気づくと大量の div が...!
a
○
em
×
使わない。CSSで実現する。
strong
×
使わない。CSSで実現する。
small
×
使わない。CSSで実現する。
s
×
こんなのあったんだ。
cite
×
使い所不明。
q
×
CGM系だと使うかも。
dfn
×
サービスによっては使うかも。
abbr
×
サービスによっては使うかも。
time
×
○
こんなタグあったんだ。メリットがわからん。
code
×
サービスによっては使うかも。
var
×
JSで動的に変える箇所を span とかで囲むくらいならこっちが良いかな。
samp
×
使い所不明。
kbd
×
使い所不明。
sub
×
サービスによっては使うかも。
sup
×
サービスによっては使うかも。
i
×
使わない。CSSで実現する。
b
×
使わない。CSSで実現する。
mark
×
○
使い所不明。
×
○
サービスによっては使うかも。
rt
×
○
サービスによっては使うかも。
rp
×
○
サービスによっては使うかも。
bdo
×
○
国際化対応で使えるかもしれないけど、このタグを使うかは微妙。
span
○
inline 要素を作るのに使う。
br
○
たまに使う程度。段落間の調整には使わないようにしてる。
wbr
×
○
改行位置を調整したい時に使えるかも。覚えておこう。
ins
×
サービスによっては使うかも。
del
×
サービスによっては使うかも。
img
○
iframe
○
外部プラグインで使ったり、POST処理で使ったり。
embed
×
○
サービスによっては使うかも。
object
×
param
×
video
×
○
サービスによっては使うかも。
audio
○
○
実際には JS から扱う。
source
×
○
サービスによっては使うかも。
○
○
アニメーション系で利用してる。
map
×
昔は使ってたな。
area
×
昔は使ってたな。
table
○
caption
×
必要になるシーンが少ない。
colgroup
×
必要になるシーンが少ない。
col
×
必要になるシーンが少ない。
tbody
○
thead
○
tfoot
×
必要になるシーンが少ない。
tr
○
td
○
th
○
form
○
fieldset
×
legend
×
label
○
input
○
詳細は省略。
button
○
select
○
datalist
○
○
使いたいけどブラウザ毎の動作が気になる。jQueryプラグインの方が良いかも。
optgroup
×
これ使うくらいなら jQuery プラグインで良さ気なプルダウンリストを使う。
option
○
textarea
○
keygen
×
○
こんなのあるんだ・・・。
output
×
○
使い所不明。
progress
×
○
プログレスバーを簡単に実現したいなら。
meter
×
○
メーター表示を簡単に実現したいなら。
details
×
○
サービスによっては使うかも。
summary
×
○
サービスによっては使うかも。
command
×
○
サービスによっては使うかも。
menu
×
○
サービスによっては使うかも。
見なおしてみて、これからすぐ使っていきたいなと思ったのは
- dl/dt/dd
- var
- wbr
- datalist
辺りでした。
対応ブラウザを確認しつつ、使えるものは使っていきたいと思います。