まだ勉強中なり
はじめようHTML5【HTML5テンプレートファイル配布してます】修正版
このテンプレを使って作り始めれば良さそう。
(「[YOURSITE]/html5-reset-」なCSSファイルはhttp://code.google.com/p/html5resetcss/downloads/listからDLする。最新版が良ければ書き換えておく。)
HTML5入門 Webデザイナー必見!? レイアウト用の新タグとHTML 5での section 要素と article 要素の違い。を合わせてみる。
header・・・headerは、サイトのヘッダーの他にSectionなどのヘッダーにも使える
footer・・・footerは、サイトのフッターの他にSectionなどのフッターにも使える
nav・・・navはナビゲーションを表す。主にメニューで使う(ナヴィゲータリンクのセクション。)
section・・・Sectionは、大まかなグループを表す(一般的なセクション)
article・・・articleは意味のあるグループを表す(独立した記事のセクション)
aside・・・Article内のasideは、そのArticle内に関連したことを記述する(本文との関連が薄いセクション(注釈や余談など))<たぶん、「余談だが」あたりをマークアップするときに使用されると思われます。>
sectionとarticleの関係がむずい。
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ
section要素
恐らく一番よく使う新要素。 一つのグループを指す。 一つのテーマとしてグルーピングできる物をセクションとして作る事ができる。
sectionを開始したら、hn要素があった方がよい。 ただしこれば理屈的な事であって、仕様で決められているわけではない。 新しいセクションを開始した時のhn要素はh1でもいいしh2でもいい。
今回の例(サンプルファイルの事)では新しいセクションの開始でh1を使っていて、今回こうしているのは『新たなテーマが開始した』という考えによるもの。
「h1がたくさんあるとスタイルが面倒?」でも、子孫セレクタを活用したりすればいい話だよね。 デザイン優先じゃなくて文書優先だよね。
article要素
section要素は文書の中にある部品を大まかにグループにするけど、意味がわかるわけじゃない。 articleはセクションの中でも、意味があるグループに付ける。 典型例にブログの記事。
articleは難しい。 英語を話す国の人でも難しい!
判断基準を言うなら、『その部分だけでも成り立つものがarticle』。 独立して存在できる物。 検索エンジンが対応したら、ページの中からメインの部分を見つけやすくなるだろう。article要素の入れ子も、section要素の中にarticle要素を入れる事も可能。
All article are section
not all section are article
(全てのarticleはsectionたるが、その逆は絶対では無い(適当訳:hamashun))
むむ?sectionって本文を書くところだと思い込んでいたけど、headerやfooterもsectionなんじゃないかい?
そんなこんなで著者不明の謎文章を見つける。
DOM HTML の覚え書き (3)
HTML5 のセクション構造は、小学校で習う作文法を覚えていればすぐ理解できるはずです。まず、ページ全体の目次を作りましょう。
- ページ
+ 概要
+ 記事集
+ 目次
+ 記事 1
+ 記事 2
+ 補足
ここから先は、やりたい人だけやれば良いことです。
例えば、本を考えてみて下さい。前書きと目次、本文、脚注や後書き、そして関連本の宣伝など、やや意味合いの異なるセクションが混在しています。
そうした違いを明示したいときは、section 要素の特殊形として次のようなものがあります。
nav 要素
目次など、リンクがつまったセクションを表します。目次のようにページ内のものだけでなく、関連本への外部リンクのようなものでも良いでしょう。
article 要素
本題を含んだひとまとまりのセクションを表します。本題は 1 個とは限りません。例えば、作家の作品集などでは「作品集」全体が本題であり、かつ個々の作品もそれぞれが本題になりうるでしょう。見出し・日付・署名と一緒になっている署名記事なども本題になりえます。
aside 要素
本題と関連してはいるものの、本題の流れに沿わないセクションを表します。関連本の宣伝セクションはこれで示せるでしょう(その中はさらにいくつかの nav セクションに区切られているかもしれません)。あるいは、本題の中にこのセクションを置いて、脚注・傍注をまとめておくのも良いでしょう。
また、セクション内でちょっとしたグループ化を行いたいときは header、footer 要素を置けます。header 要素
そのセクションのちょっとしたガイドに用いられます。見出し、簡単な目次、読む前の注意などが入るかもしれません。
header 要素は単なるグループ化ですので、header 要素自身がセクションを構成するわけでも、header 要素内に必ず見出しを入れなければならないわけでもありません。複数のセクションを header 要素でグループ化しても、文書のセクション構造自体には何ら影響しません。単に、それらのセクションが「ガイド的な何か」であるというだけです。セクション内には header 要素を何個でも置けますし、どこに置いても(末尾でも!)可です。
footer 要素
そのセクションの著者や日時など、メタ的な情報をグループ化します。これも header 要素同様、文書のセクション構造自体には何ら影響しませんし、どこに何個置いても構いません。footer 要素内に、nav 要素による関連ページへのリンクセクションがあっても良いでしょう。
こうなってくると「どうすりゃーいいんじゃい?」とキーボードをひっくり返したくなる。そんなときはHTML5.jpの日本語訳をバイブルにして構造を考えるのがよさそう。
だれかちゃんとした人が責任を持って旗をふってきちんとしたサイトで公開してくれるのがよいのだろうけど、どこの文章を読んでも個別の説明に頑張るだけで全体としての対処方法がわかりにくい。
html5で作成されている人たちって、本当に間違いのないコードを書いているのかな、、、?
そんな泣言ばかり言っていてもしかたない。
おおざっぱなコードを書いてみる。順番はどうでもよいはず
-section -header -nav -footer
これだけで十分な場合がほとんどなんじゃないの?
「順番がどうでもいい」はマークアップが正しくされていれば作り手の好きな順番で書かせろ!と言いたい。
それぞれの要素にはh1〜h6又はhgroupから始まると良いらしい。
もうちょっと拡張してみる。Blogとかの場合は下の3行は変わらない
-section(本文) --article(記事A) --article(記事B) --article(記事C) -aside(補足) -header(上) -nav(ナビゲーション) -footer(下)
うむ。こんなイメージならつかみやすい。
それぞれの要素のにheaderとかsectionとかarticleを入れ子にすることができるらしい。やらないほうがよさそう。