Webページの「心臓部」を守る：`main`要素の正しい使い方と、意外なルール

こんにちは！Web制作の世界へようこそ。HTMLを書き始めると、`header`や`footer`といったタグに出会いますよね。「これらは一体どう使い分ければいいの？」と迷ってしまうことは、誰にでもある通過点です。

今日は、その中でも特に重要で、かつ「たった一つのルール」を守るだけでグッとプロらしくなる`main`要素について、一緒に深掘りしていきましょう。

—

そもそも「main要素」って何者？

Webページを「本」に例えてみましょう。

• `header`：本のタイトルや目次がある「表紙」
• `footer`：著者情報や問い合わせ先が書かれた「裏表紙」
• `nav`：ページ内を移動するための「しおり」

では、`main`要素はどこにあたるでしょうか？
答えは、「本の本文が書かれているメインのページ」です。

そのページで「一番伝えたいこと」や「読者が読むべき中心のコンテンツ」を包む場所、それが`main`要素の役割です。ここを正しくマークアップしてあげるだけで、Googleなどの検索エンジンや、視覚障がいの方が使うスクリーンリーダーといった「読み上げソフト」が、「ここがこのページの中心だ！」と迷わずに理解できるようになります。

「ページに一つだけ」という大切なルール

さて、ここからが今日の本題です。`main`要素には、ある一つの大切な制約があります。

それは、「一つのHTMLファイルにつき、main要素は一つしか置いてはいけない」というルールです。

なぜでしょうか？
もし、本の中に「ここが一番重要です！」という章が10個も20個もあったら、読者はどこを読めばいいか混乱してしまいますよね。それと同じで、ブラウザや検索エンジンにとっても、「どれがメインなんだ？」と迷わせてしまうのは親切ではありません。

つまずきやすいポイント：こんな時はどうする？

「メインコンテンツが分かれているから、`main`を2つ作りたい！」という場面もあるかもしれません。そんなときは、`main`を2つ並べるのではなく、一つの`main`の中に複数の`section`や`article`を入れて整理するのが正解です。

「大丈夫です、最初は迷うのが当たり前！まずは『一番目立つ大きな枠は一つだけ』と覚えておきましょう。」

—

実践！main要素のコード例

では、実際の書き方を見てみましょう。シンプルで読みやすい構成を意識しました。

—

意外なテクニック：hidden属性との意外な関係

最後に、少しだけ応用編の話をしますね。HTMLには`hidden`という属性があります。「隠す」という意味ですね。

実は、`main`要素に`hidden`属性をつけると、その中身をブラウザ上で「見えない状態」にできます。
「えっ、わざわざ見えなくするの？」と思いますよね。実はこれ、「スマホ用とPC用でコンテンツを切り替える」といった、少し複雑なWeb制作の現場で使われることがあるんです。

ただ、初心者の方に一つだけアドバイスがあります。`hidden`で無理やり隠すよりも、基本はCSSを使って表示を制御する方が、Webサイトの管理はずっと楽になります。「こんな書き方もできるんだな」と、引き出しの一つに入れておく程度で大丈夫ですよ。

—

まとめ：Webページに「主役」を決めよう

今回お伝えしたかったのは、この2点だけです。

1. `main`要素は、そのページの「主役（一番伝えたい内容）」を囲むためのもの。
2. 一つのページに主役は一人だけ。だから`main`は一つだけ。

このルールを守るだけで、あなたの書くHTMLは、機械（検索エンジン）にとっても人間（ユーザー）にとっても、とっても親切で分かりやすいものになります。

最初は完璧にできなくても全く問題ありません！まずは「このページで一番伝えたい場所はどこかな？」と考えて、`main`タグで囲んでみる。その小さな一歩が、プロのフロントエンドエンジニアへの第一歩です。

一緒に、楽しくコードを書いていきましょうね！