WEBCRE8.jp > 調べる > [HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)

[HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)

この記事は約5分ぐらいで読めます

2013年04月30日
調べる
HTML5 Web制作解説

恒例の108云々の記事です。多分他で書く人もいるだろうし別にぶっちゃけどうでもいいんですけど、始めてしまったものは仕方ないので書くことにしますｗ皆、109ですよ！ｗ

これまでのあらすじ

はい、特にネタがあるわけでもないんですけどHTML5のCR(勧告候補)が先日更新されまして、めでたくHTML5にmain要素が追加されました。hgroupは実際に消えましたねー。

これまでの流れは

といった感じです。108とか言いだしたのが運のつき…ｗ

main要素とは

以下はmain要素の仕様。

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

4.5 Grouping content — HTML5

ざっくり訳すと「main要素はドキュメントまたはアプリケーションのbody要素のメインコンテンツを表します」というようなこと。body内に1つしか存在しません。

フロー・コンテンツ、パルパブル・コンテンツに属し、コンテンツ・モデルはフロー・コンテンツです。つまり、殆どなんでも入れられるし、空であってはいけないという事です。

期待されるコンテキストはフロー・コンテンツとしてですが、article、aside、header、footer、navの中には含められません。

セクショニング・コンテンツではありませんのでアウトラインを形成しません、とわざわざ書いてあります。

このタグで囲まれた部分をメイン・コンテンツであると定義するタグなわけで、その直下に配置されるのは恐らく殆どの場合はarticleやsection等になるのではないかと思います。今までのよくあるコーディングで言えばdiv id="main"といった書き方をされていたものに置き換わる感じです。

覚え書き＠kazuhi.to: 巷（何処）で話題のmain要素とは何か

この記事でもmain要素がしっかり解説されています。去年のHTML5 Advent Calendar 2012の1発目の記事でしたね。このときは私もちょっとこの辺でHTML5のタグを全部確認してみようぜ！！ – WEBCRE8.jpという記事を書いています。

この記事でも触れられている通り(私はあんまり詳しくありませんが)WAI-ARIAでのrole属性mainと等価の働きをするようにブラウザーの実装が進んでいるようです。アクセシビリティー的に意義のある要素で、ちゃんと使われれば有用なものだとは思います。

いちいち知っておく必要あるの？

まだまだ仕様の確定まで予断を許さないHTML5ですが、そもそもいちいちこんな情報をキャッチアップする必要性って普通のコーダーやweb制作者が知っている必要がどのくらいあるの？という疑問を抱く人がいるかと思います。

私としてはぶっちゃけそんなにないと思いますｗ私は好きだから情報を追う事にしてますが、実際に業務でHTML5を使う人はat riskに含まれていたり実装の完璧でないタグを書かないようにしていればいいのかなと考えています。

結局HTML5の仕様が確定したところで、HTML5.1で不要と判断されれば、その時点以降に作られるHTML5のサイトからも外したくなってくるわけです。

○○が確定するまで～とか考えていても、実際は常に何かしらが変化していく世界です。サイト作成時点での状況で採用/不採用を判断すればいいんじゃないかなと思うわけです★

終わりに

報告だけなんで特にコーディング例もしませんでしたが、そんな感じで。

私としてはmain要素はあってもなくてもいい派でした。headerとfooterとnavとaside以外がmainだろ、みたいな。でもまあ、それ(div id=main)が殆どのサイトに存在するのであれば、いっそ要素として定義しちゃおうというのはわかる気がします。レイアウトの為にほぼ確実に書きますしね。