main要素

main要素は、ドキュメントのメイン・コンテンツであることを示す要素。

カテゴリー フロー・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
ただし、article要素、aside要素、nav要素、header要素、footer要素が、祖先要素にあってはならない。
コンテンツ・モデル フロー・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<main>
    ドキュメントのメイン・コンテンツ。
</main>

要点

  • main要素は、ドキュメントのメイン・コンテンツであることを示す要素である。
  • main要素は、ドキュメント内に１つしか配置できない。ドキュメント内に、複数のmain要素を含めてはいけない。
  • main要素は、article要素、aside要素、nav要素、header要素、footer要素の子孫要素にはなれない。
  • main要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。
  • main要素は、HTML5にて新たに導入された要素である。

サンプルコード

<body>
	<header>
		<h1>ページタイトル</h1>
		<p>ページの概要。</p>
	</header>
	<main>
		<article>
			<h2>記事１</h2>
			<p>記事１の内容。</p>
		</article>
		<article>
			<h2>記事２</h2>
			<p>記事２の内容。</p>
		</article>
	</main>
	<footer>
		<p>ドキュメントのフッター。</p>
		<p>(C) 2014 作者</p>
	</footer>
</body>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<header>
		<h1>ページタイトル</h1>
		<p>ページの概要。</p>
	</header>
	<main>
		<article>
			<h2>記事１</h2>
			<p>記事１の内容。</p>
		</article>
		<article>
			<h2>記事２</h2>
			<p>記事２の内容。</p>
		</article>
	</main>
	<footer>
		<p>ドキュメントのフッター。</p>
		<p>(C) 2014 作者</p>
	</footer>
</body>
</html>

実際の表示