HTML5

【HTML5】私のsection使い方問題、解決

HTML5

そろそろPC用のサイトとかでもHTML5を使った方が良いのかなー?という気がしてきたkairingです。
サイト作る人は実装してねー(勧告候補と言います)っていう段階の要素が多数あるので、そろそろやるべき?と、重い腰を上げかけて…いたところで、Stinger3のテンプレートを使ってみちゃったというところですw

それはさておき。

調べていくと、sectionの使い方問題(アウトライン)に例外なくハマりましたが、調べまくった結果、一旦自分なりの解釈とコーディングルールを決めました。(2013年10月現在)

一番の話題、HTML5のsectionの使い方

セクショニング・コンテンツとアウトラインの存在する意味

ツリー構造にするためのもの。
見出しがどこの範囲のものなのかということをアウトラインと考える。そのアウトラインを明確にするタグのことをセクショニング・コンテンツといいます。

ツリー構造にするってことは、クローラーが読みやすくなるのでSEO対策にもなるんじゃないかー?と私は考えてます。

section要素のこと

sectionとは?
見出しが付けられるひとかたまりのコンテンツで、article・aside・navが適切でない場合に使う。

上記の通り、その他のセクショニング・タグを消去法で照らし合わせて最後に使う、ということです。

実際使う時に心に留めておくべき点

  • sectionの中には見出しがあるのが自然
  • 見出しタグを使えば、暗黙的にアウトラインが作られる
      →これまで通り、sectionタグ使わなくても大丈夫、ということ(でも暗黙的なのはよろしくないそうだ)
  • sectionタグを入れ子にしてアウトラインを作ることが条件だが、h1タグのみの構造も問題ない
      →h2〜h6は使わなくてもOK、ということ

h1-h6とsection

色々考えた結果。

私はsection・h2〜h3を使う

理由

  • 暗黙的なアウトラインはよろしくないという点
  • sectionで区切るとはいえ全てh1というのに違和感がありすぎる

h1-h6を使いつつ、sectionタグでアウトライン文章の章・節を考えたとき、h2~h6使いつつsectionタグで区切るのは、手間ですけど論理的にありですよね。

仕事の現場ではブログ記事とかにsection入れて書いて!なんて困惑させるだけでしょうから言えませんけど…。
ここのサイトもやっぱりHTML5にしてみたいなぁ〜。追々。

◆参考サイト
http://webcre8.jp/think/html5-section-outline.html

  • この記事を書いた人

サオリサン

WEB制作のディレクター・制作・運営支援をしてます(フリーランス&会社員)。アクセス解析してサイト改善するのが好き。

-HTML5
-