はい、承知いたしました。【HTML入門】mainタグの使い方と目的を理解しよう のタイトルで、約5000語の詳細な説明を含む記事を作成します。記事内容は直接表示します。
【HTML入門】mainタグの使い方と目的を理解しよう
WebサイトやWebアプリケーションの骨組みとなるHTML。その要素一つ一つには、特定の役割や意味が込められています。ただコンテンツを表示するだけでなく、その構造や内容が何であるかを明確に伝えることは、現代のWeb開発において非常に重要です。特にHTML5で導入されたセマンティック（意味論的な）要素は、その重要性をより高めました。
この記事では、HTML5で新たに導入されたセマンティック要素の一つである<main>タグに焦点を当て、その基本的な使い方から、なぜそれを使う必要があるのか、どのようなメリットがあるのかまで、初心者の方でも深く理解できるように詳細に解説します。
「なんとなく使っている」「使ったことがない」という方も、この記事を読めば<main>タグの真価を理解し、より構造的でアクセシブル、そしてSEOにも強いWebページを作成できるようになるでしょう。
さあ、HTMLの<main>タグの世界へ踏み込みましょう。
1. HTMLの「セマンティクス」とは何か？なぜ重要なのか？
<main>タグの理解を深める前に、まずはHTMLにおける「セマンティクス（Semantics）」という考え方について触れておく必要があります。セマンティクスとは、言葉や記号が持つ「意味」のことです。HTMLにおけるセマンティクスは、タグが持つ意味、つまりその要素がどのような種類のコンテンツを表しているかを明確にすることです。
初期のHTMLでは、主にコンテンツの見た目を制御するためのタグ（例: <font>, <b>, <i>など）が中心でした。しかし、Webが進化し、コンテンツの量が増えるにつれて、単に表示するだけでなく、そのコンテンツが「何」であるかを機械が理解できる必要性が高まりました。
例えば、単なる<div>要素で囲まれたテキストがあったとします。人間が見ればそれが記事のタイトルなのか、見出しなのか、単なる強調文字なのかはレイアウトやフォントサイズで判断できますが、機械（ブラウザ、検索エンジン、スクリーンリーダーなど）にとっては、それがどのような意味を持つ情報なのかは分かりません。
そこで登場したのが、HTML5で強化されたセマンティック要素です。例えば、<h1>〜<h6>は見出し、<p>は段落、<img>は画像、<a>はリンク、そして<nav>はナビゲーション、<article>は独立した記事といった具体的な意味を持っています。
なぜセマンティクスが重要なのでしょうか？
- ブラウザや開発ツールの理解: ブラウザはセマンティックなタグを解釈し、それぞれの要素に適したデフォルトのスタイルを適用したり、特定の機能を提供したりします。開発ツールも、構造をより分かりやすく表示してくれます。
- 検索エンジンの理解（SEO）: 検索エンジンはWebページのコンテンツを収集・分析してランキングを決定します。セマンティックな構造は、検索エンジンがページの主要な内容、重要な見出し、関連性の高いコンテンツなどを正確に理解する手助けとなります。これにより、検索結果での表示順位や、リッチスニペットなどの表示に良い影響を与える可能性があります。
- アクセシビリティの向上: スクリーンリーダーなどの支援技術は、HTMLのセマンティクス情報を利用して、Webページの構造やコンテンツの内容をユーザー（特に視覚障碍者や読字障害のある方など）に伝えます。例えば、見出し構造を読み上げたり、ナビゲーションをスキップする機能を提供したりします。セマンティックなマークアップは、すべてのユーザーが情報にアクセスしやすくするために不可欠です。
- コードの可読性と保守性: セマンティックなタグを使用することで、HTMLコード自体がコンテンツの構造をより明確に示します。これにより、開発者はコードを読み解きやすくなり、他の人が書いたコードを理解したり、将来的にサイトを修正・拡張したりする際の効率が向上します。
このように、HTMLのセマンティクスは、単に見栄えを整えるだけでなく、Webサイトの質そのものを向上させる基盤となります。そして、<main>タグは、このセマンティクスにおいて非常に重要な役割を担っています。
2. <main>タグとは何か？定義と役割
それでは、いよいよ<main>タグそのものに焦点を当てていきましょう。
定義:
MDN Web Docsによると、HTMLの<main>要素は、ドキュメントの<body>またはアプリケーションの主要なコンテンツを表します。主要なコンテンツとは、ドキュメントの中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、固有のコンテンツです。
簡単に言うと、「そのページを開いたときに、最も伝えたい情報、最も重要な機能が置かれている場所」 を示すタグです。
役割:
<main>タグの主な役割は、Webページの構造において「ここがこのページの核となるコンテンツエリアですよ」と、ブラウザ、検索エンジン、そして支援技術に対して明確に伝えることです。
従来のHTMLでは、主要なコンテンツエリアを示すための特定のタグはありませんでした。多くの場合は、<div>要素にid="main"やclass="content"といった名前を付けて識別していました。しかし、これは開発者間の慣習に過ぎず、機械がその<div>が「主要なコンテンツ」であると自動的に理解するわけではありませんでした。
<main>タグの導入により、主要コンテンツエリアが標準化され、機械的な理解が容易になりました。
3. <main>タグの目的と重要性（詳細解説）
<main>タグを使うことの目的と、それによって得られる具体的な重要性を、さらに深く掘り下げて見ていきましょう。先ほど挙げたポイントを、<main>タグに特化して詳細に解説します。
3.1. セマンティクスの向上とドキュメント構造の明確化
最も直接的な目的は、ページの主要部分を明確に定義することです。<main>タグで囲まれた内容は、「このページは主にこのトピックについて書かれている」「このページの中心的な機能はこれである」という情報を強力に発信します。
これは、HTML文書が単なるテキストの集まりではなく、意味を持った構造体であることを強化します。他の要素（ヘッダー、ナビゲーション、フッター、サイドバーなど）が、主要コンテンツを補完する情報であることが明確になります。
開発者にとっても、コードを見ただけで主要コンテンツがどこにあるのかが一目瞭然となり、コードリーディングやメンテナンス性が向上します。
3.2. アクセシビリティの劇的な向上
<main>タグの最も重要なメリットの一つは、アクセシビリティの向上です。特にスクリーンリーダーのユーザーにとって、これは非常に大きな違いをもたらします。
多くのWebサイトでは、ヘッダー、グローバルナビゲーション、サイドバーなどがページの先頭近くに配置されています。視覚障碍者がスクリーンリーダーを使ってページを読み上げる場合、これらの繰り返し要素が先に読み上げられることになります。もし主要コンテンツへのスキップ機能がない場合、ユーザーは毎回これらの要素を「聞く」か、手動でスキップ操作を行う必要があり、目的の情報にたどり着くまでに多くの労力が必要になります。
<main>タグは、支援技術に対して「ここからがページの主要なコンテンツエリアです」と明確に伝えます。これにより、多くのスクリーンリーダーやその他の支援技術は、ユーザーに主要コンテンツへ直接ジャンプする機能を提供します。これは、ページの冒頭にあるナビゲーションやヘッダーを飛ばして、すぐに記事本文や主要なフォームなどにアクセスできることを意味します。
この機能は、「スキップナビゲーション（スキップリンク）」と呼ばれるアクセシビリティ手法の代替、あるいはそれを補完するものとして非常に有効です。スキップナビゲーションは、ページの先頭に主要コンテンツへのリンクを設置する手法ですが、<main>タグを使えば、マークアップ自体がその役割を果たしてくれるのです。
さらに、<main>タグを使用することで、ARIA（Accessible Rich Internet Applications）の role="main" を明示的に指定する必要がなくなります。HTML5の<main>タグは、暗黙的に role="main" というランドマークロール（ページの重要なセクションを示す役割）を持っています。支援技術は、この role="main" を持つ要素をページの主要ランドマークとして認識し、ユーザーが簡単にアクセスできるようにします。後述しますが、古いブラウザのために role="main" を付けることが推奨された時期もありましたが、現代では主要なブラウザが<main>タグを適切に解釈するため、通常は<main>タグのみで十分なアクセシビリティが提供されます。
このように、<main>タグは支援技術を利用するユーザーにとって、Webページを効率的に閲覧するための重要なランドマークとなります。
3.3. SEO（検索エンジン最適化）への貢献
セマンティックなHTMLマークアップは、検索エンジン最適化（SEO）にも間接的に貢献します。検索エンジンは、Webページのコンテンツを正確に理解しようと努めています。<main>タグを使用することで、ページのどの部分が最も重要なコンテンツであるかを検索エンジンに明確に伝えることができます。
これにより、検索エンジンのクローラーはページの主要なトピックやキーワードをより効率的に特定し、コンテンツの関連性を正確に評価することができます。結果として、検索クエリに対するページの関連性が高まり、検索結果での表示順位に良い影響を与える可能性があります。
もちろん、<main>タグを使っただけで劇的にSEO効果が現れるわけではありません。重要なのは、高品質なコンテンツを<main>タグの中に配置することです。しかし、同じコンテンツであれば、セマンティックにマークアップされている方が検索エンジンにとって理解しやすく、正当な評価を受けやすくなると考えられます。
また、<main>タグは、ページの「ボイラープレート（定型的な）コンテンツ」（ヘッダー、フッター、ナビゲーションなど）と、ページ固有の「コアコンテンツ」を区別するのに役立ちます。検索エンジンは、ページの主要な内容を評価する際に、コアコンテンツに重点を置く傾向があります。<main>タグはそのコアコンテンツを示すため、評価の精度向上に繋がると考えられます。
3.4. 開発効率と保守性の向上
前述の通り、<main>タグを使うことでコードの可読性が向上します。これにより、チーム開発において他の開発者が書いたコードを理解しやすくなったり、数ヶ月後に自分で書いたコードを見直した際に、すぐに構造を把握できたりします。
また、CSSやJavaScriptで特定のエリアを対象とする場合に、意味論的なセレクタとしてmainを使用できます。これにより、CSSクラス名やID名に依存しすぎることを避け、より構造に基づいたスタイリングやDOM操作が可能になります。例えば、主要コンテンツエリア全体にスタイルを適用したい場合、単にmain { ... } と記述すればよいのです。これは、セレクタが要素の役割を直接的に示しているため、コードの意図が明確になります。
4. <main>タグの基本的な使い方とルール
<main>タグの目的と重要性を理解したところで、具体的な使い方を見ていきましょう。
4.1. 基本的なHTML構造例
最も基本的な使い方は、ページの主要なコンテンツを <main> タグで囲むだけです。
“`html
HTMLのmainタグの使い方を徹底解説
mainタグとは？
mainタグは、HTML5で導入されたセマンティック要素…
なぜmainタグを使うべきか？
セマンティクス、アクセシビリティ、SEOの観点から…
“`
この例では、<header>, <nav>, <main>, <footer> といったセマンティック要素が使われています。<main>タグは、ヘッダー、ナビゲーション、フッターといったページ全体で共通する可能性のある要素の外側に配置されています。そして、その中にこのページ固有の主要なコンテンツである記事本体（<article>)とその補足情報（<aside>）が配置されています。
4.2. <main>タグ配置の制約
HTML Living Standard（現代のHTMLの仕様）において、<main>タグの配置にはいくつかの制約があります。
制約:
<main>要素は、以下の要素の子孫要素として配置してはなりません。
<article><aside><footer><header><nav>
これはなぜでしょうか？ これらの要素は、それぞれが特定の意味（独立したコンテンツ、補足情報、フッター、ヘッダー、ナビゲーション）を持つ「セクション」や「セクショニングルート」を形成する可能性があります。<main>タグは、ドキュメント全体の主要コンテンツを示すものであり、特定のセクションの内部に局所的な主要コンテンツが存在するという構造は、ドキュメント全体の主要性という概念と矛盾するためです。
したがって、<main>タグは通常、<body>タグの直下や、<body>タグ直下のラッパー<div>の内部などに配置されます。上記のコード例のように、<header>や<footer>と並列に配置されるのが一般的です。
この制約は、歴史的なHTML仕様の変遷や、様々なツール（HTMLバリデーターなど）の実装によって解釈が異なる場合もありましたが、HTML Living Standardでは上記のように明確に定義されています。適切なセマンティック構造を保つために、この制約を守ってマークアップすることが強く推奨されます。
4.3. ページ内に <main>タグは「1つだけ」
<main>タグを使用する上で、最も重要なルールの一つは、ドキュメント（Webページ）内にアクティブな<main>タグは1つだけ存在できるということです。
これもなぜでしょうか？ <main>タグは、そのページ全体の「主要なコンテンツ」を示すものです。ページ全体に主要なコンテンツエリアが複数存在するというのは、概念的に矛盾します。ページの中心となるトピックや機能は一つであるべき、という考え方に基づいています。
例外:
ただし、仕様上は「hidden属性を持つ<main>要素を除く」という例外があります。hidden属性は、その要素が関連性がなくなったか、まだ関連性がない、あるいは他の目的にために隠されていることを示します。つまり、hidden属性が付与されている<main>要素は、その時点ではページの主要コンテンツとして機能していないと見なされます。
この例外の具体的なユースケースとしては、例えばシングルページアプリケーション（SPA）において、複数の「画面」がHTML上に存在しているが、ユーザーには現在表示されている画面のコンテンツだけが主要コンテンツとして認識されるべき、という場合が考えられます。しかし、これはやや高度な使い方であり、一般的には単一のHTMLファイル内で複数の主要コンテンツエリアが必要になる状況はほとんどありません。
結論として、通常のWebサイト構築においては、「1つのHTMLページに<main>タグは1つだけ」と覚えておけば間違いありません。
もし複数のエリアを<main>で囲みたいと思った場合、それはおそらく<article>や<section>といった他のセマンティック要素を使うべき状況でしょう。複数の記事が一覧表示されているページであれば、各記事は<article>としてマークアップし、それらをまとめて<main>で囲む、といった形になります。
5. <main>タグに入れるべきコンテンツ、入れるべきではないコンテンツ
<main>タグの役割は「そのページ固有の主要なコンテンツ」を囲むことでした。これを踏まえて、具体的にどのようなコンテンツを<main>タグに入れるべきか、そしてどのようなコンテンツは避けるべきかを明確にしましょう。
入れるべきコンテンツの例:
- ブログ記事やニュース記事: 記事のタイトル、本文、著者情報、投稿日、コメント欄など、その記事固有のコンテンツ全体。
- 商品詳細ページ: 商品名、画像、価格、説明文、仕様、レビュー、購入ボタンなど、特定の商品に関する情報。
- お問い合わせフォームページ: フォームの各入力フィールド、送信ボタン、フォームに関する説明文など、フォーム機能全体。
- 検索結果ページ: 検索キーワード、検索結果リスト、ページネーションなど、検索機能とその結果。
- トップページ: サイトの主要なコンテンツブロック、最新記事一覧、主要なサービス紹介など、そのサイト全体の入り口として最も重要な情報。ただし、トップページは他のページに比べて「固有」のコンテンツが少ない場合もあるため、サイトの構造によって判断が必要です。サイトの理念や主要サービスがメインであればそれを、記事一覧がメインであればそれを囲みます。
- 特定の機能ページ: ユーザー設定画面、ダッシュボード、地図表示画面など、そのページが提供する核となる機能や情報。
判断基準:
「そのページ固有」 であるか、「ページの中心的なトピックや機能」 であるか、が重要な判断基準です。そのコンテンツがなければ、そのページは存在意義を失う、あるいは目的を果たせない、といったものが主要コンテンツと考えることができます。
入れるべきではないコンテンツの例:
- サイトヘッダー: サイトのロゴ、サイトタイトル、キャッチフレーズなど、ページ全体で共通して表示されるヘッダー情報。これは通常
<header>タグで囲みます。 - グローバルナビゲーション: サイト内の主要なページへのリンク集など、サイト全体を通して表示されるナビゲーションメニュー。これは通常
<nav>タグで囲みます。 - サイドバー: 関連リンク、カテゴリー一覧、月別アーカイブ、広告、プロフィール情報など、主要コンテンツと関連はあるが、なくても主要コンテンツの理解に支障がない補足的な情報。これは通常
<aside>タグで囲みます。 - サイトフッター: 著作権情報、連絡先、サイトマップ、プライバシーポリシーへのリンクなど、ページ全体で共通して表示されるフッター情報。これは通常
<footer>タグで囲みます。 - 繰り返し表示される要素: 例えば、ブログの記事一覧ページで、各記事の抜粋がリスト表示されている場合、そのリスト全体は主要コンテンツの一部ですが、リストの表示スタイル（例: 各記事のタイトルと冒頭文、サムネイル）自体は定型的であるとも言えます。しかし、そのリストがそのページの「核」であるならば、
<main>で囲むべきです。一方、記事詳細ページにおいて、ページ下部に「おすすめ記事」のような関連リンクリストがある場合は、これは<aside>や通常の<div>で囲むべきでしょう。判断が難しい場合は、「そのページが最も伝えたいことは何だろう？」と考えると分かりやすいかもしれません。
要約: <main>タグは、ページの「本体」を囲むものです。ヘッダー、フッター、ナビゲーション、サイドバーといった、ページの「枠組み」や「定型的な要素」は<main>タグの外に置くべきです。
6. 具体的な使用例（コードと解説）
様々な種類のページで、<main>タグがどのように使われるのかを、具体的なコード例とともに見ていきましょう。
6.1. ブログ記事詳細ページ
これは最も典型的な使用例です。
“`html
○○ブログ
HTMLのmainタグの使い方を徹底解説
導入
Webサイトの構造を…
mainタグの定義
mainタグはドキュメントの主要なコンテンツを…
“`
解説:
<header>、<nav>、<footer>はサイト全体で共通する可能性のある要素として<main>の外に配置されています。<main>タグの中には、この記事そのもの（<article>）と、この記事に関連するサイドバーコンテンツ（<aside>）が配置されています。<article>タグは記事全体を囲み、記事の見出しや本文などが<section>や<p>などで構造化されています。<article>自体が独立したコンテンツであることを示しています。<aside>タグは、主要な記事本文の流れからは外れるが、記事に関連する補足情報（著者情報、人気記事、カテゴリーなど）を囲んでいます。これは、ページの主要な目的（この記事を読むこと）を妨げないための配置です。
6.2. ECサイト商品詳細ページ
特定の商品情報がメインのページです。
“`html
ECサイト名
商品名：最新型ワイヤレスイヤホン
価格: 15,800円
在庫: あり
商品説明
クリアな高音質と快適なフィット感…
仕様
- 接続方式: Bluetooth 5.0
- バッテリー駆動時間: 約8時間
お客様レビュー
“`
解説:
- 商品名、画像、価格、商品説明、仕様、購入ボタン、お客様レビュー、関連商品といった、その特定の商品ページにのみ表示される情報群がまとめて
<main>タグで囲まれています。 - 関連商品セクション（
<section class="related-products">）も主要コンテンツの一部と見なされています。これは、商品購入を検討しているユーザーにとって、関連商品情報はそのページの目的（商品選び）に密接に関わっているためです。ただし、これを<aside>とするかどうかは判断が分かれる可能性もあります。より補足的な情報（例: サイトのお知らせなど）であれば<aside>が適切でしょう。 <main>タグの中に直接複数の<section>や<article>（レビューなど）を配置するのは一般的なパターンです。<main>はあくまで主要コンテンツの「エリア」を示すため、その中の構造は他のセマンティック要素や<div>などを組み合わせて構築します。
6.3. 検索結果ページ
ユーザーが入力した検索クエリに対する結果が表示されるページです。
“`html
サイト名
「キーワード」の検索結果
〇〇件見つかりました。
“`
解説:
- 検索キーワード、結果件数、検索結果のリスト、ページネーションといった、検索結果ページ固有の情報が
<main>で囲まれています。 - 各検索結果項目は、独立したコンテンツとして
<article>タグでマークアップされています。 - ページネーションは、ナビゲーション機能ではありますが、この検索結果リストに対するナビゲーションであり、このページの主要コンテンツを操作するための要素と見なせるため、
<main>の中に配置されています。ただし、グローバルナビゲーションとは明確に区別されます。
6.4. お問い合わせフォームページ
フォーム入力がメインのページです。
“`html
サイト名
お問い合わせ
以下のフォームにご入力の上、送信してください。
“`
解説:
- お問い合わせフォームの機能そのもの、およびフォームに関する説明文が
<main>タグで囲まれています。これがこのページの主要な役割だからです。 - フォーム内の各入力項目は、関連するグループごとに
<section>でまとめるなど、フォーム内部の構造もセマンティックにマークアップすることで、アクセシビリティや保守性が向上します。
これらの例からわかるように、<main>タグはページの中心となる内容を特定し、それを他の定型的な要素から切り離すために使用されます。
7. <main>タグの応用と注意点（詳細解説）
基本的な使い方に加えて、<main>タグを使う上での応用的な側面や、知っておくべき注意点について解説します。
7.1. ARIA role="main" との関係性
前述したように、HTML5の<main>タグは、アクセシビリティ技術に対して role="main" というランドマークロールを暗黙的に付与します。
ランドマークロールとは？
ARIA（Accessible Rich Internet Applications）仕様で定義されているロールの一つです。Webページの特定のセクション（ヘッダー、ナビゲーション、主要コンテンツ、補足情報、フッターなど）に役割（ロール）を与えることで、支援技術がページの構造をより正確に理解し、ユーザーが効率的にページ内を移動できるようにするための仕組みです。
role="main" は、その要素がドキュメントの主要なコンテンツであることを示します。これは、視覚障碍者やその他の支援技術ユーザーが、ページの繰り返し要素（ヘッダー、ナビゲーションなど）をスキップして主要コンテンツに直接アクセスするための標準的な方法として広く認識されています。
<main>タグと role="main" の関係:
- HTML5で
<main>タグが導入される前は、主要コンテンツエリアを示す標準的なHTML要素がありませんでした。そのため、アクセシビリティを考慮する場合、主要コンテンツを囲む<div>要素などに明示的にrole="main"属性を付けることが推奨されていました。（例:<div id="main" role="main">...</div>） - HTML5で
<main>タグが導入されてからは、<main>タグ自体がrole="main"と同じ意味を持つように仕様で定義されました。 - したがって、現代のWeb開発においては、
<main>タグを使用する場合、自分でrole="main"属性を明示的に記述する必要はありません。<main>タグを書くだけで、自動的にrole="main"のセマンティクスが提供されます。
古いブラウザへの対応:
Internet Explorer 11以前など、一部の古いブラウザはHTML5の<main>タグを意味のある要素として認識せず、単なるインライン要素のように扱ってしまうことがありました（見た目の問題はCSSで display: block; を指定すれば解決できましたが、セマンティクスの問題は残りました）。
このような古いブラウザのユーザーにもアクセシブルな主要コンテンツスキップ機能を提供するために、過去には<main>タグに加えて role="main" 属性も併記することが推奨された時期がありました。
“`html
“`
しかし、現在ではIE11のサポート終了などにより、主要なモダンブラウザはすべて<main>タグを適切にサポートしています。そのため、特別な理由（極めて古い環境への対応が必要など）がない限り、<main role="main"> と記述する必要はありません。 <main>のみで十分です。
もし、特別な理由があって<div>要素などを主要コンテンツとしてマークアップする必要がある場合は、その<div>に role="main" を明示的に付ける必要があります。しかし、可能な限り<main>タグを使うべきです。<main>タグはHTMLの標準要素であり、ブラウザやツールによる解釈の互換性が最も高いからです。
7.2. CSSでのスタイリング
<main>タグは、CSSで他のHTML要素と同様にスタイリングできます。主要コンテンツエリア全体の幅、余白、背景色などを指定する際に便利です。
“`css
/ style.css /
body {
font-family: sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f0f0f0;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
margin: 0 1em;
}
/ mainタグのスタイル /
main {
display: block; / IE11以前向けの名残。モダンブラウザではデフォルトでblock /
max-width: 960px; / 最大幅を指定 /
margin: 20px auto; / 上下20px、左右中央寄せ /
padding: 0 20px; / 左右の内側余白 /
background-color: #fff; / 背景色 /
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); / 影 /
}
/ mainタグ内の要素のスタイルは、個別に指定 /
main article {
margin-bottom: 30px;
}
main h2 {
color: #333;
}
aside {
background-color: #f9f9f9;
padding: 1em;
margin-top: 20px;
border-left: 5px solid #eee;
}
/ レスポンシブ対応など /
@media (min-width: 768px) {
main {
display: flex; / Flexboxで主要コンテンツとサイドバーを並べる /
gap: 20px; / 要素間の隙間 /
}
main article {
flex: 3; /* 主要コンテンツを広く */
margin-bottom: 0; /* PC表示ではflexアイテムになるので不要に */
}
main aside {
flex: 1; /* サイドバーを狭く */
margin-top: 0; /* PC表示ではflexアイテムになるので不要に */
}
}
“`
上記のCSS例では、mainセレクタを使って主要コンテンツエリア全体にスタイルを適用しています。レスポンシブデザインのためにFlexboxを使って、PC表示では<article>と<aside>を横並びに配置する例も示しています。
display: block; は、IE11以前が<main>をデフォルトでインライン要素として扱っていたため、ブロック要素として正しく表示させるために必要でしたが、現代のモダンブラウザでは<main>はデフォルトでブロック要素として扱われるため、通常は明示的に指定する必要はありません。ただし、古いCSSコードを見かけることはあるかもしれません。
7.3. JavaScriptでの操作
JavaScriptからページの主要コンテンツエリアにアクセスする場合も、document.querySelector('main') や document.getElementsByTagName('main')[0] といった方法で簡単に参照できます。
“`javascript
// ページの主要コンテンツ要素を取得
const mainContent = document.querySelector(‘main’);
if (mainContent) {
// 例: 主要コンテンツエリアの背景色を動的に変更
mainContent.style.backgroundColor = ‘#eef’;
// 例: 主要コンテンツ内の最初に見出しh2を取得
const firstHeading = mainContent.querySelector('h2');
if (firstHeading) {
console.log("主要コンテンツの最初の見出し:", firstHeading.textContent);
}
// 例: ボタンクリックで主要コンテンツの一部を更新（SPAなど）
const updateButton = document.getElementById('updateContentButton');
if (updateButton) {
updateButton.addEventListener('click', () => {
mainContent.innerHTML = '<h2>新しいコンテンツ</h2><p>コンテンツが更新されました。</p>';
});
}
}
“`
このように、意味論的なタグを使用することで、JavaScriptからのDOM操作もコードの意図が明確になり、特定の要素を選択しやすくなります。
7.4. シングルページアプリケーション（SPA）での使い方
React, Vue.js, Angularなどのフレームワークを使ったSPAでは、ページ遷移の際にHTMLファイル全体が再読み込みされるのではなく、JavaScriptによってコンテンツが動的に書き換えられます。このような場合でも、<main>タグのルールは変わりません。
SPAでの考え方:
- SPAでも、常に「アクティブな」主要コンテンツエリアは1つであるべきです。
- 画面遷移によって主要コンテンツが切り替わる場合、通常は
<main>要素の内容（innerHTML）を動的に書き換えるか、あるいは複数の<main>要素を用意しておき、表示したい<main>要素以外にhidden属性を付与して非表示にする、といった方法が考えられます。 - 後者の「
hidden属性で切り替える」方法は、仕様上の「hidden属性を持つ<main>要素を除く」という例外に合致します。ただし、マークアップが複雑になる可能性もあるため、一般的には主要コンテンツエリアを管理するコンポーネント（または要素）を1つ用意し、その内部のコンテンツを動的に切り替える方がシンプルかもしれません。その場合、そのコンポーネントのルート要素として<main>を使用します。
“`html
“`
“`javascript
// SPAの例（コンテンツ切り替えの概念）
const mainElement = document.getElementById(‘app-main-content’);
function loadPageContent(pageType, data) {
// ページタイプに応じてコンテンツを生成または取得
let newContentHTML = ”;
if (pageType === ‘article’) {
newContentHTML = <h2>${data.title}</h2><p>${data.body}</p>;
} else if (pageType === ‘product’) {
newContentHTML = <h2>${data.name}</h2><img src="${data.image}">;
}
// …その他のページタイプ
// main要素の内容を新しいコンテンツで置き換え
mainElement.innerHTML = newContentHTML;
// 必要に応じて、新しいコンテンツ内のインタラクティブ要素にイベントリスナーを設定するなど
}
// 例: リンククリックでコンテンツをロード
document.body.addEventListener(‘click’, (event) => {
if (event.target.tagName === ‘A’ && event.target.classList.contains(‘spa-link’)) {
event.preventDefault();
const pageUrl = event.target.href;
// APIからコンテンツデータを取得するなどの処理を想定
fetch(pageUrl)
.then(response => response.json())
.then(data => {
// ページタイプを判断してコンテンツをロード
loadPageContent(data.type, data.content);
// ブラウザの履歴を更新
history.pushState(data, ”, pageUrl);
});
}
});
// ブラウザの戻る・進むボタンに対応
window.addEventListener(‘popstate’, (event) => {
if (event.state) {
loadPageContent(event.state.type, event.state.content);
} else {
// 初期ページのロード処理
}
});
// 初期ページのロード
loadPageContent(‘initialPageType’, initialPageData);
“`
このように、SPAにおいても、<main>タグは現在ユーザーに見えている、かつそのページの主要なコンテンツを示すために使用されるべきです。複数の主要な「ビュー」が存在する場合でも、一度にアクティブな<main>は1つになるように実装することが、セマンティクスとアクセシビリティの観点から重要です。
8. 他のセマンティック要素との比較
HTML5には、<main>タグ以外にも多くのセマンティック要素があります。特に、コンテンツのセクションを定義する要素は混同しやすいため、<main>タグとの違いを明確に理解することが重要です。
8.1. <article> vs <main>
<article>: 自己完結した、独立して配布または再利用可能なコンテンツをマークアップするために使用されます。例としては、ブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメント、インタラクティブなウィジェットなどがあります。<article>は、そのコンテンツ単体で意味が通じるべきです。<main>: ドキュメントまたはアプリケーションの主要なコンテンツエリア全体をマークアップするために使用されます。
違い:
<article>は特定のコンテンツ単位を示すのに対し、<main>はページ全体の主要なエリアを示します。
<main>タグの中に1つまたは複数の<article>タグが含まれることはよくあります。例えば、ブログのトップページ（記事一覧）では、各記事の抜粋が<article>タグでマークアップされ、それらの<article>群が<main>タグで囲まれます。記事詳細ページでは、記事全体が1つの<article>でマークアップされ、それが<main>タグで囲まれます。
重要なのは、<article>は「コンテンツそのもの」、<main>は「そのコンテンツが配置される主要な場所」であるという点です。
8.2. <section> vs <main>
<section>: 文書やアプリケーションの汎用的なセクションを表します。通常、見出し（<h1>〜<h6>）を伴って使用され、テーマ別にコンテンツをグループ化するために使用されます。例えば、記事の中で「導入」「本論」「まとめ」といった章立てをする場合、それぞれの章を<section>で囲むことができます。<main>: ドキュメントまたはアプリケーションの主要なコンテンツエリア全体を表します。
違い:
<section>は主要コンテンツ内部のサブセクションを示すために使用できますが、<main>はページ全体の主要なエリアを示します。
<main>タグの中に複数の<section>タグが含まれることは非常に一般的です。例えば、商品詳細ページで「商品説明」「仕様」「レビュー」といった項目をそれぞれ<section>で区切る場合、それらの<section>群はまとめて<main>タグで囲まれます。
<main>はページに一つですが、<section>はページ内に複数存在できます。また、<section>は<main>の外に配置されることもあります（例: サイトの紹介セクションなど）。しかし、慣習として、<section>は通常、主要コンテンツエリアである<main>の中に配置されることが多いです。
重要なのは、<section>はあくまで「汎用的な区切り」であるのに対し、<main>は「最も重要なコンテンツエリア」であるという点です。安易にすべての<div>を<section>に置き換えるのではなく、見出しを伴うなど、明確なテーマ分けがある場合に<section>を使用するのが適切です。
8.3. <aside> vs <main>
<aside>: 主要コンテンツとは直接的な関連性はあるものの、主要な流れからは切り離して考えられるべき補足的なコンテンツをマークアップするために使用されます。例としては、サイドバー、引用ボックス、広告ブロック、関連リンク集などがあります。<main>: ドキュメントまたはアプリケーションの主要なコンテンツエリア全体を表します。
違い:
<aside>は補足情報を示す要素であり、<main>は主要情報を示す要素です。
<aside>要素は、通常<main>要素の外側に配置されます。例えば、ブログ記事詳細ページで、記事本文（<main>内にある<article>）の横に表示されるカテゴリーリストや人気記事リストなどは、<aside>でマークアップし、それを<main>の外、あるいは<main>と同じレベルの要素として配置します。
ただし、主要コンテンツの一部として、そのコンテンツ内に関連する補足情報（例: 記事の途中に挿入される関連用語の解説ボックス、商品詳細ページの商品説明内に表示される補足情報）を<aside>でマークアップし、それを<main>の中に配置することもあります。しかし、この場合でも、その<aside>の内容は「主要な流れからは切り離して考えられるべき」情報である必要があります。
最も一般的な使い分けは、<main>で主要な記事や商品情報などを囲み、サイト全体のサイドバーなど、主要コンテンツの横に表示されるが主要ではない情報を<aside>で囲み、その<aside>を<main>と並列に配置するという形です。
9. よくある疑問と落とし穴
<main>タグを使う上で、初心者の方が疑問に思ったり、間違いやすいポイントをいくつか解説します。
Q1: ページ全体を<main>タグで囲んでしまっても良いですか？
A: いいえ、それは間違いです。<main>タグは、ヘッダー、フッター、ナビゲーション、サイドバーなど、ページ全体で共通する部分や補足的な部分を含めてはなりません。<main>タグは、あくまで「そのページ固有の主要なコンテンツ」のみを囲むために使用します。
もしページ全体を<main>で囲んでしまうと、ヘッダーやフッターといった重要なセクションが「主要コンテンツの一部」であると誤って伝えられてしまい、アクセシビリティツールが正しくページの構造を認識できなくなる可能性があります。また、セマンティックな意味合いも損なわれ、コードの可読性も低下します。
Q2: 複数の<main>タグを使い分けたい場面はありますか？
A: 基本的に、1つのドキュメント内にアクティブな<main>タグは1つだけです。前述の通り、hidden属性が付与されている<main>要素を除くという例外はありますが、通常のWebサイトで複数の主要コンテンツエリアを同時に表示する状況は考えられません。
もし、タブ切り替えなどでコンテンツを切り替えたい場合、表示されているコンテンツがその時点での「主要コンテンツ」となるようにマークアップするのが適切です。例えば、タブごとに異なるコンテンツブロックがあり、タブが切り替わるたびに表示されるコンテンツが変わる場合、それらのコンテンツブロックは<main>の中に配置し、非表示になっているコンテンツには hidden 属性を付与するか、あるいはJavaScriptで要素自体を切り替えることで、常に1つの主要コンテンツだけがアクティブであるようにします。
しかし、より一般的な方法は、<main>タグは固定しておき、その内部のコンテンツ（例えば<article>や特定の<div>など）を動的に切り替える、というものです。
Q3: <main>タグを使わないとどうなりますか？必須ですか？
A: <main>タグはHTMLの文法上必須ではありません。<main>タグがなくても、Webページは表示され、ほとんどのコンテンツは閲覧可能です。しかし、それは表示上の問題がないだけであり、セマンティクス、アクセシビリティ、そしてSEOの観点からは推奨されません。
<main>タグがない場合、ブラウザ、検索エンジン、支援技術は、ページのどの部分が最も重要で固有のコンテンツであるかを正確に判断することが難しくなります。これにより、特にスクリーンリーダーユーザーがページを効率的に閲覧することが困難になったり、検索エンジンがページの主要なトピックを把握しにくくなったりする可能性があります。
したがって、必須ではありませんが、現代のWeb標準に則り、より高品質なWebサイトを作成するためには、<main>タグを適切に使用することが強く推奨されます。これは「良い習慣」であり、すべてのWeb開発者が身につけるべきスキルです。
Q4: 古いサイトに<main>タグを導入するにはどうすれば良いですか？
A: 既存のサイトに<main>タグを導入する場合、まずはページの構造を分析し、どの部分が「そのページ固有の主要なコンテンツ」であるかを特定することから始めます。通常、<header>、<nav>、<footer>といった共通部分を除いた、記事本文や商品情報、フォームなどが含まれるエリアです。
そのエリアを囲んでいる既存の<div>要素などを特定し、その部分を<main>タグで置き換えます。あるいは、既存の<div>はそのままで、その直下に<main>タグを追加し、主要コンテンツエリア全体を<main>で囲むという方法もあります。ただし、前者の方がよりセマンティックです。
HTMLを修正した後、CSSの調整が必要になる場合があります。既存のCSSセレクタが変更された要素名（main）に対応しているか確認したり、必要に応じて新しいセレクタ（main { ... }）を追加したりします。特に、既存のスタイルが#main-contentのようなIDセレクタに強く依存している場合は、そのスタイルをmainタグに引き継がせるための調整が必要です。
アクセシビリティやSEOへの影響は、すぐに目に見える形で現れるわけではありませんが、長期的に見れば確実にWebサイトの質を向上させます。既存サイトの改善を行う際には、他のセマンティック要素（<article>, <section>, <aside>, <nav>, <header>, <footer>）の導入も併せて検討すると良いでしょう。
10. まとめ：なぜ今すぐ<main>タグを使うべきなのか
この記事では、HTMLの<main>タグについて、その定義、目的、基本的な使い方、応用、そして他の要素との比較など、多角的な視点から詳細に解説しました。
<main>タグは単にコンテンツを囲むための箱ではありません。それはWebページの主要な意味論的なエリアを示す非常に重要な要素です。
<main>タグを使うことのメリットを改めて整理しましょう:
- セマンティクスの向上: ページの主要コンテンツが明確になり、HTML構造がより理解しやすくなります。
- アクセシビリティの劇的な向上: スクリーンリーダーユーザーが主要コンテンツに素早くアクセスできるようになり、操作性が向上します。これはすべてのユーザーにとって、より使いやすいWebサイトを作る上で不可欠な要素です。
- SEOへの貢献: 検索エンジンがページの主要なトピックをより正確に理解しやすくなり、適切な評価につながる可能性があります。
- 開発者にとってのメリット: コードの可読性が向上し、CSSやJavaScriptでのスタイリング・操作が容易になります。
現代のWeb開発において、セマンティックなHTMLマークアップはもはやオプションではなく、必須のスキルです。<main>タグは、そのセマンティクスを強化するための基本的な要素の一つです。
これからHTMLを学ぶ方も、既存の知識をアップデートしたい方も、ぜひ積極的に<main>タグを使い始めましょう。あなたのWebページは、より構造的で、より多くの人にとってアクセスしやすく、そして検索エンジンにも優しいものになるはずです。
学ぶべき次のステップ:
<main>タグの理解を深めたら、次は<article>, <section>, <aside>, <nav>, <header>, <footer>といった他のHTML5セマンティック要素についても学び、それぞれの役割と使い分けをマスターしましょう。これらの要素を組み合わせることで、Webページの構造をよりリッチで意味のあるものにすることができます。
また、ARIAロールについても基本的な知識を持つと、アクセシビリティに対する理解がさらに深まります。特に、主要なランドマークロール（role="banner", role="navigation", role="main", role="complementary", role="contentinfo", role="search", role="form", role="application"など）について知っておくと役立ちます。
Web開発は常に進化しています。新しい技術や仕様が登場しますが、その根底にある「情報をいかに構造化し、意味を付与するか」という考え方は変わりません。<main>タグはその考え方を具現化した良い例です。
さあ、今日からあなたのHTMLコードに<main>タグを取り入れて、より良いWebを作りましょう！
コメント
まだコメントはありません。