English 中文 العربية 日本語 Português

<main>: MAIN 要素

最終更新：2026-10-13

<main>MAIN 要素

文書の主要なコンテンツを表します。ナビゲーションやサイドバー、フッターなどの繰り返し部分を除いた、そのページ固有の内容です。

カテゴリセマンティック
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </main> タグ
ステータス標準

📝 構文

<main>メインコンテンツ</main>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<main> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： 1 つの文書に main は 1 つだけ使いましょう。article や aside、footer、header の子要素にはできません。

❓ よくある質問

Qmain は1ページにいくつ置けますか？
A表示される <main> は1つだけです。非表示でない main を複数置くことは許されません。main は「ページのメインコンテンツ領域」の唯一のランドマークで、スクリーンリーダーが直接ジャンプできます。タブで内容を切り替える場合は、hidden 属性で同時に1つしか表示されないようにします。
Qmain を article や header の中に置けますか？
A置けません。<main> は body や div など意味を持たないコンテナの直接の子としてのみ置けます。<article>、<aside>、<header>、<footer>、<nav> の中への入れ子は不可です。定番の構造は header・main・footer が並列に並ぶ形です。
Qmain は SEO に役立ちますか？
A間接的に役立ちます。<main> は検索エンジンとスクリーンリーダーが本文を素早く特定し、ナビやフッターのノイズを排除するのに役立ち、内容の認識効率を高めます。ランキング要因ではありませんが、良いセマンティクスの基盤のひとつです。
<header> <footer> <article>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML Semantics HTML Layout
HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%