<main>〜</main>
main(メイン)要素は文書内の主要なセクションを表します。主要なセクションは、Webサイト内の各ページで繰り返し使用されるヘッダー、ナビゲーション、検索フォームやフッター情報を除いた、その文章内で主な内容となる部分を指します。
hidden 属性が指定されない限り、ひとつの文書内で複数の main 要素を使用することはできない。
main要素 | 説明 |
---|---|
カテゴリー | ・パルバブルコンテンツ ・フローコンテンツ |
コンテンツモデル | フローコンテンツ |
使用できる場所 | フローコンテンツが期待される場所 *ただし、祖先要素として、html、body、div の各要素、アクセス可能な名前(例として aria-labelledby、aria-label、または title 属性による付与)がない form 要素、およびカスタム要素のみ許容される |
main要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
記事セクション主要なコンテンツとして表す
使用例
<body>
<header>
<h1>旅の本来の目的</h1>
<p>福島県石川郡石川町にある親戚の家探し。</p>
</header>
<main role="main">
<article>
<h1>とある場所で調べてもらい、小学生の頃と高校生の頃の記憶を辿りながら親戚の家を探す。</h1>
<p><time datetime="2024-08-17+9:00">2024年08月17日</time>親戚の家を見つけることができた!。</p>
<p>小学生の頃の記憶が蘇ってきました。2回目に行ったのは、高校3年生の時だった思う。友人を待たせていたので、訪問はしないで帰りました。次の観光地へ・・・。</p>
</article>
</main>
<footer>文章のフッター</footer>
</body>
表示
旅の本来の目的
福島県石川郡石川町にある親戚の家探しが目的である。
とある場所で調べてもらい、小学生の頃と高校生の頃の記憶を辿りながら親戚の家を探す。
親戚の家を見つけることができた!。
小学生の頃の記憶が蘇ってきました。2回目に行ったのは、高校3年生の時だった思う。友人を待たせていたので、訪問はしないで帰りました。次の観光地へ・・・。