mainタグ -ページの主要なコンテンツを示す｜HTML辞典

<main>タグとは？

<main>タグは、HTML文書内で そのページの主要なコンテンツを示すタグ です。
通常、ページごとに1つだけ使用する のが適切であり、ナビゲーションやサイドバーなどの補助的な要素は含みません。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<main> は開始タグ（<main>）と閉じタグ（</main>）の両方が必要です。

基本的な記述方法

<main>
    <h1>HTMLの基本を学ぼう</h1>
    <p>HTMLはWebページを作成するための基本的なマークアップ言語です。</p>
</main>

使用できる主な属性

<main>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名	説明	例
class	CSSのクラスを適用	<main class="content">...</main>
id	一意の識別子を設定	<main id="main-content">...</main>
style	インラインスタイルを適用	<main style="background-color: #fff;">...</main>

CSSを使ったデザイン変更

ページの主要コンテンツを際立たせたい場合は、CSSを活用できます。

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

適切な使用例

✅ ページのメインコンテンツを囲む

<main>
    <h1>最新ニュース</h1>
    <article>
        <h2>HTML5の新機能について</h2>
        <p>HTML5には、<code>&lt;main&gt;</code>、<code>&lt;section&gt;</code> などの新しいタグが含まれています。</p>
    </article>
</main>

✅ メインコンテンツの整理に使用

<header>
    <h1>サイトのタイトル</h1>
</header>
<main>
    <section>
        <h2>最新の記事</h2>
        <p>最新のテクノロジー情報をお届けします。</p>
    </section>
</main>
<footer>
    <p>&copy; 2025 MyWebsite</p>
</footer>

適切でない使用例（誤った使い方）

❌ 1つのページに複数の<main>タグを使用するのはNG

<!-- NG: 1ページに2つの <main> を使用 -->
<main>
    <h1>記事のタイトル</h1>
    <p>これは記事の内容です。</p>
</main>
<main>
    <h1>別の記事のタイトル</h1>
    <p>これは別の記事の内容です。</p>
</main>

✅ 正しい書き方（<section> や <article> を使用）

<main>
    <article>
        <h1>記事のタイトル</h1>
        <p>これは記事の内容です。</p>
    </article>
    <article>
        <h1>別の記事のタイトル</h1>
        <p>これは別の記事の内容です。</p>
    </article>
</main>

❌ <main> の中にナビゲーションやサイドバーを含めるのはNG

<!-- NG: ナビゲーションを <main> 内に入れる -->
<main>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">会社概要</a></li>
        </ul>
    </nav>
</main>

✅ 正しい書き方（<nav> を <main> の外に配置）

<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
    </ul>
</nav>
<main>
    <h1>会社概要</h1>
    <p>私たちはウェブ開発のプロフェッショナルです。</p>
</main>

<main>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<main>	ページの主要コンテンツ	ページごとに1つのみ使用	記事やコンテンツの本体
<section>	関連コンテンツの区分	他のセクションと関連	カテゴリごとの区分
<article>	独立したコンテンツ	それ単体で意味を持つ	ニュース記事、ブログ
<aside>	補足情報の表示	メインコンテンツとは別	サイドバー、関連記事

使用上の注意点

✅ <main> は1ページに1回のみ使用する
各ページの主要なコンテンツを囲むため、複数使用するのは避ける。

✅ ナビゲーションやサイドバーを含めない

• <main> 内には、ナビゲーション（<nav>）やサイドバー（<aside>）を含めない。
• ページの主要な情報のみ を配置する。

関連タグ

• <header> – ページやセクションのヘッダー
• <footer> – ページやセクションのフッター
• <section> – コンテンツの区切り
• <article> – 独立した記事ブロック

まとめ

<main>タグは、HTML文書内で ページの主要なコンテンツを示すタグ です。
各ページに1つだけ使用し、ナビゲーションやサイドバーは含めず、ページの中心となる情報を配置するのが推奨されます。