【HTML5】新しい追加タグmain/aside/navタグとは？

コーディング

以前、HTML5で新しく追加されたセクション要素のタグの中からsectionタグとarticleタグの違いについてご紹介いたしました。

【HTML5】新しい追加タグmain/aside/navタグとは？

今回はこちらの記事でご紹介しなかったmain/aside/navタグについてご紹介していきたいと思います！

mainタグ

mainタグとは

mainタグとは主要なコンテンツを表す際に使用します。
主要なコンテンツとはヘッダーやフッター、検索フォームといった、他のページにも共通するパーツではなく、ページの中でメインで伝えたい要素を指します。

header、footerと同じく、1ページ内で1回だけ使用することができます。
一般的なページではheader→main→footerの順番で置かれています。

<body>
	<header>ヘッダー</header>
	<main>
		<h1>花粉症とは？</h1>
		<div>花粉症とは、スギやヒノキなどの植物の花粉が原因となって、くしゃみ・鼻水などのアレルギー症状を起こす病気です。</div>
	</main>
	<footer>フッター</footer>
</body>

囲むことができないタグ

主要なコンテンツを表すことから、下記のタグは性質上mainタグの中に入れることはできません。

header
footer
nav
article
aside

使用する時の注意点

IEではmainタグはinline要素として扱われてしまっているため、display:blockを記述する必要があります。
また、その他ブラウザでもバージョンによっては読み込まれないため、role属性でrole="main"を指定する必要があります。

<body>
	<header>ヘッダー</header>
	<!-- role属性を追加 -->
	<main role="main">
		<h1>花粉症とは？</h1>
		<div>花粉症とは、スギやヒノキなどの植物の花粉が原因となって、くしゃみ・鼻水などのアレルギー症状を起こす病気です。</div>
	</main>
	<footer>フッター</footer>
</body>

asideタグとは

asideタグはコンテンツの説明や補足、広告といった、メインコンテンツとは別に書いておきたい内容を記述する場合に使用します。
メインコンテンツをわかりやすくするために使用するもののため、装飾やなくなってしまっても問題ない内容に使用することはできません。

使用する時の注意点

mainタグと違い、1ページ内での使用制限などはなく、複数回使用しても問題ありません。
しかし、asideタグもIEではmainタグ同様、display:blockを記述する必要があります。

<!-- 【例1】サイドメニューのコンテンツ -->
<aside>
  <nav>
    <p>カテゴリー一覧</p>
    <ul>
      <li><a href="/news/">新着情報</a></li>
      <li><a href="/other/">その他</a></li>
    </ul>
  </nav>
  <p>このサイトの紹介文が入ります</p>
</aside>

<!-- 【例2】補足的なコンテンツ -->
<main>
    <h1>きつねうどんの作り方</h1>
    <section>
        <h2>材料</h2>
        <ul>
            <li>油揚げ</li>
            <li>だし汁</li>
            <li>醤油</li>
            <li>砂糖</li>
            <li>うどん</li>
            <li>うどんつゆ</li>
            <li>ねぎ</li>
        </ul>
    </section>
</main>
<aside>
    <h3>うどん豆知識</h3>
    <p>うどんのルーツは奈良時代に中国から伝来した「こんとん」を起源としているらしいです！</p>
</aside>

navタグとは

navタグとはナビゲーションであることを表すために使用します。
ナビゲーションとはグローバルナビゲーションやページ内リンク、他ページへのリンクをまとめた部分などを指します。

navタグは使用回数に制限がないため複数使用することは問題ありませんが、footerに入れるナビゲーションや、主要ではない簡単なものには使用する必要はありません。
使用しすぎてしまうと使いにくいページになってしまうため、必要な回数のみ使用することをおすすめします。

<nav>
    <ul>
        <li><a href="/news/">新着情報</a></li>
        <li><a href="/shop/">店舗一覧</a></li>
        <li><a href="/about/">店舗紹介</a></li>
        <li><a href="/access/">アクセス情報</a></li>
    </ul>
</nav>

HTML5で新たに追加されたタグの意味をきちんと理解し、使用することでSEO対策にもなります。
新しいタグをご紹介している記事は他にもありますので、ぜひご活用ください！