アジェンダ
この記事では、HTMLのarticleタグ、sectionタグ、asideタグを用いてアウトライン（階層構造）を整える方法についてまとめます。
タグの使い分け
article
articleタグは、ブログなどの記事のページではその記事全体を囲みます。また、一覧ページでは個別の記事一つ一つを囲う要素として使用されます。
section
sectionタグは、アウトラインの構造を明示的に表現することができるタグです。これは、ドキュメント内の特定のセクションが自立したセクションとして意味を持つ場合に利用します。
※似たようなものにdivタグがありますが、divタグはsectionタグとは違いアウトラインの構造を明示的に表現したりはしない抽象化されたタグで、区切りを表す時に使います。
aside
asideタグは余談や補足情報を表すためのタグです。記事の本文には関連しているものの、主要な内容からは外れる情報に使用されます。例えば、サイドバーや広告バナーの表示に便利です。
実際のコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>タイトル</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>タイトル</h1>
<p>記事の説明文</p>
<section>
<h2>記事の見出し</h2>
<p>記事本文</p>
</section>
<section>
<h2>SNS</h2>
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">x</a></li>
</ul>
</section>
<section>
<h2>関連記事</h2>
<ul>
<li><a href="#">記事リンク1</a></li>
<li><a href="#">記事リンク2</a></li>
<li><a href="#">記事リンク3</a></li>
</ul>
</section>
<aside>
<h3>補足情報</h3>
<p>この記事に関連する追加情報</p>
</aside>
</article>
</main>
<footer>
<p>© 2024 タイトル</p>
<ul>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">利用規約</a></li>
</ul>
</footer>
</body>
</html>
解説
- articleタグは記事全体を囲い、独立したコンテンツブロックとして機能します。
- sectionタグはそれぞれのセクションが独立したコンテンツを形成していることを示し、見出しタグを使って明確に区分します。
-
asideタグは記事の本文と直接関連しないが、読者に有益な情報を提供するための余談や補足情報に適しています。
※ asideタグ内のheadingタグがh2ではなく、h3タグが使用している理由としては、articleタグ内の主要なセクションにh2タグを使用しています。asideタグにはそれに関連しつつも主題からは少し離れた補足情報が含まれるため、h3タグでマークアップすることで、h2タグで示された主要なセクションの下位に位置する補足的な内容であることを示しています。