【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)
戻り値なし
戻り値はありません