トップページ  > HTML Living Standard  > <main>

★HTML Living Standard リファレンス

<main> …… メインコンテンツを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<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

キャラクター作成

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

スキルの設定方法

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

Copyright © 2013

■使用例

以下のサンプルは、複数の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> …… フッターを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ