【グループ化】グループ化に使われる7つのタグを解説！

どうも！ニシドラ(@nishidorablog)です。

ニシドラ

この記事では、HTMLでグループ化に使われる7つのタグについて解説します。

解説するのは以下の7つのタグです。

「headerタグ」
「footerタグ」
「navタグ」

「mainタグ」
「articleタグ」

「sectionタグ」
「asideタグ」

それぞれ、使い方に違いはありませんが用途が違います。
用途に沿った使い方ができるように、それぞれのタグについて解説しています。

【HTML初心者向け】まとめ記事一覧

前回の、ブロック要素とインライン要素については、【divタグとspanタグ】ブロック要素とインライン要素について解説！でまとめています。

HTMLで使うブロック要素
sectionタグとdivタグの使い分け
まとめ

HTMLで使うブロック要素

headerタグ

「headerタグ」は上画像の四角部分を構築するブロック要素です。

headerタグに含まれるものとして、「ページのタイトル」や「サイトのロゴ」「ナビゲーションメニュー」「ハンバーガーメニュー」などがあります。

ハンバーガーメニュー：サイトのメニューが収納されている(画像の3本線)。

<header>
<h1>ページのタイトル</h1>
<p>ページの説明文・概要など</p>
</header>

使い方として上記のコードの通り、headerタグに含めたいタグを書きます。

navタグ

「navタグ」は上画像の四角部分を構築するブロック要素です。

navタグはナビゲーションメニューを作るタグです。
ナビゲーションメニューとは、下画像の赤く囲っている部分のことを指します。

使い方として下記のコードのようになります。

<header>
<h1>ページのタイトル</h1>
<nav>
<ul>
<li><a href=”URL”>メニュー1</a></li>
<li><a href=”URL”>メニュー2</a></li>
<li><a href=”URL”>メニュー3</a></li>
</ul>
</nav>
</header>

navタグはheaderタグの中に書くことが多く、基本的にはメインとなるメニューを作るときに使います。

ulタグで作ったリストにURL(もしくはファイル)を指定することで、利用者が見たいページを表示させることができます。

footerタグ

「footerタグ」は上画像の四角部分(黄色部分)を構築するブロック要素です。

footerタグは、ページの下部にある部分を囲むタグで「問い合わせページ」や「プライバシーポリシー」「コピーライト」「サイト情報」「SNS関連」など様々なことを書きます。

使い方として下記のコードのようになります。
footerタグの中に表示させたい要素を書きます。

<footer>
<ul>
<li><a href=”URL”>問い合わせ</a></li>
<li><a href=”URL”>プライバシーポリシー</a></li>
<li><a href=”URL”>サイト概要欄</a></li>
</ul>
<p><small>© 2019 ○○サイト</small></p>
</footer>

コピーライトとは著作権のことを指します。
上記のコードでは「smallタグ」で書かれている部分を指します。

mainタグ

「mainタグ」は上画像の大きな四角の部分を構築するブロック要素です。

mainタグはそのページのメインコンテンツを作るタグです。
後述するarticleタグの要素とsectionタグの要素を囲って使います。

書き方は下記のコードのようになります。

<main>
<article>
<h2>記事のタイトル</h2>
<p>本文</p>
</article>
<section>
<h2>関連記事</h2>
<ul>
<li><a href=”URL”>関連記事1</a></li>
<li><a href=”URL”>関連記事2</a></li>
</ul>
</section>
</main>