「HTML5」 nav、article、section、aside各要素の使い方

HTML5がW3Cで勧告されたのが2014年10月28日。それ以来、現在進行形でHTML5の普及が進んでいると思われます。

また、GoogleがChromeでFlashに代わりHTML5を2016年内までにデフォルトにするというニュースが今月発表されたばかりです。今が切り替え時なんですね。

今回はHTML5で追加された要素nav、article、section、asideについてご紹介したいと思います。

photo by slavik_V

▼この記事の目次

1. nav要素
2. article要素
3. section要素
4. aside要素
5. この記事のまとめ

nav要素

<nav> ～ </nav>

グローバルメニューに用いるタグです。<div>から変わりこのようになりました。

article要素

<article> ～ </article>

article要素はWEBページの中で独立したコンテンツとして成立しているものを指します。ブログでいったらトップページの記事一覧やサイドバーの新着記事です。

記事だけでなくコメントや掲示板にも使用できます。関連性のあるコンテンツなら入れ子にもできます。

section要素

<section> ～ </section>

section要素はnav、article、asideの要素が用途として当てはまらない時に使います。sectionという英単語は切り離す、区別といった意味があります。
これらnav、article、asideの要素に比べわりと漠然した定義なので用途がわかりにくいタグなのかもしれません。
調べると<h1> ～ <h6> と絡めて使うとありますが、<h2>や<h3>に加えて使用する意味はどこなのかと考えてしまいます。

実際にいくつかのコードを確認してみても<h1> ～ <h6>に絡めて使用している例は見当たらなかったです。これって<h1> ～ <h6> と絡めて使うけど必須ではないという事みたいです。

広告領域などに使用している例は見ましたが、なんだか曖昧過ぎてよくわからなくなってきました。今の所必要なさそうなので”必要な時に使う”リストに入れておきましょう。

aside要素

<aside> ～ </aside>

aside要素は前後のコンテンツと関連を持っていながらも、それとは切り離される補足的な情報に用います。

↓例えばこのような場合です

AアプリはA社が提供しているアプリです。20**年11月に提供が開始されました。
(▼ここにaside要素)

【A社とは】

A社は19**年創業の米国に本社を持つ会社だ。日本でも展開している。
このようにちょっとした用語解説なんかも含まれます。またaside要素は、記事内だけでなく広告やサイドバーなんかにも使用する事もできます。

この記事のまとめ

nav、article、section、aside、これらの要素に当てはまらない場合はdivを使います。以上、野々村のすけ (@nosuke_sns) でした！