HTML5のセマンティック要素と古いブラウザの対応方法｜IE8以前での表示対策を解説

HTML5セマンティック要素と古いブラウザの互換性について

HTML5では、nav、header、article、section、footerといったセマンティック（意味的な）要素が導入され、文書構造をより明確に記述できるようになりました。しかし、Internet Explorer 8およびそれ以前のバージョンでは、これらの新しい要素が認識されず、正しくスタイルが適用されないという問題があります。

これは、古いIEが未知のHTML要素をインライン要素として扱い、CSSによるレイアウト指定が意図どおりに機能しないためです。そこで、以下のような対策が必要になります。

対策1：Modernizrを利用する

セマンティック要素にスタイルを適用するには、JavaScriptライブラリであるModernizrを使用するのが一般的な方法です。Modernizrを読み込むことで、古いブラウザでもHTML5の新要素を認識させることができます。

対策2：CSSでdisplay:blockを明示的に指定する

また、デフォルトでブロックレベル要素として扱われるように、以下のCSSを追加しておくことも有効です。

article, header, nav, section, footer
{
    display:block;
}

この指定により、たとえブラウザが要素を正しく認識しなくても、ブロック要素としてレンダリングされるため、レイアウト崩れを防ぐことができます。

対策3：JavaScriptで独自に要素を作成する

さらに、JavaScriptを使って自分で要素を作成する方法もあります。次のコードのようにdocument.createElement()を呼び出すことで、古いIEでもセマンティック要素を認識できるようになります。

<script>
    document.createElement('nav');     // navはセマンティック要素
    document.createElement('header');  // headerはセマンティック要素
    document.createElement('article'); // articleはセマンティック要素
</script>

まとめ

IE8以前の古いブラウザはHTML5のセマンティック要素に対応していませんが、Modernizrの導入、CSSでのdisplay:block指定、document.createElement()による要素生成という3つの手法を組み合わせることで、互換性の問題を解決できます。現在ではIE8以前のシェアはほぼ消滅していますが、レガシー環境をサポートする必要があるプロジェクトでは、これらの対策を覚えておくと役立ちます。