3.1 <main> タグ
HTML5は、多くの新しいセマンティック要素を導入して、開発者がより構造化され、理解しやすいウェブページを作成するのを助けるよ。<main> や <aside> などのタグは、主なコンテンツと追加のコンテンツのためのコンテナを作るために使われるんだ。
<main> タグは、ドキュメントの主要コンテンツを示すんだ。このページのユニークで重要なコンテンツを置くのに使われるよ。<main> タグ内のコンテンツは、各ページにユニークであるべきで、ロゴやサイドバー、ナビゲーションリンクやフッターのように全ページで繰り返される要素を含むべきじゃないんだ。
構文:
HTML
<main>
<!-- ページの主要な内容 -->
</main>
使用例:
HTML
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
主な特徴:
- コンテンツ:
<main>タグは、ページにユニークな主要コンテンツを含むべきだよ - 配置: ページには、
<main>タグは1つだけ置くべきだよ - アクセシビリティ:
<main>タグは、支援技術（スクリーンリーダーなど）が主要コンテンツをすばやく見つけるのを助け、ページのアクセシビリティを向上させるんだ
適用例:
- ページの主要コンテンツ
- 現在のページに関連するユニークな内容
メリット:
- セマンティックマークアップ: 検索エンジンと支援技術がページの主要コンテンツを理解するのを助けるよ
- ページの構造改善: ヘッダーやサイドバー、フッターなどの他のパーツと主要コンテンツを明確に分けることで、ページを整理しやすくなるよ
特性:
- ページにユニークなコンテンツを含むべきだよ
- 他のページで繰り返される要素（ナビゲーションパネル、サイドバー、フッターなど）を含むべきじゃないよ
3.2 <aside> タグ
<aside> タグは、主要コンテンツに関連しているけど、ドキュメントの主要な流れに属していない追加のコンテンツを示すために使われるんだ。広告や関連する記事へのリンク、著者のバイオなどのサイドバーに使われることが多いよ。
構文:
HTML
<aside>
<!-- 追加の内容 -->
</aside>
使用例:
HTML
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
主な特徴:
- コンテンツ:
<aside>タグは、主要コンテンツと関連しているけど、ドキュメントの主要な流れに属さない追加情報を含むんだよ。 - 配置: コンテキストに応じて、
<main>タグの内側や外側に配置することができるんだ。 - 適用例: サイドバー、広告ブロック、関連する記事のリンク、その他の補足情報に使われるんだ。
適用例:
- 追加情報のあるサイドバー
- 広告ブロック
- 関連リソースへのリンク
- 主要コンテンツに関連する追加資料
メリット:
- セマンティックマークアップ: 検索エンジンと支援技術が、主要コンテンツに対する補足コンテンツであることを理解するのを助けるよ
- ページの構造改善: 追加コンテンツと主要コンテンツを明確に分けて、ページをより整理しやすく、理解しやすくするんだ
特性:
- 主要コンテンツと関連しているけど、その一部ではないコンテンツを含むんだ
- サイドバー、広告ブロック、サブスクリプション、その他の追加資料に使うことができるんだ
GO TO FULL VERSION