main 要素について調べてみた【初心者向け】

Web

今回は、main 要素について調べてみました。div 要素ではなく、この辺の要素を使いだすとなんとなくちゃんとHTMLしてる感が出てくる気がしませんか！？

この記事でわかること
  • main 要素の役割
  • main 要素の基本的な使い方
スポンサーリンク

main 要素は
主要なコンテンツを囲う要素

main 要素は、その HTML ドキュメントの主要なコンテンツ部分を表します

The main element represents the dominant contents of the document.

HTML Living Standard

意味自体は、
とくに難しいことはないですね。

そのまんまです！

main 要素は１つだけ

main 要素は、Web ページに１つだけ“存在”できます。

正確には、
HTML ドキュメントは、指定された hidden 属性を持たない main 要素を１つ以上持つことはできない。（ほぼ直訳）と公式に明記されています。

つまり、hidden 属性で非表示にしている main 要素であれば、複数記述しても問題ありません。これは、JavaScript などで表示を切り替えるような使い方を想定しています。

初心者のうちは、基本的に『main 要素は１つだけ』と覚えておき、シンプルにコーディングするのがオススメです！

main 要素の使い方

main 要素の基本的な使用例を紹介します。

<body>
 <header>…</header>
 <main>
  <article>
   <h1>今日はいい天気</h1>
   <p>こんにちは。今日は散歩に行きました。とてもいい天気でした。</p>
   <p>…</p>
   <p>…</p>
  </article>
 </main>
 <aside>…</aside>
 <footer>…</footer>
</body>

先述の通り、主要なコンテンツ部分を main 要素で囲う使い方が基本です。何をもって主要なコンテンツかと言われると、なかなか言語化しがたいですが、上記の例であれば日記（記事）が主要なコンテンツというのが容易に推察できるかと思います。

そして、header 要素や footer 要素などの要素は、日記とは直接の関係はないコンテンツ。なので、main 要素の外にあります。視点を変えると main 要素と兄弟要素たちが HTML ドキュメントの骨組みを形作っている。視覚的にもキレイにまとまっていますね。

まとめ

main 要素は、主要なコンテンツ部分を囲う要素です。HTML ドキュメントに『main 要素は１つだけ』、hidden 属性で非表示にしている main 要素であれば、複数記述しても問題ありません。

シンプルな内容ですが、よく使うとても大切な要素ですので、しっかりと把握しておきましょう！

参考・出典

・HTML Living Standard. 「4.4.14 The main element」. https://html.spec.whatwg.org/#the-main-element, 2025年4月28日閲覧。

・MDN. 「<main>」. https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/main, 2025年4月28日閲覧。

関連投稿:

【初心者向け】a 要素について、調べてみた。【HTML】 【初心者向け】section という要素について調べてみた【HTML】 body 要素についてまとめてみた。【初心者向け】 header 要素は、実はセクションではない件【初心者向け】
トップへ戻る