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

最終更新日:2017年10月13日  (初回投稿日:2011年07月21日)

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

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

使用する要素 <main> 〜 </main>
本日のINDEX
  1. メインコンテンツとは「そのページ固有の部分」
  2. article, aside, footer, header, nav の中はダメ(W3C)
  3. 「文書内に1つだけ(W3C)」の記述は削除
  4. 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属性 と言われるものの1つです。
参考: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の新しいプロパティで「角丸ボックス」「ボックスのシャドウ」「テキストのシャドウ」などが作れるようになりました。
また、グラデーションは「線形グラデーション」しか紹介していませんでしたが、「円形グラデーション」も使ってみましょう。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.