HTML <main> タグ

定義と使用方法

<main> タグは、ドキュメントの主内容を規定します。

<main> 要素内の内容は、ドキュメントに対してユニークであるべきです。重複する内容、例えばサイドバー、ナビゲーションリンク、コピーライト情報、ウェブサイトのロゴ、検索フォームなどは含まれないべきです。

注意：ドキュメントには複数の <main> 要素。 <main> 要素は、以下のいずれでもなれません。 <article>、<aside>、<footer>、<header> または <nav> 要素の後裔要素。

インスタンス

例1

ドキュメントの主内容を指定：

<main>
  <h1>人気のあるブラウザ</h1>
  <p>Chrome、Firefox、Edgeが現在、最も使用されているブラウザです。</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome はグーグルが開発したウェブブラウザで、2008年にリリースされました...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox は、Mozillaが開発したオープンソースのウェブブラウザ...</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge は、マイクロソフトが開発したウェブブラウザで、2015年にリリースされました...</p>
  </article>
</main>

実際に試してみる

例2

CSSを使用して設定 <main> 要素のスタイル：

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>人気のあるブラウザ</h1>
  <p>Chrome、Firefox、Edgeが現在、最も使用されているブラウザです。</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome はグーグルが開発したウェブブラウザで、2008年にリリースされました...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox は、Mozillaが開発したオープンソースのウェブブラウザ...</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge は、マイクロソフトが開発したウェブブラウザで、2015年にリリースされました...</p>
  </article>
</main>
</body>
</html>

実際に試してみる

グローバル属性

<main> このタグはさらにサポートしています HTML でのグローバル属性。

イベント属性

<main> このタグはさらにサポートしています HTML でのイベント属性。

ブラウザのサポート

この表の数字は、このタグを完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0