HTML5 <main>
<main>タグは、ページの中心的な情報、つまり、ユーザーがそのページにアクセスしたときに「最も注目するであろう部分をマークアップする」ために使用されます。
また、このタグはWebのアクセシビリティを向上させ、SEO（検索エンジン最適化）にも寄与する大変重要な役割を果たします。
mainタグは、HTML5で導入されたセマンティックな要素であり、ページの主要なコンテンツを表します。
主要なコンテンツとは、そのページのユニークな内容、つまり、ヘッダーやフッター、ナビゲーション、サイドバーなどの共有コンテンツではなく、そのページ特有の情報を指します。
基本的な考え方として、理想的には各ページにはmain要素を１つだけ含ませる形とします。これにより、スクリーンリーダーや検索エンジンなどは、ページの主要なコンテンツを容易に特定することが可能になります。
■HTML4.01からHTML5へのバージョンアップによる変更点
figure要素は、HTML5から新たに追加された要素です。
■使用例1
HTMLソース
<!-- mainタグの開始 -->
<main>
<!-- ページの主要なコンテンツ -->
<h1>ここがあなたのウェブページの主要な見出しです</h1>
<p>ここにはウェブページの主要な内容、記事や情報が記述されます。</p>
</main>
<!-- mainタグの終了 -->
<!-- mainタグの開始 -->
<main>
<!-- ページの主要なコンテンツ -->
<h1>ここがあなたのウェブページの主要な見出しです</h1>
<p>ここにはウェブページの主要な内容、記事や情報が記述されます。</p>
</main>
<!-- mainタグの終了 -->
↑の例では、h1要素とp要素がmainタグによって包含。この部分がページの主要なコンテンツを構成し、この内容がそのページの特有の情報となります。
↓↓↓
■使用例2 （説明追加）
<!-- ヘッダー部分 -->
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
</header>
<!-- mainタグの開始 -->
<main>
<!-- ページの主要なコンテンツ -->
<h1>記事の見出し</h1>
<p>記事の本文...</p>
</main>
<!-- mainタグの終了 -->
<!-- フッター部分 -->
<footer>
<!-- フッター情報 -->
</footer>
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
</header>
<!-- mainタグの開始 -->
<main>
<!-- ページの主要なコンテンツ -->
<h1>記事の見出し</h1>
<p>記事の本文...</p>
</main>
<!-- mainタグの終了 -->
<!-- フッター部分 -->
<footer>
<!-- フッター情報 -->
</footer>
mainタグは通常、ヘッダーやナビゲーション、フッターなどの共有コンテンツの間に配置されます。
