当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【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<main>
5<article>
6<h2>記事見出し1</h2>
7<p>ここにテキストが入ります。</p>
8<p>ここにテキストが入ります。</p>
9</article>
10<article>
11<h2>記事見出し2</h2>
12<p>ここにテキストが入ります。</p>
13<p>ここにテキストが入ります。</p>
14</article>
15</main>
16<footer>
17<p>ページフッター部分</p>
18</footer>

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

HTML articleタグの使い方
プロフィール用アイコン
みきてぃ東西線

赤い枠線で囲んだ部分が、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<main>
5<section>
6<h2>見出し1</h2>
7<p>ここにテキストが入ります。</p>
8<p>ここにテキストが入ります。</p>
9</section>
10<section>
11<h2>見出し2</h2>
12<p>ここにテキストが入ります。</p>
13<p>ここにテキストが入ります。</p>
14</section>
15</main>
16<footer>
17<p>ページフッター部分</p>
18</footer>

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

HTML sectionタグの使い方
プロフィール用アイコン
みきてぃ東西線

赤い枠線で囲んだ部分が、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<main>
5<section>
6<h2>見出し1</h2>
7<p>ここにテキストが入ります。</p>
8<p>ここにテキストが入ります。</p>
9</section>
10<section>
11<h2>見出し2</h2>
12<p>ここにテキストが入ります。</p>
13<p>ここにテキストが入ります。</p>
14<aside>
15<h3>補足見出し</h3>
16<p>ここにテキストが入ります。</p>
17<p>ここにテキストが入ります。</p>
18<p>ここにテキストが入ります。</p>
19</aside>
20</section>
21</main>
22<footer>
23<p>ページフッター部分</p>
24</footer>

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

HTML asideタグの使い方
プロフィール用アイコン
みきてぃ東西線

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

まとめ

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

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

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

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

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました