HTML5にタグがいくつあるか知ってます？

すっごくどうでもいい疑問と言うか、実際に定義されているわけだから数えれば済むんですけど、HTML5のタグって何個あるんだろうと思ったわけです。HTML5の最新情報を追ってると年に2、3個程度のタグのin/outがありますよね。
実際のところW3CのHTML5の勧告(最終的な仕様の決定)まではまだ日があるのでなんとも言えないですけど、もうちょっとはっきり知っておきたいというか。

ちなみにその辺のどういう流れで決まっているのか、みたいなことは以下の記事に書いてあります。

HTML5、W3C で Last Call （最終草案） へ | WWW WATCH

もしもっと新しい情報あったら教えてくださいｗ

#HTML5のタグは百八つまであるぞ

実は過去にこういうハッシュタグを作っているんですが…これの趣旨は、

#HTML5のタグは百八つまであるぞ 2012年8月現在W3Cの規定するHTML5のタグは108つ。このハッシュタグはタグ一つ一つについて細かい用途や考察を1日一つづつくらい考えていこうというモノです。ツッコミとかもらって皆で正しい認識を持つのが目的です。

ハッシュタグ #HTML5のタグは百八つまであるぞ – hashtagsjp

と言う感じです。

WEBCRE8.jpでは記事にもたまに書いていますが、多くの人が頻繁に悩む「このタグってこれに使えるのかな」「この使い方は間違っているんじゃないか」という疑問を解消すべく始めたものです。

もちろんwebcre8自身もそんなにHTML5に詳しいわけではありません。このハッシュタグを使って提案された使い方に、それは違う、いや正しいという議論をすることで、最終的にいい感じの結論を導き出したいというのが目的です。ですので「あんまりHTML5わかんないよ」と言う人も素朴な疑問でツッコんで来て欲しいと思っています。

ちなみに、特別にこの議論をストックするサイトも作る予定です。大いに参加して欲しいですね！(実は最近ツイート止まってましたが再開します)

で、本当に百八つなの？

ハッシュタグにしてしまったのにいちいち増えたり減ったりは困るんですけど…え、て言うかもう108じゃないの？

みたいなところから調べてみました。

W3CとWHATWGが策定しているHTML5タグ

W3Cのワーキングドラフト(Working Draft)

W3CのHTML5の策定は現在最終草案(Last Call Working Draft)で、実際に勧告(Recommendation)となるのは2014年が目標とされています。

• html
• head
• title
• base
• link
• meta
• style
• script
• noscript
• body
• section
• nav
• article
• aside
• h1
• h2
• h3
• h4
• h5
• h6
• hgroup
• header
• footer
• address
• p
• hr
• pre
• blockquote
• ol
• ul
• li
• dl
• dt
• dd
• figure
• figcaption
• div
• a
• em
• strong
• small
• s
• cite
• q
• dfn
• abbr
• time
• code
• var
• samp
• kbd
• sub
• sup
• i
• b
• u
• mark
• ruby
• rt
• rp
• bdi
• bdo
• span
• br
• wbr
• ins
• del
• img
• iframe
• embed
• object
• param
• video
• audio
• source
• track
• canvas
• map
• area
• table
• caption
• colgroup
• col
• tbody
• thead
• tfoot
• tr
• td
• th
• form
• fieldset
• legend
• label
• input
• button
• select
• datalist
• optgroup
• option
• textarea
• keygen
• output
• progress
• meter
• details
• summary
• command
• menu

HTML5 – The elements of HTML

2012年8月の現時点でそのワーキングドラフトに記されているHTML5のタグは108個。ほっ。

WHATWGのLiving Standard

これに対してWHATWGのLiving Standardは名前に「Living」とある通りLast updateはその日。常に更新し続けている、と言う事ですね。この辺り最終更新が2011年5月25日のW3Cとの姿勢の違いがバリバリ出てますね。いや、その分WHATWGの方は流動的過ぎるとも言えます。完全に役割は別ですね。

• html
• head
• title
• base
• link
• meta
• style
• script
• noscript
• body
• section
• nav
• article
• aside
• h1
• h2
• h3
• h4
• h5
• h6
• hgroup
• header
• footer
• address
• p
• hr
• pre
• blockquote
• ol
• ul
• li
• dl
• dt
• dd
• figure
• figcaption
• div
• a
• em
• strong
• small
• s
• cite
• q
• dfn
• abbr
• data
• time
• code
• var
• samp
• kbd
• sub
• sup
• i
• b
• u
• mark
• ruby
• rt
• rp
• bdi
• bdo
• span
• br
• wbr
• ins
• del
• img
• iframe
• embed
• object
• param
• video
• audio
• source
• track
• canvas
• map
• area
• table
• caption
• colgroup
• col
• tbody
• thead
• tfoot
• tr
• td
• th
• form
• fieldset
• legend
• label
• input
• button
• select
• datalist
• optgroup
• option
• textarea
• keygen
• output
• progress
• meter
• details
• summary
• command
• menu
• dialog

HTML Standard – The elements of HTML

こっちはタグが110個あります…。dataタグとdialogが独自に追加されています。ちなみにdialogはW3Cの方でもEditor’s Draftには載っています。

確かわりと最近dataとかtimeに関してごたごたがあった気がするんですけど、その流れからかWHATWGの方にはdataタグがあって、W3Cにはないです。

dataタグについて

なんか多分

「ねえtimeいらなくね？data作ってこれでいいじゃん」

「ばっか見てみろtimeは必要だって皆言ってんぞ！dataはdataであってもいいけど」

「はーtime残すならdataなくていいだろどっちやねん！」

「知らんわ！dataは最初から使い方ちげーだろ！」

「フン」

「フン」

みたいなやりとりがあったんでしょうね多分。後にこのいさかいがあの大戦を引き起こそうとは…(あながち間違いでもない妄想)。

以下の記事にこの辺のことが書かれています(記憶が定かじゃなく実際の流れは忘れました)。

HTML5 追加された data 要素について

dialogタグについて

dialogの方は昔会話文をマークアップするための同名のタグがあったんですが、それはなくなり、そして同名の全然違うタグが出来ました。文字通りダイアログ(JSで出すアラートみたいなやつ)をマークアップするタグ、としてです。コーダ的にしかHTML5を使っていないwebcre8には用途がサッパリなんですが、どうやらwebアプリには使われるみたいですね。

各タグリファレンスサイトが掲載しているHTML5タグ

さて実際にコーダの人がHTML5をマークアップするにあたって、実際に見るのはこれら策定団体のサイトではなくリファレンスサイトなんじゃないかと思います。検索でも上に来るし。「HTML5 section」なんて検索するとwebcre8の好きなHTML5.JPが出てきますよね。ちなみに…その下にはうちの[HTML5]アウトラインで迷わない！ sectionと見出しについてがありますね！たまに一位になりますｗ セクショニングで困ったら読んでみましょう★

で、それらリファレンスサイトにはどう書いてあるでしょうか。

HTML5.JPのHTML5タグ一覧

まずは日本語のリファレンスサイトから。HTML5.JPはW3Cを訳して書かれているので当然108個です。

HTML5 Living Standardとの差異

• dataがない
• dialogがない(過去のdialogのページはある)

HTML5タグリファレンス – HTML5.JP

やっぱり現時点での普通の認識としてはHTML5のタグは108個と言う事で間違いない気がします。

また、リンクは既にないのですが、dialog要素はページだけ存在します。これは過去あった会話文としてのdialogタグのページです。URL書き換えて見つけることが出来ますが…同名なので現在のdialogのページがあるかどうかはわかりませんね。

HTMLクイックリファレンスのHTML5タグ一覧

次にこれもよく検索で出てくる国内サイト。

HTML5 Living Standardとの差異

• dataがない
• dialogがない(過去のdialogのページもない)
• uがない
• bdiがない
• trackがない

HTML5リファレンス

こちらはおそらく途中で更新が停まっており、新しいタグの追加が不完全です。まあ、この辺のタグはぶっちゃけかなりマニアックな追加で普通の人が記述しようと思うことはかなりまれなタグだと思いますけどｗ dialogは古いバージョンのページもないので、結構前から停まってる感じですね。

W3SchoolsのHTML5タグ一覧

http://www.w3schools.com/html/html5_intro.asp

海外サイトも見てみましょう。

HTML5 Living Standardとの差異

• dataがない
• dialogがない(過去のdialogのページはある)

状況はHTML5.JPと同じですね。あと、ここでは各ブラウザの対応状況も確認できます。これを見てるとW3C、WHATWG双方、最新の更新に載っているからと言ってそれがブラウザも対応している、なんて状況ではなさそうです。2014年までには実装されるのかな。

Quackit.comのHTML5タグ一覧

最後にもうひとつ海外サイトを。

HTML5 Living Standardとの差異

• dialogがない(過去のdialogのページはある)
• bbがある
• datagridがある
• eventsourceがある

HTML Elements

ここはかなり結果が変わっています。現時点で消えた(Editor’s Draftにはあった)タグの項目が3つも残っている一方、古いdialogはちゃんと消えています(時系列までは調べてないです)。新しいdialogは一覧にはないものの、dataタグはちゃんと書いてあります。このサイトの時系列が一番ややこしいですね…Editor’s Draftも追うスタイルで、まだdialogまでは入ってない状態というところかな。

結論

HTML5のタグは現時点で百八つ、これで良さ気ですね。WHATWGのLiving Standardは、webcre8的にはちょっと流動的で積極的に採用できないです。使ってたタグがなくなったーとか普通にありそうですしね。一般のweb制作者も基本的にW3Cが採用しているタグを使った方がいいと思います。まあ、それ以前にわざわざそのタグを使ってやりたいことがあるかどうかではあるんですけど。

蛇足

この記事はwebcre8の観測範囲に入ってきた客観的な事実を元に、webcre8の個人的な制作者としての観点を多分に含んでいます。間違いもあるでしょうしそもそも情報不足なところもあるかと思います。これは違う、これはこうだという意見がありましたらコメントでお願いします★皆さんと一緒に確かな資料が作れれば幸いです！