Internet Explorer では HTML5の main タグが使えない

極論から。
InternetExplorerではHTML5の<main>タグは使えません。

検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…

<br />
main {<br />
	display: block;<br />
}<br />

そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン!

Edgeなら使える

<main>へのdisplay:block;が無視されてしまう環境を調べてみたところ
IEのF12開発者ツールで<main>タグを確認すると
display:block;が無視されている形跡どころか、指定されている形跡もない!

display:block;指定が効いて<main>が使えるようになった私のIEでは、F12開発者ツールで見ると指定されている形跡がしっかり確認できました。

さらに調査してわかったのが
display:block;が全く効かないIEは、
ドキュメント・モードでEdgeが選択できない
ということ。

そう、ドキュメント・モードがIE11の場合は
そもそも<main>タグがそこにいる事を認識できないのです。

  • InternetExplorer 11 … <main>を認識できない
  • Edge … <main>をinline要素として認識

ドキュメント・モードがでEdgeが選べないIEがこっそり紛れているとは驚愕でした。
10人そこらの会社の部署で見つかったとなると、見て見ぬフリできる低確率とは開き直れないなぁ…

というわけで、
世の中から確実にIEが駆逐されEdgeのことだけ考えればいい時代になれば
安心して<main>を使えるようになります!

クライアントワークでのLandmark role

2017年現在、まだクライアントワークではIEを丸ごと切り捨てるわけにはいかないし
<main>を使うためだけにJavaScriptを動かすのは勿体無いので
このようにmainだけは<div>へrole属性を指定する形が落とし所ではないでしょうか。

<br />
&lt;header&gt;<br />
	ヘッダー<br />
&lt;/header&gt;<br />
&lt;nav&gt;<br />
	主要ナビゲーション<br />
&lt;/nav&gt;<br />
&lt;div role=&quot;main&quot;&gt;<br />
	本文<br />
&lt;/div&gt;<br />
&lt;aside&gt;<br />
	補足<br />
&lt;/aside&gt;<br />
&lt;footer&gt;<br />
	フッター<br />
&lt;/footer&gt;<br />

関連記事