【HTML/CSS】section・navタグの設定方法・注意点

コーディングを行う中で、いくつかのタグはある一定の条件下のみ使用することができます。今回は、そのようなタグの中でもよく使われる、「section」「nav」タグについて紹介します。

section・navタグの設定方法・注意点

今回のsection・navタグはよく使われるので自身で記述したり参考サイトで見かけることがよくあると思います。ただ、よく使われる分、正しい記述がされていない状態で使われている場合もよくあります。それぞれのタグは使用する上での記述条件・方法をよく理解してから記述するようにしましょう。それでは順番に説明していきます。

sectionタグ

<section></section>

sectionタグはHTML5から登場したタグで、章やコンテンツなどのまとまりを示すときに使用します。

ですので、コンテンツを包括するタグとして使用しましょう。divタグとは違い意味を持ったタグになるので、他の目的では使用を控えるようにしてください。
また、sectionタグを使用する場合、中にh1～h6の見出しタグを使用することが推奨されているので、sectionタグを使用するときはなるべく見出しを子要素として設定するようにしましょう。見出しがない場合は、sectionタグを使用せずdivタグなどで代用すると良いと思います。

navタグ

<nav>
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
</nav>

navタグはメインメニューなどの主要メニュー・ナビゲーションに使用します。ほとんどのサイトはヘッダーメニューがこれに当たると思います。フッターがメインの場合はfooterタグ内に設置しても問題ありませんが、これもsectionタグと同じく意味を持ったタグの一つですので、主要メニュー・ナビゲーション以外には使用しないようにしましょう。
また、レスポンシブデザインでサイトを構築する場合は、headerメニューはPCとスマホで共通の記述にした方が良いです。※CSSで見た目を変える。