HTML5における<main>タグの使い方

<main>タグは、文書内で主要なコンテンツであることと表すために使用するタグです。今回は、HTML5における<main>タグの使い方についてご説明します。

HTML5における<main>タグの使い方

<main>要素はHTML5で新しくできた要素です。使い方の原則として、1つのHTML文書内に、1つしか設置することができません。使い方は、<body>要素内の、主要なコンテンツであることを表したい範囲を以下のタグで囲んで使用します。

<main>〜</main>

ヘッダーやフッター、ナビゲーションなどの要素は、確かに主要な要素ではありますが、メインのコンテンツではないので、<main>要素は使用しません。また、<main>要素は、<article>要素、<aside>要素、<nav>要素、<header>要素、<footer>要素内に設置することはできません。つまり、これらの子要素にはできないということです。

<body>

<footer>
<main>〜</main>
</footer>

</body>

例えばこういう使い方はダメということです。いくら重要なコンテンツだと思っても、<footer>内の要素を<main>要素に指定することはできません。そもそも、ヘッダーやフッター内に、文書内で一番重要なコンテンツを配置することはないのであまり心配はないと思いますが、一応覚えておきましょう。

終了タグは必須になります、必ず囲んで記述するようにしてください。この要素ではグローバル属性が使用できます。