2023.05.15

【HTML】article/section/aside各タグの使い方

みきてぃ

articleタグやsectionタグ、asideタグの使い方が分からない・・・。

それぞれの違いは何なのか教えて！

今回は「article/section/asideの各タグ」について、それぞれ分かりやすく解説していきます。

この記事の目次

各タグの概要・使い方
まとめ

各タグの概要・使い方

みきてぃ

まず、article/section/asideの各タグそれぞれの意味は以下の通りだよ！

htmlタグ	概要
articleタグ	記事コンテンツを示すタグ。
sectionタグ	基本的な文章セクションであることを示すタグ。
asideタグ	文章の補足であることを示すタグ。

articleタグ

articleタグとは、ブログやニュースサイトなどの記事コンテンツであることを示すタグです。

1<article>
2<h2>記事見出し1</h2>
3<p>ここにテキストが入ります。</p>
4<p>ここにテキストが入ります。</p>
5</article>

サンプルコード

1<header>
2<h1>サンプルサイト</h1>
3</header>
4
5<main>
6
7<article><!--article要素の開始タグ-->
8<h2>記事見出し1</h2>
9<p>ここにテキストが入ります。</p>
10<p>ここにテキストが入ります。</p>
11</article><!--article要素の終了タグ-->
12
13<article><!--article要素の開始タグ-->
14<h2>記事見出し2</h2>
15<p>ここにテキストが入ります。</p>
16<p>ここにテキストが入ります。</p>
17</article><!--article要素の終了タグ-->
18
19</main>
20
21<footer>
22<p>ページフッター部分</p>
23</footer>

▼ブラウザでは、以下のように表示されます。

みきてぃ

赤い枠線で囲んだ部分が、articleタグで囲まれたコンテンツだよ！

sectionタグ

sectionタグとは、その名の通り文章のセクションの1つであることを示すタグです。

記事コンテンツなどで使われるarticleタグとは異なり、記事以外の汎用的な文章セクションとして使われます。

1<section>
2<h2>見出し1</h2>
3<p>ここにテキストが入ります。</p>
4<p>ここにテキストが入ります。</p>
5</section>

サンプルコード

1<header>
2<h1>サンプルサイト</h1>
3</header>
4
5<main>
6
7<section><!--section要素の開始タグ-->
8<h2>見出し1</h2>
9<p>ここにテキストが入ります。</p>
10<p>ここにテキストが入ります。</p>
11</section><!--section要素の終了タグ-->
12
13<section><!--section要素の開始タグ-->
14<h2>見出し2</h2>
15<p>ここにテキストが入ります。</p>
16<p>ここにテキストが入ります。</p>
17</section><!--section要素の終了タグ-->
18
19</main>
20
21<footer>
22<p>ページフッター部分</p>
23</footer>

▼ブラウザでは、以下のように表示されます。

みきてぃ

赤い枠線で囲んだ部分が、sectionタグで囲まれたコンテンツだよ！

asideタグ

asideタグとは、文章内の補足や余談であることを示すタグです。

articleタグやsectionタグとは異なり、記事本文の補足や参考文献・出典を示すために、このタグが使われることが多いです。

1<aside>
2<h3>補足見出し</h3>
3<p>ここにテキストが入ります。</p>
4<p>ここにテキストが入ります。</p>
5<p>ここにテキストが入ります。</p>
6</aside>

サンプルコード

1<header>
2<h1>サンプルサイト</h1>
3</header>
4
5<main>
6
7<section>
8<h2>見出し1</h2>
9<p>ここにテキストが入ります。</p>
10<p>ここにテキストが入ります。</p>
11</section>
12
13<section>
14<h2>見出し2</h2>
15<p>ここにテキストが入ります。</p>
16<p>ここにテキストが入ります。</p>
17
18<aside><!--aside要素の開始タグ-->
19<h3>補足見出し</h3>
20<p>ここにテキストが入ります。</p>
21<p>ここにテキストが入ります。</p>
22<p>ここにテキストが入ります。</p>
23</aside><!--aside要素の終了タグ-->
24
25</section>
26
27</main>
28
29<footer>
30<p>ページフッター部分</p>
31</footer>

▼ブラウザでは、以下のように表示されます。

みきてぃ

赤い枠線で囲んだ部分が、asideタグで囲まれた補足内容だよ！

まとめ

というわけで今回は「article/section/asideの各タグ」について解説しました。

最後にもう一度、「article/section/aside」の各タグについて簡潔にまとめます。

htmlタグ	概要
articleタグ	記事コンテンツを示すタグ。
sectionタグ	基本的な文章セクションであることを示すタグ。
asideタグ	文章の補足であることを示すタグ。

一見分かりづらいと思いますが、どちらも同じセクションを扱うタグですので、文章の内容に応じて適切に使い分ければよいと思います。