<main>* - メインコンテンツ（新）

■ 概要

項　　目説　　明
記述形式 <main>～</main>
対応ブラウザー H?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
種　　類
（カテゴリー）		 フロー・コンテンツ，パルパブル・コンテンツ
置ける場所 フロー・コンテンツ が記入できる場所。
ただし，<article>，<aside>，<footer>，<header>，<nav>     
などの要素を先祖にもたないこと。
内包要素
（コンテンツ・モデル）		 フロー・コンテンツ
（コンテンツ・モデル: カテゴリー）

■ 解説

<main> は名前のとおり，HTML文書やアプリケーションの主要部分：「メインコンテンツ」を表示する 要素です。　この「メインコンテンツ」の領域は，

  1. 文書の中心的な話題・内容やアプリケーションの中心的な機能に直接関係するコンテンツ
  2. それらをさらに発展的に詳しく述べたり表したりするコンテンツ

から構成されます。

この「メインコンテンツ」領域はその文書内で唯一であり，かつ，いくつもの文書に渡り繰り返し表示される，例えば，ナビゲーションのためのハイパーリンク，著作権表示，サイトのロゴ，バナー，検索フォーム（ただし，この文書やアプリケーションの主要な機能が検索フォームである場合は除く）などは含まないようにします。

なお，<main> 要素は，１つの HTML文書内に１つ以上含めることはできません。

また，<main> 要素を，<article>，<aside>，<footer>，<header>，<nav> などの子孫要素とすることはできません。

■ 属性

種　　類名　　称
【固有属性】 なし。
【グローバル属性】 accesskey，class，contenteditable *， dir，
hidden *，id， lang，spellcheck *，style，
tabindex，title，translate *
【ARIA role属性】 で
指定可能な値 （役割）		 main （既定の役割のため指定対象外），
または，presentation
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   

■ CSSプロパティ

種　　類名　　称
【よく使うもの】 color，background-color，font，font-size，font-family

■ 使用例

HTMLソース
HTML
<html> ～ </html>		 
<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </ul>
  </nav> 
  </header>

<main>

  <h1>Graduation</h1>

  <nav>
  <ul>
  <li><a href="#ceremony">Ceremony</a></li>
  <li><a href="#graduates">Graduates</a></li>
  <li><a href="#awards">Awards</a></li>
  </ul>
  </nav>

  <H2 id="ceremony">Ceremony</H2>
  <p>Opening Procession</p>
  <p>Speech by Valedictorian</p>
  <p>Speech by Class President</p>
  <p>Presentation of Diplomas</p>
  <p>Closing Speech by Headmaster</p>

  <h2 id="graduates">Graduates</h2>
  <ul>
  <li>Eileen Williams</li>
  <li>Andy Maseyk</li>
  <li>Blanca Sainz Garcia</li>
  <li>Clara Faulkner</li>
  <li>Gez Lemon</li>
  <li>Eloisa Faulkner</li>
  </ul>

  <h2 id="awards">Awards</h2>
  <ul>
  <li>Clara Faulkner</li>
  <li>Eloisa Faulkner</li>
  <li>Blanca Sainz Garcia</li>
  </ul>

</main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>

ブラウザー 表示例
The Lawson Academy:

Graduation

Ceremony

Opening Procession

Speech by Valedictorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

Graduates

  • Eileen Williams
  • Andy Maseyk
  • Blanca Sainz Garcia
  • Clara Faulkner
  • Gez Lemon
  • Eloisa Faulkner

Awards

  • Clara Faulkner
  • Eloisa Faulkner
  • Blanca Sainz Garcia

■ 備考