ブロサイ
2023.06.07

【HTML5】HTML4と意味が大きく変わったタグに注意

今回は、HTML5で登場したタグ、今までの使い方と意味が変わったタグの中で、よく間違えるものや使う場面が分かりづらいhtmlタグを紹介します。

HTML4と意味が大きく変わったタグに注意

コーディング
コーディングを行う中で、div、section、見出し(h)タグ、p、span、ul、liなどのタグについては利用する場面も多く、意味を理解している方が多いと思います。※他にもよく使うタグはたくさんありますが、紹介を省きます。
しかし、いくつかのタグは特定の場面にしか利用しないため、他のタグで代用してしまっている、意味をあまり分かっていないという方も多いと思います。そんなタグの中でも、HTML4の時とは使う場面が変わってしまい注意が必要なタグの紹介をします。

navタグ

navタグはナビゲーション(メインメニューなど)、グローバルメニューを表示させるときに設定するタグになります。
サイト内で重要なナビゲーションを示す際は、メニューの最上層タグをnavタグで囲います。下記に当てはまる場合はnavタグを使用するようにしましょう。

・ヘッダーメニューとフッターメニューがある場合
ヘッダーメニューに設定
・ヘッダーメニュー、フッターメニュー、コンテンツ間のメニューがある場合
ヘッダーメニューに設定※もっとも重要なメニューに設定

使い方は、下記のように設定すれば問題ありません。

<div class="menu">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>

さらに詳しく知りたい方は、下記記事にて詳細の説明をしております。

[inter id=’1071′]

smallタグ

smallタグはHTML5より前までは、文章などを小さくしたい場合に使用しましたが、HTML5以降は注釈や著作権/コピーライトの記述に設定するようになりました。名前がsmallなのでなかなか覚えづらいですが、フッターのコピーライトなどでpタグなどを使っている場合は、下記のような記述に修正しておきましょう。※smallタグをdiv等で囲むのは問題ありません。

<small>copyright burosai All rights Reserved.</small>

addressタグ

addressタグは、住所などを記述する場合に囲むようなイメージがありますが、実際は問い合わせ先の電話、メールアドレス、フォームリンクなどを囲って使います。
文章の中にメールアドレスなどを含む場合は、その文章全体をaddressタグで囲ってしまって問題ありません。

まとめ

html4の時代からコーディングに携わっていると、タグの意味が変わったことで分かりづらいものがいくつもありますが、サイトの評価に影響を与えるものもありますので、気を付けましょう。

関連する記事