<main></main>

ブラウザ
  • Cr
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所に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>