はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
3つのタグの使い分け
<article>
- これだけで完結するページのメインとなる独立したコンテンツ（例：ブログ投稿全体）
<section>
-
<article>の中の関連する内容の集り（例：記事の各章）
<aside>
- メインコンテンツに対する捕捉情報（例：関連記事リスト）
- 具体的な使用例
- 関連記事一覧
- 筆者のプロフィール
- 広告
- 用語の解説
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FE1000Outputs 0002</title>
</head>
<body>
<header>
<h1>
<a href="/">
<img src="img/logo.png" alt="FE1000Outputs">
</a>
</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>ブログ記事タイトル</h1>
<section>
<h2>はじめに</h2>
<p>はじめにの内容</p>
</section>
<section>
<h2>本題</h2>
<p>本題の内容</p>
</section>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
<li><a href="#">関連記事3</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>Copyright 2025</p>
<p>FE1000Outputs</p>
</footer>
</body>
</html>
Geminiによるコメント
今回のコードは100点満点ですが、<aside> の置き場所について、もう一つのパターンも知っておくと役立ちます。
<aside> を <article> の外に置くパターン
今回のコードのように <aside> を <article> の中に入れるのは、その補足情報が記事自体に強く関連している場合（例：記事で使われている専門用語の解説、今回の「関連記事」など）に非常に有効です。
一方で、その補足情報がサイト全体に関連している場合（例：ブログ全体の人気記事ランキング、広告、筆者のプロフィールなど）は、<article> の外（<main> の直下）に置くことも多いです。
<main>
<article>
</article>
<aside>
</aside>
</main>
どちらが正解というわけではなく、「この補足情報は、この記事だけのものか？サイト全体に関わるものか？」と考えて配置を決めるのがポイントです。