はじめに
mainとdivについてどちらを使用しても同じ結果が得られることがつい最近になっての発見。
実際に自分でいろいろ試してみないと、このままずっと気づかずに終わっていたんだろうな。という事でmainとdivについて調べたことをまとめてみます。
mainタグ
意味と目的:
- mainタグは、HTML5で導入されたセマンティックな要素で、文書内の主要なコンテンツを囲むために使用されます。これはページ内で一番重要なコンテンツを含む部分であることを示します
- mainタグは、通常、ページ内で唯一のコンテンツ領域として使用され、ヘッダーやフッターなどのナビゲーション要素とは分離されているべきです
使用例
ページの主要なコンテンツや主要なセクションを含む場合に mainタグを使用します。これにより、スクリーンリーダーや検索エンジンがページの重要な部分を識別しやすくなります
<main class="pb-36 md:pb-48">
<%= yield %>
</main>
divタグ
意味と目的:
- divタグは、特定の意味やセマンティックな役割を持たない汎用的なコンテナ要素です。スタイリングやレイアウトの目的で使用され、特定の意味は持ちません
- ページ内のどの部分にも使用でき、特定のセマンティックな意味付けが必要ない場合に使用します
使用例:
スタイリングやレイアウトのための汎用的なコンテナとして使用します。特にセマンティックな意味が必要ない部分に使用します
<div class="pb-36 md:pb-48">
<%= yield %>
</div>
適切な選択
mainタグの利点:
- mainタグは、ページの主要なコンテンツ領域としての意味を持ち、アクセシビリティやSEOにおいて有利です
- ページ内で唯一のmainタグを使用することで、ページの構造が明確になり、スクリーンリーダーなどの支援技術がコンテンツをより効果的に理解できます
divタグの利点:
- divタグは、意味を持たないため、どんなコンテンツにも使用でき、スタイリングやレイアウトの柔軟性があります
さいごに
ちょっとしたエラーから調べてみた事。基本的なことを知らずに使用していました。これからもエラーが出るたびに調べて知識をつけていきたいと思います。
とりあえず今回は、ページの主要なコンテンツを含む場合はmainで。