mof-brown

ずっとモフモフしてたい

HTML5タグを改めて見なおしてみる

HTML5が注目されて久しいですが、自分自身はというと余り使いこなせていません。

 

HTML5には audio のような新機能としてのタグと、セマンティック・ウェブのためのタグがありますが、前者は使いシーンがあれど後者はクローズドなWebサービスだとあまり必要性が無く、つい div タグを乱用してしまっています。

 

これはマズイなと思い、HTML5にどんなタグがあるのか改めて見なおしてみました。

 

 

 

 

※ タグは↓を参考にさせて頂きました。タグの詳細についてはそちらをご確認くだしあ。

http://www.htmq.com/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

×

使い所不明。

 

 

ruby

×

サービスによっては使うかも。

 

 

rt

×

サービスによっては使うかも。

 

 

rp

×

サービスによっては使うかも。

 

 

bdo

×

国際化対応で使えるかもしれないけど、このタグを使うかは微妙。

 

 

span

 

inline 要素を作るのに使う。

 

 

br

 

たまに使う程度。段落間の調整には使わないようにしてる。

 

 

wbr

×

改行位置を調整したい時に使えるかも。覚えておこう。

 

 

ins

×

 

サービスによっては使うかも。

 

 

del

×

 

サービスによっては使うかも。

 

 

img

 

 

 

 

iframe

 

外部プラグインで使ったり、POST処理で使ったり。

 

 

embed

×

サービスによっては使うかも。

 

 

object

×

 

 

 

 

param

×

 

 

 

 

video

×

サービスによっては使うかも。

 

 

audio

実際には JS から扱う。

 

 

source

×

サービスによっては使うかも。

 

 

canvas

アニメーション系で利用してる。

 

 

map

×

 

昔は使ってたな。

 

 

area

×

 

昔は使ってたな。

 

 

table

 

 

 

 

caption

×

 

必要になるシーンが少ない。

 

 

colgroup

×

 

必要になるシーンが少ない。

 

 

col

×

 

必要になるシーンが少ない。

 

 

tbody

 

 

 

 

thead

 

 

 

 

tfoot

×

 

必要になるシーンが少ない。

 

 

tr

 

 

 

 

td

 

 

 

 

th

 

 

 

 

form

 

 

 

 

fieldset

×

 

昔の WindowsGUI みたいな枠。

 

 

legend

×

 

昔の WindowsGUI みたいな枠。

 

 

label

 

 

 

 

input

 

詳細は省略。

 

 

button

 

 

 

 

select

 

 

 

 

datalist

使いたいけどブラウザ毎の動作が気になる。jQueryプラグインの方が良いかも。

 

 

optgroup

×

 

これ使うくらいなら jQuery プラグインで良さ気なプルダウンリストを使う。

 

 

option

 

 

 

 

textarea

 

 

 

 

keygen

×

こんなのあるんだ・・・。

 

 

output

×

使い所不明。

 

 

progress

×

プログレスバーを簡単に実現したいなら。

 

 

meter

×

メーター表示を簡単に実現したいなら。

 

 

details

×

サービスによっては使うかも。

 

 

summary

×

サービスによっては使うかも。

 

 

command

×

サービスによっては使うかも。

 

 

menu

×

サービスによっては使うかも。

 

 

 

 

見なおしてみて、これからすぐ使っていきたいなと思ったのは

 

 

 

  • dl/dt/dd

 

 

  • var

 

 

  • wbr

 

 

  • datalist

 

 

 

辺りでした。

 

対応ブラウザを確認しつつ、使えるものは使っていきたいと思います。