★HTML Living Standard リファレンス

<main> …… メインコンテンツを表す
Internet Explorer

<main>タグは、文書のメインコンテンツを表す際に使用します。

文書には、hidden属性が指定されていない複数のmain要素があってはなりません。

各main要素は、階層的に正しいmain要素である必要があります。階層的に正しいmain要素とは、祖先要素が html要素、 body要素、 div要素、名前のないform要素、自律カスタム要素（制作者が自作した要素）となるmain要素です。

■使用例

以下のサンプル文書は、ヘッダー、ナビゲーション、サイドバー、メインコンテンツ、フッターで構成されています。メインコンテンツの部分は、main要素でマークアップしています。

HTMLソース

<!DOCTYPE html>
<html lang="ja">
<title>RPG シーン17</title>

<header>
 <h1>RPG シーン17</h1>
</header>

<nav>
 <a href="../16/">シーン16</a>
 <a href="../18/">シーン18</a>
</nav>

<aside>
 <p>この画面では、ヒットポイントの回復はありません。
</aside>

<main>
 <h2>キャラクター作成</h2>
 <p>キャラクターには体力、魔法、スピードなどのスキルが与えられます。</p>
 <h2>スキルの設定方法</h2>
 <p>それぞれのスキルごとにサイコロを転がして設定します。</p>
</main>

<footer>
 <p>Copyright &copy; 2013
</footer>

</html>

↓↓↓

ブラウザ上の表示

RPG シーン17

キャラクター作成

キャラクターには体力、魔法、スピードなどのスキルが与えられます。

スキルの設定方法

それぞれのスキルごとにサイコロを転がして設定します。

■使用例

以下のサンプルは、複数のmain要素が使用されており、初期表示しないmain要素にはhidden属性が指定されています。スクリプトでmain要素の表示と非表示を切り替える仕組みですから、シングルページアプリケーション（SPA）のような挙動となるでしょう。

HTMLソース

<script>
 function clickHome(){
  document.getElementById("home").removeAttribute("hidden");
  document.getElementById("about").setAttribute("hidden","hidden");
  document.getElementById("contact").setAttribute("hidden","hidden");
 }
 function clickAbout(){
  document.getElementById("home").setAttribute("hidden","hidden");
  document.getElementById("about").removeAttribute("hidden");
  document.getElementById("contact").setAttribute("hidden","hidden");
 }
 function clickContact(){
  document.getElementById("home").setAttribute("hidden","hidden");
  document.getElementById("about").setAttribute("hidden","hidden");
  document.getElementById("contact").removeAttribute("hidden");
 }
</script>

<nav id="navigation">
 <a href="#navigation" onclick="clickHome()">ホーム</a>
 <a href="#navigation" onclick="clickAbout()">紹介</a>
 <a href="#navigation" onclick="clickContact()">連絡</a>
</nav>

<main id="home">
 <h1>ホーム</h1>
 <p>ホームの内容…</p>
</main>

<main id="about" hidden>
 <h1>紹介</h1>
 <p>紹介の内容…</p>
</main>

<main id="contact" hidden>
 <h1>連絡</h1>
 <p>連絡の内容…</p>
</main>

<footer>フッターは常に表示</footer>

↓↓↓

ブラウザ上の表示

ホーム

ホームの内容…

■関連項目

<main> …… メインコンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<search> …… 検索やフィルタリング機能を表す
<address> …… 連絡先情報を表す
<footer> …… フッターを表す

★HTML Living Standard リファレンス

■使用例

HTMLソース

ブラウザ上の表示

キャラクター作成

スキルの設定方法

■使用例

HTMLソース

ブラウザ上の表示

ホーム

紹介

連絡

■関連項目

Sponsors