HTML5で、使用するタグを選ぶためのフローチャート

数ヶ月ぶりになってしまいました･･･。
（と、毎回書いている気が）

最近Web制作とは別の趣味に注力してしまい、勉強がおろそかになりがちです・・・。
よく、仕事とは別の趣味を持って、週末はリフレッシュ！などということが聞かれますが、
私は向いていないみたいです･･･。

・土日に仕事が入ると、好きなことができない！と若干ストレス
・好きなことが仕事中に気になりだすと、仕事中ももやもや

このあたりの切り替えができるようになれば、もう少しうまくいくんだろうな。

ということで、前置きが長くなりましたが。

あんまり記事数は無いのですが、HTML5で検索していただいてアクセスしていただいている方が多いので、
今回は、『HTML5で、使用するタグを選ぶためのフローチャート』をご紹介します。（もう有名かもしれませんが。）

▽こちらのPDFから引用させていただきました。
Methods to Select an HTML5 Element

コンテンツについて質問に答えていくと、どのタグでマークアップすればよいのかわかる仕組みになっています。

１．それは、サイト・ページのメインのナビゲーションでしょうか？

⇒そうであれば、<nav>でマークアップ。
判断基準としては、そのサイト・ページで『ナビゲーションをスキップする』を使用するナビゲーションである。と書かれています。

↓そうでない場合

２．それは、それ自身単独で意味をなすものですか？

例）RSSフィード
⇒そうであれば、<article>でマークアップ。
ニュースの記事やブログ記事、記事へのコメント、サイドバーなど、見出しを伴うもの。とあります。

↓そうでない場合

３．それは、コンテンツを理解するために必須のものですか？

⇒そうでない場合、<aside>でマークアップ。
関連ページへのリンクや、注釈、広告など、コンテンツを読み解くのに『必須』ではない補足的なもの。

↓『コンテンツを理解するために必須のもの』の場合

４．それは、付録に移動することができますか？（直訳）

（おそらく、そのコンテンツを補足として、別添えとして、ページから移動させても問題ないか、ということかと･･･。自信は無いですが。）
⇒そうであれば、<figure>でマークアップ。
画像や図版、またはそれらのキャプション。サンプルコードなどはこれでマークアップ。
なお、ほかの要素はsectioning content（コンテンツを意味的に区切るための要素）という扱いですが、
このfigureに関しては、そうではありません。

↓そうではない場合

５．論理的に見出しを付けることができるか。

⇒そうであれば、<section>でマークアップ。
ページの章、もしくは<article>の中の章・節、など見出しを伴うものに対して、sectionを使用します。

↓そうではない場合

６．それは何らかの『意味』をもつか？

⇒そうであれば、p（段落）やblockquote（引用文）など、その『意味』にふさわしい何らかのタグでマークアップ。

⇒そうではない場合、<div>でマークアップ。
『意味』を持たないもの、CSSでデザインを実装するためのものはdivでマークアップ。
（たとえば、CSSで角丸ボックスを実装するための囲みdivなど。）

だそうです。

それにしてもこのサイト、ものすごくわかりやすく解説してありますね。
今度じっくり読んでみたいです。

なお、毎度のことで恐縮ですが、筆者は英語力がそれほど高くありません。
本家の情報が正しい情報です。

数箇所意訳している部分もあり、私の文章を読んで「間違っている！」と本家の方に抗議しないでください。
（私にはいくらでも翻訳ミスをご指摘ください。大変助かります。）

以上、HTML５使用タグフローチャートのメモでした。