【HTML】mainタグでドキュメントのメインコンテンツを指定する方法

このページについて

このページではHTMLで使えるmainの使い方を解説しています。

mainはドキュメント内のメインコンテンツを指定する機能を持っています。ここでいうドキュメントは「現在開いているページ」の事で、メインコンテンツは「そのドキュメントだけにある内容」という認識でOKです。

そしてこのmainはそのドキュメント内で一意である必要があります。つまり他のページでも繰り返し使用できるサイドバーやメニューバー、headerタグやfooterタグなどは含めてはいけないと言うことになります。

さらに言うとこのmainは他の一部のタグの子要素として使う事ができません。articleタグ、asideタグ、footerタグ、headerタグ、navタグが該当しますが、これらのタグと全く関係ないところで使う必要があります。

mainは一部の繰り返し使用できるタグ以外であれば子要素として使う事ができます。ただし一意である内容のみに使用する必要があります。

<html>
<head></head>
<body>
<main>メインコンテンツ</main>

<aside>サイドバー</aside>
</body>
<footer>フッター</footer>
</html>

ざっくり書くとこんな感じになります。サイドバーとかフッターとか、他のページでも使えるものは含めてはならず、さらには一部の要素の子として使うことはできません。つまりこんな感じで書くことになります。

ただしメインコンテンツの部分で使用する他のタグは色々と使えます。tableタグだったり、liタグだったりですね。

mainは固有の属性などはなく、グローバル属性・イベント属性の2つをサポートしています。

mainはドキュメント内で一意のコンテンツ部分に対して使用するタグです。繰り返し使えるタグや、他のページでも使用するようなタグ部分は含めずに使用します。そして一部のタグの子要素として使うことはできません。