ほんっとにはじめてのHTML5とCSS3：[17-6] メインコンテンツを表す main要素

[17-6] メインコンテンツを表す main要素

最終更新日：2017年11月01日　（初回投稿日：2011年07月21日）

今回は、メインコンテンツを表す <main>要素を使ってみましょう。
この <main>要素も HTML5 で新しく登場した要素です。

<main>要素は、グルーピングのための要素なので、アウトラインはできません。

使用する要素	`<main> 〜 </main>`

本日のINDEX

メインコンテンツとは「そのページ固有の部分」
article, aside, footer, header, nav の中はダメ（W3C）
「文書内に1つだけ（W3C）」の記述は削除
role="main" の推奨も削除されています
1. role="main" について（ <main role="main"> は不要）

● 2017年10月： [17-1] 〜 [17-6] は本文を大幅に書き換えました。
初回投稿時の 2011年は HTML5はまだ策定中で、ルールが現仕様と若干異なっていました。それを今回 HTML5.1 の勧告内容に沿って修正しています。
特にこのページは、全面を <main>要素の記事として書き直しました。

メインコンテンツとは「そのページ固有の部分」

メインコンテンツとは、全サイトに共通なものを除いた そのページ固有の部分。
全サイトに共通した部分とは、
・サイトロゴ
・グローバルナビゲーション
・検索フォーム
・バナー、広告
・コピーライト
など。
このような、他のページでも同じ記述な部分は <main>要素の中に入れられません。

下は W3C HTML5.1 仕様書に記載されている例です。

<body>
  <header>
   <h1>The Border Terrier</h1>
   <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="health.html">Health</a></li>
    </ul>
   </nav>
  </header>
  <main>
   <section>
    <header>
     <h2>About</h2>
     <nav>
      <ul>
       <li><a href="#basic">Basic</a></li>
       <li><a href="#app">Appearance</a></li>
       <li><a href="#temp">Temperament</a></li>
      </ul>
     </nav>
    </header>
    <section id="basic">
     <h3>Basic Information</h3>
     <p>…</p>
    </section>
    <section id="app">
     <h3>Appearance</h3>
     <p>…</p>
    </section>
    <section id="temp">
     <h3>Temperament</h3>
     <p>…</p>
    </section>
    <footer>
     <a href="#basic">Basic</a> -
     <a href="#app">Appearance</a> -
     <a href="#temp">Temperament</a>
    </footer>
   </section>
  </main>
  <footer>
   <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
  </footer>
</body>

<main>要素の中に、<header>、<nav>、<footer> 要素も入っていますが、それらはこのメインコンテンツのナビゲーション（ページ内ナビ）なので、メインとして扱えるんですね。
全ページ共通の <header> や <footer> は、<main>要素の外に出ています。

article, aside, footer, header, nav の中はダメ（W3C）

W3C HTML5.1 仕様書では、<main>要素を「article、aside、footer、header、nav要素の子孫として含めてはいけない」としています。

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

これが WHATWG の仕様では、フロー・コンテンツが置けるところならどこでもOK になってます。

Contexts in which this element can be used:
Where flow content is expected.

たまにあるんですよね。W3C と WHATWG の仕様の差。
WHATWG はブラウザを作ってる側の組織だし、ブラウザによって表示が違ったりしてややこしい。

これは、先ほどのサンプルのように使っていくのが無難かな、と思います。
先ほどの「ボーダー・テリア」のサンプルでは、<main>の直後に <section>を使っています。

これは文書の最後の <footer>（サイト全体のフッター）を含めないための措置。
<main>要素は「セクショニング・コンテント」ではなく、アウトラインができないので、中身を <section>要素で囲んでアウトラインを作っているんです。

これを、<section> <main> ... </main> </section>（外側に<section>）と書いたら、W3C的にはNG、WHATWG的にはOK。
じゃあ NG にならないように、<main>の内側に <section>は入れとこう、という使い方ですかね、今のところ（2017年10月記）

「文書内に1つだけ（W3C）」の記述は削除

W3C の HTML5 の勧告時には「<main>要素は 1つの文書内に 1つだけ」とされていたのですが、HTML5.1（2nd Edition）では、その記述は削除されています。

WHTAWG の仕様のほうでは、もともとこのようになってました。

There is no restriction as to the number of main elements in a document.
Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
（ドキュメント内の <main>要素の数に制限はありません。
実際に、複数の <main>要素を持つことが理にかなっているケースは多いです。例えば、複数の <article>要素があるページは、各 <article>の内容をメインとして示す必要があるかもしれない。）

これで、<main>要素は複数使用OK と思っていいのかな。いいのよね？

それにしても、同じページに複数のメインコンテントって、すぐ思い浮かばないんですが。ブログのトップページなどで、複数のエントリーを表示しているケースとかですかね。

role="main" の推奨も削除されています

W3C の HTML5 の勧告時には、下記のように WAI-ARIA の「role属性」の使用を推奨していました。

Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.
（ユーザーエージェント（ブラウザ）が必要なロールマッピングを実装するまで、<main>要素で ARIA role = "main" 属性を使用することを推奨。）

W3C HTML5.1 仕様書では、この記述が削除されています。

（WHATWG では、WAI-ARIA については触れていません。）

これは、IE11 以前用のアクセシビリティのための措置だったようです。
<main>要素は、暗黙的に（= 何も指定しなくても）「role属性の値 "main"」を示す要素ですが、それをサポートしない古めのブラウザ用に、あえて role="main" の指定を推奨したらしい。

ただし、この <main role="main"> と書くことは「role属性」の仕様と矛盾しているんです。それで削除されたんだと思います。（「role属性」の仕様はこのあとに↓）

role="main" について（ <main role="main"> は不要）

「role属性」とは、WAI-ARIA属性と言われるものの１つです。
参考：Accessible Rich Internet Applications (WAI-ARIA) 1.1

WAI-ARIAは、Web Accessibility Initiative - Accessible Rich Internet Applicationsの略だそうです。HTML や SVG で使える アクセシビリティのための仕様で「role属性」「aria属性」が定義されています。

「role属性」は「landmark（ランドマーク）」カテゴリに分類され、要素の役割を示します。
スクリーンリーダー（NVDAとか）が、音声「ランドマーク」を付けて読み上げたり、読み飛ばす時のジャンプ先（ランドマーク）になったりするそうです。

「role属性」の「値」のうち、「main」は「ドキュメントの主要なコンテンツを示す」もので、ページに1つのみしか使えません。

そして HTML の <main>要素は、暗黙的に role属性の値 "main" を示します。
これを見ると、1文書内に <main>要素を複数使うのは、やはり矛盾する気がするんですが...。

ちなみに他にも、<form>要素は「role="form"」、<nav>要素は「role="navigation"」を暗黙的に示すなど、暗黙的に roleの値を示す要素は多数あります。HTML5 以降の定義です。

そして、「暗黙的な role属性を持つ要素に、それと同じ role属性を指定すべきでない」というルールもあります。

なので、W3Cの <main role="main"> の推奨は矛盾していたんですね。
しかも、古めの IE 用の措置だったようですが、そもそも古めの IE は「role="main"」に対して、あまり適切な対応ができないそうです。

というわけで、<main role="main"> という書き方は不要 なようです。

次回予告

いかがでしたか？　
HTML5 の新要素についての説明は、今回で一旦終わります。

次回から、今度は CSSの新しいプロパティを使ってみましょう。
CSSの新しいプロパティで「角丸ボックス」「ボックスのシャドウ」「テキストのシャドウ」などが作れるようになりました。
また、グラデーションは「線形グラデーション」しか紹介していませんでしたが、「円形グラデーション」も使ってみましょう。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-01（Wed）│
投稿日：2011-07-21（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿