<main>タグは、文書のメインコンテンツを表す際に使用します。
文書には、hidden属性が指定されていない複数のmain要素があってはなりません。
各main要素は、階層的に正しいmain要素である必要があります。
階層的に正しいmain要素とは、
祖先要素が
html要素、
body要素、
div要素、
名前のないform要素、
自律カスタム要素（制作者が自作した要素）となるmain要素です。
以下のサンプル文書は、ヘッダー、ナビゲーション、サイドバー、メインコンテンツ、フッターで構成されています。
メインコンテンツの部分は、main要素でマークアップしています。
<!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 © 2013
</footer>
</html>
キャラクターには体力、魔法、スピードなどのスキルが与えられます。
それぞれのスキルごとにサイコロを転がして設定します。
以下のサンプルは、複数のmain要素が使用されており、
初期表示しないmain要素にはhidden属性が指定されています。
スクリプトでmain要素の表示と非表示を切り替える仕組みですから、
シングルページアプリケーション（SPA）のような挙動となるでしょう。
<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>
ホームの内容…
紹介の内容…
連絡の内容…