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

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

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

main {
	display: block;
}

そうだと信じてたんです。
しかし、ある人の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属性を指定する形が落とし所ではないでしょうか。

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

関連記事

Pocket