HTML5：「section要素」のマークアップについて

ちょっといきなりこんな話をしてもブログの趣旨とずれそうだけど、
ホームページをつくったときの私の勘違いを一席。

「アフィリエイトのいろは」はHTML5という（たぶん）新しいドキュメントタイプで記述してつくったのですが、このHTMLてのはそもそもなに？って言う人もいるかもしれません。

HTMLってなに？

ひとことでいうと、「Webページを記述するためのマークアップ言語」です。
ページの論理構造や表示の仕方を記述する事ができます。

ところで、サイトのページってソースを表示できるって知ってました？
ページ内のなにもないところで右クリック→ソース表示でみれちゃいます。
表示してみるとゴチャゴチャした記号の羅列が、、、それをHTML／XHTML文書といいます。

HTMLはたくさんの要素で構成されてるよ。

ソースをよくみてみると、　＜　と　＞　ではさまれてるものがありますよね？
それを「タグ」といいます。
たとえば、下のような記述をp要素といいます。

｜←　　　　　　　　　p要素　　　　　　　　→｜

開始タグ　　　　　　　　　　　　　　終了タグ

「開始タグ」と「終了タグ」で囲む範囲全体のことを「要素」とよばれてます。
で、こういういろんな要素を使ってHTML／XHTML文書は構成されてます。

要素には属性をつけれるよ。

要素には他の要素と見分ける為の属性をつけることができます。

たとえば「アフィリエイトのいろは」というテキストにリンクを設定する場合は、
＜a href="http://iroha-affi.com/"＞アフィリエイトのいろは＜/a＞のように、
＜要素名　属性名＝”属性値”＞　内容　＜／要素名＞の形で開始タグの中に記述します。

なんで属性をつけるの？

ところでなんで属性を付けるのかと言うと、
最近のHTMLでは基本的には文書の構造だけを記述していく為だからです。

装飾や見栄えについてはCSSというものに記述して
「Webページのデザインやレイアウトを定義」しちゃいます。
お家で言うと、HTMLは土台や柱。CSSでは壁の色や素材なんかを決めちゃうような感じです。

なので、属性というニックネーム（たとえば、台所の壁）を付けておくと、
CSSで「台所の壁の素材は金属で、色は緑に塗ってね。それと場所は・・・」
と言った感じで指示できちゃうんですね。

HTMLのタイプを宣言する！

少し話を元に戻して、、、
HTMLを書く為には、「どの言葉で指示するの？」ってのを決めなくちゃいけません。
仕事で、日本語を使うか英語を使うかみたいなものです。
先に決めとかないとみんな混乱しちゃいます。

世の中にはいろんなタイプのHTML／XHTMLがあるので、
その文書がどのバージョンのHTML／XHTMLで作成されているのかを
ちゃんと明示しなくちゃいけません。

だから私の場合は、ソースの一番上に
「HTML５の仕様に沿ってコードを記述しますよー！」
って最初に宣言してるんですよ。

HTML５はとってもわかりやすい！

さあ本題に近づいてきました。
HTML５は最新バージョンのHTMLのことです。
HTML4の後継として開発されてきたXHTMLは2009年に開発が終了しちゃったみたいなので、現在はHTML５に標準化される流れになりました。

で、HTML５にはいままでなかった要素や属性が追加されたので、
いろんなメリットが生まれました。

たとえば、ヘッダーを示す＜header＞やフッターを示す＜footer＞、章や節などのまとまりを示す＜section＞や主要ナビゲーションを示す＜nav＞などなど。

文書構造を表す要素が追加されることで、ブラウザーや検索エンジンに対して
より明確に文書構造を伝えられるようになります。
それに、自分でソースを確かめるときもずいぶんわかりやすくなりました。

ここを間違えた。

わたしは「HTML5って便利だなあ〜」なんて思いながら
＜header＞や＜footer＞とか＜section＞を使いまくってたのですが、
そこまではよかったんですよね。

その＜section＞とかに属性名を付けてCSSでレイアウトとか装飾をしてたんです。
これがどうやらいけなかったみたいです。
「コンテナ要素ではないので、レイアウト目的には使用できない。」らしいんですよ。
レイアウトに使用するのは従来どおりの＜div＞とかを使った方がいいんですって。

まあ、なぜかmacのsafariブラウザではちゃんと反映されてたからよかったんですけど、
ウィンドウズのIEではレイアウトが悲惨な事に。。。

教科書には書いてなかったのになあ、そんなこと。。（たぶん）
というお話でした。