検索キーワードを入力:

HTML5:headerをどこよりも詳しく書く!

HTML5:headerをどこよりも詳しく書く!

HTML5の勧告来て、css3の勧告マダー?と思う人が多いと思うけど、ちょっとまった。じゃあHTML5はマスターされておるのでしょうか。

僕だってあやふやな部分多いけど、まだまだ定義もブレブレだったりでしょうがない部分はありますが、HTML5でコーディングされたサイトのソース見ても、これおかしくないかな。。。って思う事が多々あります。

前の記事でも書いたけど、またくどくどと書く。

header要素はイントロダクション

header要素は、あくまでもイントロダクションであって、セクションに必須な項目と考えるのは難しいです。
あくまでもイントロということは、セクションに2個あるのも間違いかと。

headerというタグはあくまでも支援要素であって、使わなきゃ!いけない訳じゃない。いうなれば、縁の下の力持ちです。

header要素はアウトライン・アルゴリズムに参加しない

headerはイントロダクションなのです。
しかもアウトラインアルゴリズムに参加しないので、前置きを書くにはピッタリな支援要素ということになります。

例を書いてみます。
[html]
<article>
<header>
<p>ようこそ・・</p>
<h1>パパラッチのお部屋</h1>
<h2>パパラッチのお部屋に異変が起きた</h2>
<p>今あなたの後ろにいるの。今からそのことについて書くね。</p>
<h2>始まりはいつも雨</h2>
</header>
<p>この前の日曜日の事なんだけど、お団子を食べ過ぎたの。。</p>
~~~
</article>
[/html]

こんな書き方で、header要素はアウトラインアルゴリズムに参加しないので、/header以降のpタグは/headerの真上のh2について書かれてることになります。

イントロ要素で支援要素なんだけど・・果たして、要るの?と言われたら立場無いので言っちゃダメです。

hgroupとheaderで、重量化ごくろうさまです

よくhn一個をheaderで囲っているソースを見ますが、それって全く意味無いのではないでしょうか。
そこまでならまだしも、一つの見出し要素だけを、ご丁寧にhgroupで囲ってるソース見ると、まさに『なんも言えねぇ』状態なのです。

そもそもhn一個ならheaderで囲む必要なんて無いのです。

headerの位置づけは、フローコンテンツ
補足すると、セクショニングコンテンツではありません。

bodyタグ直下のheaderは、そのページのhn(見出し)や、メインのnavを入れる形になるし、コンテンツ内のarticle要素にheaderを入れるなら、そのarticleの見出しやナビゲーションを入れることに使用する感じです。

[html]
これ、どうなの?な例
<article>
<header>
<h2>ここに見出し</h2>
</header>
~
~
</article>
[/html]

ここまでなら、まだ救われるんだろうけど、以下のソースはチョット・・
[html]
いただけない例
<article>
<header>
<hgroup>
<h2>ここに見出し</h2>
</hgroup>
</header>
~
~
</article>
[/html]

疲れたし、寝ます。

About Little

WordPressをいじくり倒して早10年。一人ぼっちでひたすらソースとにらめっこ厨。 有り難いことに、Welcart/WP e-commerce/WooCommerce/EC-Cube等で多数ECサイトを制作させていただいたけど、ふと気付いた、ちゃんと売れるのか。 効果的に売れるようにするためにはどうしたらいいのか。ということでお勉強を兼ねてECサイトも運営中。
2013年1月31日

Related Posts

0 comments found

Comments for: HTML5:headerをどこよりも詳しく書く!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です