<main>タグの解説
<main>は、文章の中で主要な部分を明示したい場合に使用します。主にヘッダーやフッターを除くそのページ固有の情報、または複数カラムのレイアウトを用いたサイトで、サイドバーやナビゲーションを省いたメインコンテンツの領域に適応されます。
このタグは必須のものではないので、省略してしまっても問題ありません。使用する場合は個別に記述するのではなく、テンプレートの中に組み込むなどして、使用箇所を固定してしまった方が扱いやすいでしょう。
<main>の設置に適した階層は、<body>の直下か、構造上の意味を持たない<div>の子要素となります。それ以外の階層、例えば<article>や<section>の中に含めるべきではありません。
また、レイアウトを意図した使い方は避けるべきです。<main>の仕様は、W3CのHTML5時代から引き継がれたものですが、他のセクショニング・コンテンツと比較した場合に、その役目は曖昧です。ページの構造に影響を与えるような使い方をしていると、アップデートがあった場合に改修を強いられる可能性があります。そのため、追加や除外が容易に行える位置への設置が好ましい要素と言えます。
<main>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素自体は、HTMLの構造上のアウトラインに影響を与えません。単純に、ここからここまでが画面の中で主要なコンテンツであることを示すだけです。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- この要素はひとつのHTMLドキュメントの中で一度だけ使用できます。同じ文章の中で複数の
<main>を設置することは推奨されません。
<main>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<main>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ページの主要なコンテンツを表すために使用します。シンプルなレイアウトであれば、画面に表示される部分を全体的に囲っても問題ありません。
<body>
<main>
// ページの主要なコンテンツ
</main>
</body>
通常のウェブサイトでよく見られるパターンの参考例です。ヘッダーとフッターはサイトの共通要素であり、文章の主要な内容とは言えないため、<main>によってコンテンツの扱いを明確にしています。
<body>
<header>
<h1>サイト名</h1>
</header>
<main>
<h1>文章のタイトル</h1>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
</main>
<footer>
<div>サイトフッター</div>
</footer>
</body>
<main>と<article>を上手に使い分ける
<main>と比較的似たような役割りに<article>要素があります。<article>要素は、ページの中で独立した記事として扱えるまとまりを示します。例えば、ブログやニュースサイトの記事ページを想定した場合、以下のようなマークアップが考えられます。
<main>
<header>
<h1>記事の見出し</h1>
<figure>
<img src="/images/eyecatch.jpg" alt="アイキャッチ画像">
<figcaption>キャプション</figcaption>
</figure>
</header>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<footer>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="sns-url">著者</a></cite>
</footer>
</main>
<article>
<header>
<h1>記事の見出し</h1>
<figure>
<img src="/images/eyecatch.jpg" alt="アイキャッチ画像">
<figcaption>キャプション</figcaption>
</figure>
</header>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<footer>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="sns-url">著者</a></cite>
</footer>
</article>
この場合、どちらがより正しいと言えるでしょうか。コンテンツを構成する一番上の親要素である<main>と<article>以外は全て同じ内容です。実は、どちらも正しいのです。
しかし「どちらでも良い」というわけではありません。重要なのは、これ以外の画面全体を構成する要素との関係性、ページ上のコンテキストです。
例えば、<main>要素を親に持たせた場合、これ以外にページの主要コンテンツを配置してはいけません。一つのページの中で<main>要素を配置できるのは一回までです。<article>要素であれば、これ自体で一つの独立した記事を表しますが、別の記事があっても構いません。一つのページに複数配置することが認められています。
また、<main>要素は文章のアウトラインを生成しません。ここからここまでが主要なコンテンツである、と範囲を示すだけです。<article>要素は文章にアウトラインを与えセクショニングします。特にルート要素から現在のアウトライン内のセクション範囲を作り出すため、明確にヘッダーとフッターの対応位置を定められます。
以上のことから、<main>の子要素に<article>を配置することは認められますが、その逆はありえないことが分かります。<article>は文章の構造を強化するためのものであり、文章が主体のコンテンツの場合に活用できる要素だと言えます。
<main>
<article>
<header>
<h1>記事の見出し</h1>
<figure>
<img src="/images/eyecatch.jpg" alt="アイキャッチ画像">
<figcaption>キャプション</figcaption>
</figure>
</header>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<p>記事の内容。記事の内容。</p>
<footer>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="sns-url">著者</a></cite>
</footer>
</article>
</main>
<main>要素のARIAロールについて
<main>が持つ暗黙のARIAロールはmainとなります。これをサポートしていないブラウザを考慮するのであれば、role属性の値にmainを与えます。一般的な状況ではほとんどのブラウザが対応しているため、追記の必要はありません。
<main role="main">
・・・文章の内容。
</main>