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

この記事では、HTMLでグループ化に使われる7つのタグについて解説します。
解説するのは以下の7つのタグです。
- 「headerタグ」
- 「footerタグ」
- 「navタグ」
- 「mainタグ」
- 「articleタグ」
- 「sectionタグ」
- 「asideタグ」
それぞれ、使い方に違いはありませんが用途が違います。
用途に沿った使い方ができるように、それぞれのタグについて解説しています。
前回の、ブロック要素とインライン要素については、【divタグとspanタグ】ブロック要素とインライン要素について解説!でまとめています。
HTMLで使うブロック要素
headerタグ
「headerタグ」は上画像の四角部分を構築するブロック要素です。
headerタグに含まれるものとして、「ページのタイトル」や「サイトのロゴ」「ナビゲーションメニュー」「ハンバーガーメニュー」などがあります。
<h1>ページのタイトル</h1>
<p>ページの説明文・概要など</p>
</header>
使い方として上記のコードの通り、headerタグに含めたいタグを書きます。
navタグ
「navタグ」は上画像の四角部分を構築するブロック要素です。
navタグはナビゲーションメニューを作るタグです。
ナビゲーションメニューとは、下画像の赤く囲っている部分のことを指します。
使い方として下記のコードのようになります。
<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タグの中に表示させたい要素を書きます。
<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>
mainタグ
「mainタグ」は上画像の大きな四角の部分を構築するブロック要素です。
mainタグはそのページのメインコンテンツを作るタグです。
後述するarticleタグの要素とsectionタグの要素を囲って使います。
書き方は下記のコードのようになります。
<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>
articleタグ
「articleタグ」は上画像の四角部分を構築するブロック要素です。
articleタグの「article」は英語で「記事や論文」というような意味があります。
英語の通り、ページ内の記事となる部分を構築するためのタグです。
<h2>記事のタイトル</h2>
<img src=”sample.jpg” alt=”非表示の場合に表示する分章”>
<p>本文</p>
</article>
sectionタグ
「sectionタグ」は上画像の四角部分を構築するブロック要素です。
sectionタグはnavタグやmainタグのように特別どこにどう使うという決まりがありません。
そのため、関連記事の一覧を作っても良いし「グーグルマップやYouTubeのリンクをページ内に載せたいからとりあえずsectionタグで囲う」というような使い方になります。
具体的な意味はないがブロック要素として扱いたい場合に使います。
<h3>Youtube</h3>
<iframe width=”560″ height=”315″ src=”~YouTubeのソースコード~></iframe>
</section>
asideタグ
「asideタグ」は上画像の四角部分を構築するブロック要素です。
asideタグはサイドバーやメインとなるコンテンツ以外を作るときに使います。
<h3>サイドバーコンテンツ</h3>
<p>コンテンツの説明文</p>
</aside>
sectionタグとdivタグの使い分け
sectionタグとdivタグはどちらも特定の意味を持つタグではありませんが、使い方が違います。
sectionタグは「具体的な意味はないがブロックとして扱いたい」というようなときに使うと先述し、divタグは「とりあえずまとめたいとき」に使うと前回の記事で解説しました。
どういう違いがあるかというと、「要素に意味があるか」の違いです。

sectionタグには特定の意味がある要素に使い、divタグは特定の意味のない要素に使いましょう。
まとめ
今回の内容をまとめると以下のようになります。
- 使い方は変わらないが、用途が違う
- headerタグはサイト上部を作るタグ
- navタグはメインのメニューに使うタグ
- footerタグはサイト下部を作るタグ
- mainタグはarticleタグとsectionタグを囲うことが多く、記事や関連するものを作るタグ
- asideタグはメインコンテンツとは関連性が低いものを作るときに使うタグ(サイドバーなど)
この記事で解説したコードの例には、ID名とクラス名を付けていませんでしたが、実際に装飾するときには必ず使います。
ID名とクラス名の用途・使い方については、【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法でまとめています。
コメント