2022.07.27
【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~
その他
制作
以前、HTML5で新しく追加されたセクション要素のタグの中からsection
タグとarticle
タグの違いについてご紹介いたしました。
今回はこちらの記事でご紹介しなかったmain
/aside
/nav
タグについてご紹介していきたいと思います!
目次
main
タグとは主要なコンテンツを表す際に使用します。
主要なコンテンツとはヘッダーやフッター、検索フォームといった、他のページにも共通するパーツではなく、ページの中でメインで伝えたい要素を指します。header
、footer
と同じく、1ページ内で1回だけ使用することができます。
一般的なページではheader
→main
→footer
の順番で置かれています。
<body>
<header>ヘッダー</header>
<main>
<h1>花粉症とは?</h1>
<div>花粉症とは、スギやヒノキなどの植物の花粉が原因となって、くしゃみ・鼻水などのアレルギー症状を起こす病気です。</div>
</main>
<footer>フッター</footer>
</body>
主要なコンテンツを表すことから、下記のタグは性質上main
タグの中に入れることはできません。
IEではmain
タグはinline
要素として扱われてしまっているため、display:block
を記述する必要があります。
また、その他ブラウザでもバージョンによっては読み込まれないため、role
属性でrole="main"
を指定する必要があります。
<body>
<header>ヘッダー</header>
<!-- role属性を追加 -->
<main role="main">
<h1>花粉症とは?</h1>
<div>花粉症とは、スギやヒノキなどの植物の花粉が原因となって、くしゃみ・鼻水などのアレルギー症状を起こす病気です。</div>
</main>
<footer>フッター</footer>
</body>
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
タグは使用回数に制限がないため複数使用することは問題ありませんが、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対策にもなります。
新しいタグをご紹介している記事は他にもありますので、ぜひご活用ください!
関連記事はこちら