<main></main>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所に1つだけ（ただし、祖先にarticle要素、aside要素、nav要素、header要素、footer要素があってはならない） |
| 内容 | フロー・コンテンツ |
main要素は、文書のメインコンテンツを表します。この要素は、文書内で1つだけ配置することができます。（HTML 5.1では個数制限に関する記述が削除されたようです）
<main>
メインコンテンツを表します
</main>
main要素を使用することで、それが文書のメインコンテンツであることを表すことができます。
main要素の内容には、その文書で固有かつ中心的な内容を配置することになります。各文書で共通使用されるナビゲーションやロゴ、著作権情報などはこの要素内には含めません。
次の例では、メインコンテンツとして2つの記事を配置しています。
<main>
<h1>メインコンテンツ</h1>
<article>
<h2>記事その1</h2>
...
</article>
<article>
<h2>記事その2</h2>
...
</article>
</main>
サイト内で共通使用されるナビゲーション（グローバルナビゲーション）は不可となりますが、メインコンテンツ内で使用されるナビゲーション（ページ内リンク）であればmain要素の中に配置することができます。
<main>
<h1>メインコンテンツ</h1>
<nav>
<ul>
<li><a href="#article1">記事その1</a></li>
<li><a href="#article2">記事その2</a></li>
<li><a href="#article3">記事その3</a></li>
</ul>
</nav>
<article id="article1">
<h2>記事その1</h2>
...
</article>
<article id="article2">
<h2>記事その2</h2>
...
</article>
<article id="article3">
<h2>記事その3</h2>
...
</article>
</main>
セクションについて
main要素はセクショニング・コンテンツではないため、新たなセクションを生成しません（アウトラインに影響しません）。
- HTML 5.1における変更点
-
- main要素の個数制限が解除された？ようです。
使用例
<!DOCTYPE html>
<html>
<head>
<title>HTMLの基本</title>
</head>
<body>
<header>
<p><a href="index.html"><img src="image/logo.gif" alt="TAG index"></a></p>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTMLの基本</a></li>
<li><a href="css.html">CSSの基本</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>HTMLの基本</h1>
<p>コンテンツモデルとカテゴリーに関する説明です。</p>
<nav>
<ul>
<li><a href="#contentmodel">コンテンツモデル</a></li>
<li><a href="#category">要素のカテゴリー</a></li>
<li><a href="#other">その他参考</a></li>
</ul>
</nav>
</header>
<section id="contentmodel">
<h2>コンテンツモデル</h2>
<p>記事の内容 ...</p>
</section>
<section id="category">
<h2>要素のカテゴリー</h2>
<p>記事の内容 ...</p>
</section>
<section id="other">
<h2>その他参考</h2>
<p>記事の内容 ...</p>
</section>
</article>
</main>
<aside>
<p>サイドバー的な内容をここに入れる。</p>
</aside>
<footer>
<ul>
<li><a href="note.html">ご利用について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
<p><small>(c) 2016 TAG index.</small></p>
</footer>
</body>
</html>