[17-4] ヘッダを表す<header>と、見出しをまとめる<hgroup>

今回はヘッダを表す<header>を使ってみましょう。

*見出しをまとめる<hgroup>は HTML5仕様から削除されます
削除の理由と正しいマークアップ方法を追加いたしました。 (2013年9月追記)

使用する要素 <header> 〜 </header>

本日のサンプルは[ 17-1 ]と同じです

★サンプルは [ 17-1 ] と同じです。まだ見てない方はこちらからどうぞ。
★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample17set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

<header>要素は、ヘッダの部分を囲む

まず<header>。サンプルページのヘッド部分はコレ↓ このソースは下記のようになっています。

<header>
	<h1>ほんっとにはじめてのHTML_Sample17</h1>
	<p id="subh">HTML5のセクション要素で組むサンプル</p>
	<p>セクション要素<article><aside><section><nav>を使ってページを組み立てよう!</p>
</header>

ヘッダとしてまとめたい部分を<header>と</header>で囲んでいますね。
かつては「<div id="header">(ヘッダ部分)</div>」というふうに<div>を使っていましたが、
この新要素の登場で、誰が書いてもヘッダだとわかるし、CSSの指定もしやすくなりました。

★ただし、IE8まではHTML5をサポートしていませんので、前にもやった「IE8までのブラウザにHTML5の新要素を理解させるオープンソース」のリンクを貼る必要があります。「Google code」提供。下記を<head>〜</head>の中にれます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[if lt IE 9] と [endif] で囲まれていますが、これはIEだけの仕様で、
この記述によってIEだけが「もしIE9未満だった場合にのみ実行する」と解釈するそうです。

ちなみに、<header>は、ウェブページのヘッダ部分だけでなく、セクションのヘッダにも使えます
「導入部分、前置き的な部分」は<header>要素でグループ化できるということです。

<hgroup>要素は h1〜h6をグループ化する(予定でしたが…)

もうひとつ新要素で<hgroup>がありました。
下記サンプルの<hgroup>の中に、<h1>でページのタイトル、<h2>でサブタイトルをいれてます。

<header>
	<hgroup>
	<h1>ほんっとにはじめてのHTML_Sample17</h1>
	<h2>HTML5のセクション要素で組むサンプル</h2>
	</hgroup>
	<p>セクション要素<article><aside><section><nav>を使ってページを組み立てよう!</p>
</header>

前回 [17-3] の「暗示的なセクション」のように、見出し要素が登場すると新しい暗示的なセクションが生成されますが、この<hgroup>でまとめると、最上位の見出しのみイキで他のは見出しとして認識されなくなる。という要素でしたが…

*<hgroup>は、HTML5 仕様から削除されます。
h1〜h6要素は、サブタイトルや小見出しに使ってはいけないことになっているので、
<hgroup>要素を使って「見出し」として認識されなくなるのは無理があったようです。

ということで、<hgroup>は使わずに、サブタイトルには<p>や<span>を使うべきということになりました。
正しいマークアップ例は下記のようになります。

<header>
	<h1>ほんっとにはじめてのHTML_Sample17</h1>
	<p>HTML5のセクション要素で組むサンプル</p>
	<p>セクション要素<article><aside><section><nav>を使ってページを組み立てよう!</p>
</header>

次回予告

次回は、これも新たにHTML5から加わった要素の<footer>を使ってみましょう。
これはフッタを囲むだけの要素ではなく、入れるべき内容が決まっています。

それと、前からある要素なんですが<address>についても、HTML5から少し扱いが変わったのでふれてみましょう。
<address>は住所を書くのではなく「連絡先のリンク」を書くべきところ、と変更になりました。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

見出しの順番

見出しはh1より前にh2を使ってもいいのですか?
順番に使わなくてはいけないと思っていたのですが、どうなんでしょうか?

Re: 見出しの順番

天さん、コメントありがとうございます。

見出しの順番は、HTML5 から、数字の順じゃなくても良いらしい。
HTML5 から「暗示的セクション」という概念があるからだそうで。
私も、最初に調べたとき、へーって思いました。
でも、自分的にややこしくなりそうなので、今までどおり数字順に使ってますけど(笑)。

「暗示的セクション」については、「[17-3] セクションと見出しのルール」
http://honttoni.blog74.fc2.com/blog-entry-63.html
に書いといたので、見てみてください。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.