header
【定義】：ヘッダ構造セクションを指示するHTML
『header』はヘッダ・レイアウトを定義つけるHTML5の新要素です。
headerの使用例［HTMLソースコード］
<!DOCTYPE html> <html> <head>～</head> <body> <header> <h1>500万円得をするホームページ作成会社.comのホームページ制作</h1> <p>あなたは500万円の損をしていることに気付いていますか??</p> </header> <p>ホームページの最大のコストはランニングコスト!!</p> <p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか？</p> <p>当ホームページ作成会社.comのサービスを利用することで、『業界最安水準で安全のドメイン・サーバー』『更新・管理費をゼロにする独自システム』『集客コストを激減させる圧倒的SEO対策』の3点により、御社のホームページのランニングコストをドメイン･サーバー費用などの月額5,000円程度に引き下げることが出来ます。つまり、1年で54万円、10年で540万円の得ができるのです。</p> <footer> <address>info@homepage-sakusei-kaisha.com</address> </footer> </body> </html>
headerを使用しないHTMLソースコード
<!DOCTYPE html> <html> <head>～</head> <body> <div id="header"> <h1>500万円得をするホームページ作成会社.comのホームページ制作</h1> <p>あなたは500万円の損をしていることに気付いていますか??</p> </div> <p>ホームページの最大のコストはランニングコスト!!</p> <p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか？</p> <p>当ホームページ作成会社.comのサービスを利用することで、『業界最安水準で安全のドメイン・サーバー』『更新・管理費をゼロにする独自システム』『集客コストを激減させる圧倒的SEO対策』の3点により、御社のホームページのランニングコストをドメイン･サーバー費用などの月額5,000円程度に引き下げることが出来ます。つまり、1年で54万円、10年で540万円の得ができるのです。</p> <footer> <address>info@homepage-sakusei-kaisha.com</address> </footer> </body> </html>
headerの使用方法解説
「header要素」は、文書構造としてのヘッダ要素を定義しますも「HTML5」の数ある新要素の中の1つとして注目を浴びました。従来もレイアウト構造として、「header」に相当する｢div要素」を配置してWebデザインを設計するのが一般的でした。しかし、このような記述方法は、あまりスマートな方法ではありません。
ヘッダ要素を意味する｢class」は制作者が自由に設定できるため、いわゆるヘッダ要素内の｢class」が｢header」なのか｢head」なのか、それとも｢topcontents」なのか、記述が暖昧で、検索エンジン側にとって、この｢div要素」内の内容がはたして本当に重要なものかどうか判断できませんでした。
なにより「div要素」ばかりが増えてしまい、検索エンジンにとっても、制作者側にとっても構造的に複雑なソース・コードになってしまうという問題がありました。
そこで｢HTML5」では、これまでの問題点を見直し、「header要素」を新たに追加しました。このことで、「body」セクション内の｢header」として機能します。ただし、「div要素」の完全な代替要素というわけではありません。良くも悪くも「HTML4.01」以前の｢div要素」は非常に便利な、しかし暖昧なブロック要素でした。
「header要素」は、セクション単位でのヘッダ構造を定義するための要素です。この構造は、「table要素」における｢thead要素」とも似ています。
1つのセクション内に｢header要素」を1つ配置します。しかしセクションに対して必須要素ではありません。
「header要素」の主な利用方法
「header要素」には、セクションの見出し(h1-h6要素など）を1つ以上用いることが想定されています。
ただし、必須項目ではありません。「セクションの目次」「検索フォーム｣、あるいは「関連するロゴ］などを配置するのに使うことも問題ないとされています。
前述の例では、「div要素」の代替として｢header要素」に置き換えましたが、常に「div要素」を置き換えられるわけではありません。「header」はセクションの1つであることを改めて思い出してください。
