HTML5

2021.03.12

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

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

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

mainタグ

mainタグとは

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

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

<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対策にもなります。
新しいタグをご紹介している記事は他にもありますので、ぜひご活用ください!

関連記事はこちら

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!