【HTML Living Standard】main要素の使い方
main要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
mainオブジェクトは、HTMLドキュメントの主要なコンテンツを表すオブジェクトです。この要素は、ウェブページの中心となる内容や、そのページの主題に直接関連するコンテンツを明確にマークアップするために使用されます。これにより、その部分がドキュメントの主要な目的を果たすものであることを明示的に示すことができます。
main要素の主な目的は、ドキュメントの構造をセマンティックに定義し、アクセシビリティを向上させることです。例えば、スクリーンリーダーなどの支援技術を利用するユーザーは、main要素の存在によって、サイトのナビゲーションやフッターなどの補助的な情報をスキップし、ページのメインコンテンツに直接アクセスできるようになります。これは、ユーザーが迅速に目的の情報にたどり着く上で非常に重要な機能であり、ウェブサイトの利便性を高めます。
main要素を使用する際にはいくつかの重要な制約があります。まず、1つのHTMLドキュメント内にmain要素は必ず1つだけ存在しなければなりません。これは、ページの主要なコンテンツが複数存在することはないという考えに基づいています。また、<article>, <aside>, <footer>, <header>, <nav>といったセマンティックな領域を示す要素の中にmain要素をネストすることはできません。これらの要素は、main要素が示す主要な内容とは異なる、サイト全体の構造や補足的な情報を示すために使われるからです。
main要素を適切に活用することで、ウェブページのコンテンツがより理解しやすくなり、検索エンジンによるページのインデックス作成にも良い影響を与え、最終的には幅広いユーザーにとって使いやすいウェブサイトを構築する手助けとなります。
構文(syntax)
1<main> 2 <!-- この中にドキュメントの主要なコンテンツを配置します --> 3 <h1>主要コンテンツのタイトル</h1> 4 <p>主要なコンテンツの最初の段落です。</p> 5 <article> 6 <h2>サブセクション</h2> 7 <p>サブセクションのコンテンツ。</p> 8 </article> 9</main>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのmainタグで主要コンテンツを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>mainタグのサンプル</title> 7</head> 8<body> 9 <!-- サイト全体のヘッダー（ナビゲーションやロゴなど） --> 10 <header> 11 <h1>ウェブサイトのタイトル</h1> 12 <nav> 13 <ul> 14 <li><a href="#">ホーム</a></li> 15 <li><a href="#">サービス</a></li> 16 <li><a href="#">お問い合わせ</a></li> 17 </ul> 18 </nav> 19 </header> 20 21 <!-- 22 mainタグは、文書の主要なコンテンツを表します。 23 各ドキュメントにはmainタグは1つだけ配置することが推奨されます。 24 ヘッダー、フッター、ナビゲーション、サイドバーなどの 25 補助的なコンテンツはこのタグの外に配置します。 26 --> 27 <main> 28 <h2>メインコンテンツの見出し</h2> 29 <p>このセクションには、ページの主題となる主要な情報やコンテンツが入ります。</p> 30 <p>例えば、記事の本文、製品の詳細、サービスの紹介などが考えられます。</p> 31 32 <h3>重要な情報</h3> 33 <p><code><main></code>要素は、アクセシビリティを向上させ、 34 スクリーンリーダーなどの支援技術がページの主要な部分を迅速に特定できるようにします。</p> 35 <p>この要素は、<code><article></code>、<code><aside></code>、 36 <code><footer></code>、<code><header></code>、<code><nav></code> 37 の子孫であってはなりません。</p> 38 </main> 39 40 <!-- サイト全体のフッター（著作権情報や連絡先など） --> 41 <footer> 42 <p>© 2023 サンプル会社</p> 43 </footer> 44</body> 45</html>
mainタグは、HTML文書においてページの主要なコンテンツ、つまり主題となる最も重要な情報や内容を囲むために使用されます。これは、ウェブサイトの主要な記事本文や、製品の詳細、サービスの紹介といった、そのページで最もユーザーに伝えたい核となる部分を意味します。
サンプルコードでは、ウェブサイト全体のヘッダーやフッターといった補助的な情報が配置された<header>タグと<footer>タグの間に<main>タグが配置されており、この中にページの中心となる「メインコンテンツの見出し」や「重要な情報」が含まれています。このように、サイト全体のナビゲーションや著作権情報、サイドバーなどの補助的なコンテンツは、mainタグの外に配置することが推奨されます。
このタグは、各HTMLドキュメント内で原則として1つだけ使用することが推奨されており、ページの構造を明確にする役割を担います。mainタグを使用することで、スクリーンリーダーなどの支援技術がページの主要な部分を迅速に識別できるようになり、ウェブサイトのアクセシビリティが向上します。
また、mainタグは、<article>、<aside>、<footer>、<header>、<nav>といった特定の要素の子孫として配置することはできません。これは、これらの要素がすでに特定の役割を持つため、その中にページの主要コンテンツを置くのは適切ではない、という意味合いです。mainタグはHTML要素であり、引数や戻り値を持つ一般的なプログラミング言語の関数とは異なり、特定の引数を取ったり値を返したりすることはありません。
mainタグは、ウェブページの主要なコンテンツ部分を定義します。各ドキュメントにはmainタグを1つだけ配置することが推奨されます。サイトのヘッダー、フッター、ナビゲーションなどの補助的なコンテンツは、このタグの外に配置してください。特に注意すべきは、main要素がarticle、aside、footer、header、navの子孫要素になってはいけない点です。適切に使用することで、ページの構造が明確になり、スクリーンリーダーなどの支援技術によるアクセシビリティが向上します。
HTML main要素で主要コンテンツを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML main要素の利用例</title> 7</head> 8<body> 9 <header> 10 <!-- ウェブサイト全体のヘッダーやナビゲーションはmain要素の外に配置されます --> 11 <h1>私のウェブサイト</h1> 12 <nav> 13 <ul> 14 <li><a href="#">ホーム</a></li> 15 <li><a href="#">ブログ</a></li> 16 <li><a href="#">お問い合わせ</a></li> 17 </ul> 18 </nav> 19 </header> 20 21 <!-- 22 main要素は、ウェブページの主要なコンテンツを定義します。 23 各ドキュメントには通常、1つのmain要素のみを含めることが推奨されます。 24 この中に、ナビゲーション、サイドバー、フッターなどの補助的なコンテンツは含めません。 25 --> 26 <main> 27 <h2>このページの主要なタイトル</h2> 28 <p> 29 ここは、このウェブページの主要な情報や機能を提供するセクションです。 30 ユーザーがこのページを訪れた目的の中心となるコンテンツがここに含まれます。 31 </p> 32 <section> 33 <h3>主要コンテンツのサブセクション</h3> 34 <p> 35 例えば、ブログ記事の本文、製品情報、サービスの紹介などがここに入ります。 36 </p> 37 </section> 38 <article> 39 <h3>最新のニュース</h3> 40 <p> 41 ここに重要な更新情報やニュース記事の抜粋を掲載します。 42 </p> 43 </article> 44 </main> 45 46 <aside> 47 <!-- 補足情報やサイドバーコンテンツはmain要素の外に配置されます --> 48 <h3>関連情報</h3> 49 <ul> 50 <li><a href="#">別の関連記事</a></li> 51 <li><a href="#">人気のある投稿</a></li> 52 </ul> 53 </aside> 54 55 <footer> 56 <!-- 著作権情報やサイトマップ、連絡先などはmain要素の外に配置されます --> 57 <p>© 2023 私のウェブサイト</p> 58 </footer> 59</body> 60</html>
HTMLのmain要素は、ウェブページにおける主要なコンテンツ領域を定義するために使用されます。これは、そのドキュメントで最も重要で中心となる情報や機能を示すセクションであり、ユーザーがそのページを訪れる目的となるコンテンツが含まれます。ブラウザや検索エンジン、スクリーンリーダーなどの支援技術に対して、ページの核となる部分を明確に伝える役割を持ちます。
この要素は、通常、各HTMLドキュメントにつき1つだけ含めることが推奨されています。ヘッダー、フッター、ナビゲーション、サイドバー、著作権情報などの補助的なコンテンツはmain要素の外に配置する必要があります。
サンプルコードでは、header要素でウェブサイト全体のヘッダーやナビゲーションを、aside要素で関連情報を、footer要素で著作権情報を定義していますが、これらはすべてmain要素の外に配置されています。一方、main要素の中には「このページの主要なタイトル」や、その詳細な説明、サブセクション、最新ニュースといった、そのページでユーザーに最も伝えたい核となるコンテンツが記述されています。
main要素は、他のHTML要素と同様に、特定の引数を取ることはありません。また、プログラムにおける関数のように特定の戻り値を生成するものではなく、HTMLドキュメントの構造と意味を定義する役割を担っています。このようにmain要素を適切に利用することで、ページの構造が論理的になり、アクセシビリティや検索エンジン最適化（SEO）にも良い影響を与えます。
main要素は、ウェブページの主要なコンテンツを定義するために使用します。サンプルコードのように、サイト全体のヘッダー、ナビゲーション、サイドバー、フッターといった補助的なコンテンツは含めないでください。これらはmain要素の外側に配置することが正しい利用方法です。また、一つのHTMLドキュメント内には、原則としてmain要素を一つだけ配置することが強く推奨されます。これにより、スクリーンリーダーなどの支援技術がページの主要部分を正確に識別しやすくなり、アクセシビリティの向上に繋がります。ユーザーがそのページを訪れる主目的となる情報や機能がここに含まれるべき内容です。