【HTML5】navタグとは？使い方についてまとめ

navの概要

navは現在のページ内の他の部分や別ページへのナビゲーションリンクへ遷移するためのセクションを表します。ナビゲーションセクションの代表的な例はメニュー、目次、索引などです。

navのカテゴリー

コンテンツカテゴリー

コンテンツモデル

パルパブルコンテンツ（知覚可能コンテンツ）

navに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合) ただし、main要素を子孫に持つことはできません。

入れられるタグのカテゴリー・モデル

フローコンテンツ（一般的コンテンツ）
コンテンツモデルなし

navに使える属性

属性とは<nav> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

navの使い方

<nav>
<ul>
	<li><a href="/design/">TOP</a></li>
	<li><a href="/movie/">商品紹介</a></li>
	<li><a href="/html-css/">会社概要</a></li>
	<li><a href="/programing/">お問い合わせ</a></li>
</ul>
</nav>

ul {
    padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-around;
    background-color: #e60012; 
}
li {
	list-style: none;
}
li a {
    color: #fff;
    text-decoration: none;
}

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

navの使い方についてまとめ