<main> 文章の中で主要な内容であることを示す
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ |
| 親にできる要素 | フロー・コンテンツを受け入れる要素 |
| 子にできる要素 | 文章の主要な部分 |
| 対応ブラウザ | caniuseで確認 |
<main>タグの説明
<main>は、文章の中で主要な部分を明示したい場合に使用します。主にヘッダーやフッターを除くそのページ固有の情報、または複数カラムのレイアウトを用いたサイトで、サイドバーやナビゲーションを省いたメインコンテンツの領域に適応されます。
このタグは必須のものではないので、省略してしまっても問題ありません。使用する場合は個別に記述するのではなく、テンプレートの中に組み込むなどして、使用箇所を固定してしまった方が扱いやすいでしょう。
<main>の設置に適した階層は、<body>の直下か、構造上の意味を持たない<div>の子要素となります。それ以外の階層、例えば<article>や<section>の中に含めるべきではありません。
また、レイアウトを意図した使い方は避けるべきです。<main>の仕様は、W3CのHTML5時代から引き継がれたものですが、他のセクショニング・コンテンツと比較した場合に、その役目は曖昧です。ページの構造に影響を与えるような使い方をしていると、アップデートがあった場合に改修を強いられる可能性があります。そのため、追加や除外が容易に行える位置への設置が好ましい要素と言えます。
<main>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素自体は、HTMLの構造上のアウトラインに影響を与えません。単純に、ここからここまでが画面の中で主要なコンテンツであることを示すだけです。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- この要素は一つのHTMLドキュメントの中で一度だけ使用できます。同じ文章の中で複数の
<main>を設置することは推奨されません。
<main>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<main>の使い方とサンプル
このタグを使ったマークアップで、最もシンプルな記述は以下のような構造になります。ヘッダーとフッターはサイトの共通要素であり、文章の主要な内容とは言えないため、<main>によってコンテンツの扱いを明確にしています。
HTML
<body>
<header>
<h1>サイト名</h1>
</header>
<main>
<article>
<h1>文章のタイトル</h1>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
</article>
</main>
<footer>
<div>サイトフッター</div>
</footer>
</body>
また、<main>をサポートしていない環境を考慮して、role属性を追加しておくと、よりアクセシビリティの高いマークアップとなります。
HTML
<main role="main">
・・・文章の内容。
</main>