忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[159] [158] [157] [156] [155] [154] [153] [152] [151] [150] [149

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

数ヶ月ぶりになってしまいました・・・。
(と、毎回書いている気が)

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

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

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


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

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

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

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


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

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


↓そうでない場合

2.それは、それ自身単独で意味をなすものですか?

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


↓そうでない場合

3.それは、コンテンツを理解するために必須のものですか?

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


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

4.それは、付録に移動することができますか?(直訳)

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


↓そうではない場合

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

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


↓そうではない場合

6.それは何らかの『意味』をもつか?

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

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


だそうです。

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


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

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


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

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
09« 2017/10 »11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
ブログ内検索
忍者ブログ [PR]