<main> の使い方と解説

POINT !

<main> 要素のポイント！

<main> は1ページに1つだけ配置する。複数の <main> を同じページに置くことは仕様違反であり、スクリーンリーダーの動作も不定になる（非表示にしたい場合は hidden 属性を使う）。
<main> の中にはサイト共通のコンテンツ（ヘッダー・フッター・サイドバー・グローバルナビなど）は含めない。そのページだけに固有の、主要なコンテンツだけを入れる。
<main> は暗黙的に ARIA ロール main を持ち、スクリーンリーダーのランドマークナビゲーション対象になる。「コンテンツへスキップ」リンクのジャンプ先として <main id="main-content"> を使うパターンが広く普及している。
<main> は <article>・<section> などのセクショニング要素と異なり、アウトラインアルゴリズムに影響を与えない。ページ構造の意味付けに特化した要素で、<div> の意味的代替として機能する。

概要

<main> 要素は HTML5.1 で追加されたセマンティック要素で、そのページ固有のメインコンテンツを表します。<header>・<footer>・<nav>・<aside> などのサイト共通要素を除いた、そのページでしか見られない中心的なコンテンツを包む役割を持ちます。

<main> の最大の特徴は「1ページに1つだけ」というルールです。これは他のセマンティック要素（<header> や <section> など）が複数配置できるのとは異なる点です。また <main> 自体はセクショニングコンテンツではないため、見出しのアウトライン構造に影響しません。

アクセシビリティの観点では、スクリーンリーダーユーザーがページの主要コンテンツへ直接ジャンプするための着地点として非常に重要です。「コンテンツへスキップ」と呼ばれるスキップリンク（ページ冒頭に置き、通常は視覚的に非表示）のリンク先として <main id="main-content"> を指定するのが現代のアクセシビリティ対応の標準的なパターンです。

具体的な役割

ページの主要コンテンツ領域すべてを <main> で包む。ブログ記事ページなら記事本文全体、一覧ページなら記事カードの並ぶエリア、サービスページならサービス紹介コンテンツなど、「サイト共通でないコンテンツ」の最外郭要素として使う。

ネスト（入れ子）のルール

📦 <main> はフローコンテンツを内包できます。<article>・<section>・<aside>・<h1>〜<h6>・<p>・<figure> など、ページの主要コンテンツを構成するあらゆる要素を含めることができます。ただし <main> 自体を <article>・<aside>・<footer>・<header>・<nav> の内部に配置することはできません。<main> は必ず <body> の直系に近い位置に置くことが前提です。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)

HTML5 以前はページの主要コンテンツ領域を <div id="content"> や <div id="main"> で表現していた。スクリーンリーダーはこの領域をメインコンテンツと判断できず、スキップリンクも href="#content" と id 属性の紐付けだけで実装していたが、ブラウザ・支援技術との統合は不完全だった。

MODERN (今)

<main> によってメインコンテンツ領域がセマンティックに定義され、ランドマークナビゲーションが確実に機能する。tabindex="-1" と組み合わせたスキップリンクパターンも標準化され、アクセシビリティ実装の信頼性が大幅に向上した。

主要な属性

属性名	説明
`HTMLカテゴリ`	フローコンテンツ、パルパブルコンテンツ
`配置数`	1ページに1つのみ（非表示の場合は hidden 属性を使えば複数可）
`親要素の制限`	<article>・<aside>・<footer>・<header>・<nav> の子孫にはなれない
`ARIAロール`	main
`スキップリンク`	id="main-content" + tabindex="-1" でスキップリンクの着地点として活用
`グローバル属性`	すべてのグローバル属性が使用可能
`HTML5.1 導入`	HTML5.1（2016年 W3C 勧告）で追加

利用例

基本的なページ構造における <main> の配置

スキップリンク付きの標準的なページ構造。<main id="main-content"> をスキップリンクのジャンプ先として活用するパターン。

CSS Style

body { font-family: sans-serif; margin: 0; } .skip-link { position: absolute; top: -40px; left: 0; background: #1a56db; color: white; padding: 8px 16px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 700; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } .site-header { background: #0f172a; color: white; padding: 16px 24px; display: flex; align-items: center; gap: 24px; } .logo { color: #60a5fa; font-weight: 800; text-decoration: none; } main { max-width: 800px; margin: 40px auto; padding: 0 24px; } main h1 { font-size: 28px; color: #1a1a2e; margin-bottom: 12px; } main p { color: #475569; line-height: 1.7; } .site-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 16px 24px; text-align: center; font-size: 13px; color: #64748b; margin-top: 60px; }

HTML Structure

<body>
  <!-- スキップリンク（Tabフォーカス時のみ表示） -->
  <a href="#main-content" class="skip-link">コンテンツへスキップ</a>

  <header class="site-header">
    <a href="/" class="logo">WebDictionary</a>
    <nav aria-label="グローバルナビゲーション">...</nav>
  </header>

  <main id="main-content" tabindex="-1">
    <h1>HTML リファレンス一覧</h1>
    <p>Web制作で使われる HTML 要素を網羅したリファレンスです。</p>
    <!-- メインコンテンツ -->
  </main>

  <footer class="site-footer">...</footer>
</body>

よくある誤用・注意点

1ページに複数の <main> を配置することは仕様違反。また、ヘッダーやフッターなどサイト共通要素を <main> 内に含めるのも誤った使い方。

CSS

HTML (Incorrect)

<!-- ❌ 悪い例：1ページに複数の <main> を配置している -->
<body>
  <main class="content-a">コンテンツA</main>
  <main class="content-b">コンテンツB</main><!-- 2つ目は仕様違反 -->
</body>

<!-- ✅ 良い例：<main> は1つ、内部を <section> で分割する -->
<body>
  <main>
    <section>コンテンツA</section>
    <section>コンテンツB</section>
  </main>
</body>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<main> 要素