webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。

皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。

HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。

これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。

厳密な解説はこの記事を読まずとももっと信頼できる文書がたくさんあると思うので、しっかりした情報を得たい人は以下のような記事とか読んで見てくださいねｗ「読んだんだけどよく分かんねーよ？」と言う時に読むのがベストかも知れないです。

見出しとセクション – セクション – HTML要素 – HTML5 タグリファレンス – HTML5.JP

HTML5 におけるアウトラインに関して簡単解説 | WWW WATCH

はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ

なお、記事中の引用はほぼ全てHTML5.jpからです。

アウトラインを作る要素

一応関係のある要素をざっくりと説明します。もちろんここはわかってるんだよ、って人は飛ばしてOKです☆

アウトライン

アウトラインと言うのはページの中における文書構造の区切りのことを指しています。HTMLというものは基本的には文書―テキストの塊なわけですけど、その中でも「ここからここまではこの見出しについての内容が書かれていますよー」という区切りを表しています。見出しを持っていればその見出しがタグ的にはh1～h6であろうと、意味的には記事自体のタイトルであろうと章見出し、小見出しであろうと、続く内容まで含めたアウトラインが備わることになります。

セクショニング・コンテンツ

HTML5での概念の一つであるコンテンツ・モデルの一つです(コンテンツモデルに関してはまた別に記事を書きたいと思っています)。セクショニング・コンテンツにはarticle、section、nav、asideがあります。navとasideはヘッディング・コンテンツ(見出し)の不要なセクショニング・コンテンツで、今回は説明を避けます。

見出し／タイトル

コンテンツ・モデルではヘッディング・コンテンツであり、タグはh1～h6、hgroupがそれにあたります。sectionとarticleは必ず内部の最初にこのいずれかを持ちます。どちらかというと「セクションの中に必ずタイトルがある」というより「タイトルを置くとそこからセクションが始まる」というように考えたほうがいいような気がしてます。それならタイトルのないセクションって状態は避けられますよね。

セクショニング・ルート

ちょっとややこしいのがこのセクショニング・ルートです。これは「ルート」の名の通り、セクションのルートとなる要素ですね。body、blockquote、fieldset、td、details、figureと言ったタグがそれにあたります。ニュアンスとしてはわかるんですけど、ちょっと自信持って説明できないですねこれは…ｗセクショニング・コンテンツのようにアウトラインは持つけど、内側の階層が外側の階層に影響しない、ということでいいのかな。まずbodyもセクショニング・ルートなので子孫にヘッディング・コンテンツ(殆どの場合はbodyのheaderにあるh1、つまりサイトのロゴ等)があるとそれはページ自体(body)の見出しとなる、ということみたいですね。

sectionとarticle

HTML5を勉強している人から「sectionとarticleの使い分けがわからん」という感想をよく聞いていたのですが、その話です。

元々の定義がどうやら変だったっぽい

最近HTML5.JPで7 月の HTML5 仕様変更 – html5doctor – HTML5.JPという記事が公開されたのですが、そこに「section と article が明確化された」という項目があります。sectionには「文書のアウトラインを明示するタグ」という役割があるわけ(後述します)ですが、それと別に今まで「sectionとarticleは同列のもので、内容によってどちらを使うかが変わってくる」という「文書全体を包含するタグ」としての使われ方があったのだと思います。その為「メインコンテンツをsectionで囲むのかarticleで囲むのか？」という選択が生まれたわけですね。

が、その項目内で「Bruce の section の記事もアップデートされた」とあるsection 要素 – html5doctor – HTML5.JPのページではその使い方にそもそも誤りがあったとあります。

私たちが犯してきた間違いとは、スタイル目的でコンテンツを囲んだり、nav, header, footer などからメインコンテンツの領域の境界を作るために section を使っていたことだ。

つまりページのheader、navの後に続き、footerの前にある部分、つまりメインコンテンツをsectionで囲むのはまちがいだったよーってことです。そしてarticleに関しては

ウェブ制作者は、コンテンツがシンジケートされるに相応しいと考えられるときは、section 要素の代わりに article 要素を使うことが推奨されます。

とあります。要は、今までsectionかarticleか微妙だった部分に関してはほぼarticleで構わないということです。articleってブログの記事などを囲んだりするのに使われていて、それ以外、例えば「会社概要ページは？articleでいいの？」という疑問を持つ人もいるんじゃないかと思います。それは多分にarticle(記事)と言う言葉のイメージが強かったんじゃないのかなと個人的には思ってます。実際は殆どの場合articleはページの文書を囲うのに相応しいタグだってことですね。ちなみにarticleには条項とか論説って意味もあって、一概に記事であるとは限りません。

sectionはあくまでアウトライン、一つのコンテンツはarticleを使う

というわけでページ内の独立したコンテンツとして見なせる部分にはarticleを使いましょう。そしてsectionには重要な役割があります。前述した文書のアウトラインを明示するタグという部分ですね。結局のところ、sectionは殆どの場合ブログなら記事の中の章分けやパーツ、普通のサイトでもページコンテンツ内の要素一つ一つをラップするタグだと言うことになります。それをレイアウト上必要なグルーピング等する場合は当然divで囲むことになります。

sectionと見出しの実際の使い方

次にh1～h6のヘッディングコンテンツについてです。HTML5はh1をページ内にたくさん置いてもいいということだけ知っている人もいると思いますが、それはどういうことなんでしょうか。書き方には大きく分けて3つあるんだと思います。

h1～6を使って暗黙的にセクショニングする

従来のHTMLの書き方です。アウトラインというものは、見出しタグを配置すれば暗黙的なアウトラインというものが形成されます。いくら便利にしようとルールを変えても過去の記述が不正となるのも微妙なので、後方互換的な措置と言うのかな。今まで通りでもいいよーってことです。

セクショニング・コンテンツの要素の中にあるヘッディング・コンテンツの最初の要素は、そのセクションの見出しを表します。その後に続く見出しのうち、ランクが同じか高い見出しは、（暗黙的に）新しいセクションを開始し、低いランクの見出しは、一つ前のセクションの一部をなす暗黙の従属セクションを開始します。いずれの場合も、この要素は、暗黙のセクションの見出しを表します。

とありますね。

h1～6を使うが明示的にセクショニングする

ウェブ制作者は、また、セクショニング・コンテンツの要素の中にセクションを明示的に包含することが推奨されます。一つのセクショニング・コンテンツ要素の中に複数の見出しを入れ、それによって暗黙に生成されたセクションに依存するのではありません。

とあるように、暗黙的なセクショニングはあまりよろしくないそうです。実際に、暗黙的なセクショニングでは正しくアウトラインを形成できないパターンもあります。まあ、逐一見出しを入れておけばそう変なアウトラインになることもないのですが。

明示的にセクショニングしてh1を使う

セクションは、あらゆるランクの見出しを含むことができます。しかし、ウェブ制作者は、h1 要素だけを使うか、または、セクションのネスト・レベルに合ったランクの要素を使うことが、強く推奨されます。

とあるように、見出しにh1のみを使ったコーディングも良しとされています。ただしその場合は必ずsectionのネスト(入れ子)によるアウトラインの形成が不可欠です。全ての見出しが同列になるのはまずいですからね。ページにおける重要度も示せないのではないかと思います。

じゃあ見出しは別に全部hでいいんじゃないの？

このように、一番簡単に書くなら今まで通りの1番、手間をかけてもいいのなら3番目の全てh1+section、となるのが順当だと思います。しかし可能だとは言え結局はsectionで区切ることが推奨されているっぽいですよね。個人的には「じゃあなんでHTML5になる時点でh1～h6なんて残さないでhタグにしなかったの？」と感じてたんですけど…。

実際途中でHTML5に取って代わられてしまい廃止になったXHTML2.0ではhタグが作られていたみたいですね。なんていうか、ビックリしましたｗ @kojika17さんが教えてくれました☆

やはり見出しタグが変わってしまうと古いブラウザに認識させるのが難しいとか、別にとりあえずまだあってもいいんじゃねーかとか、そういう事情もあったんでしょうね(適当)。

まだ確定してない仕様は今後どうなっていくか

で、まあとは言えsectionでいちいち区切るのってめんどくさいですよねｗ それに現実問題、外注の場合お客様に記事更新のみして貰う場合でも期待通りの形で更新してもらうというのはかなり難しいだろうなーと思います。

ただまあそこに関しては一応ブラウザの方でアウトラインというものをちゃんと解釈できるわけですから、HTML5が正式に使われるようになる頃にはCMSや制作ソフトなんかも対応して、見出しタグを置いた時点でsectionで囲んでくれるとか、そういう風になるんじゃないかなーと思ってます。webcre8自身もとりあえずは暗黙的なアウトラインというやつで当面は作っていくかと思います。h1だけ使いたい！と言う人はしっかりアウトラインを意識したマークアップを頑張ってみてくださいね☆

あとまあ、そういう感じでまだ実際ふらふらしてる仕様なので「これはこういうもの」という風に考えすぎないほうがいいかなーとも思います。勉強だけさらっとしといて使わないって手もありますからｗ スマフォ案件だとそうも行かないでしょうけど。

具体例

例えば「食べ物」というサイトがあったとします。「食べ物」のページには「野菜」「肉」「果物」「穀物」といったカテゴリがあり、果物カテゴリには「リンゴ」「スイカ」といった記事が書かれています。一応ブログというか、こういう普通のテキストサイトを例にして考えてみますね。

例えばトップページには記事が並んでいます。リンゴ、豚肉、玄米、なんて記事の抜粋があるとします。これらは「記事」なので当然articleタグによって囲まれています。

記事ページのコーディング例を示します

divやheader、footerはアウトラインを作りません。その為bodyの見出しはheaderの中の「食べ物」です。
articleの見出しは「りんご」、りんごの種類の中のsectionもそれぞれh1を備えています。
id=”side”の中のasideの見出し(カテゴリ、地域)は階層的にはサイトタイトルの1階層下で、記事タイトルと同じ重みということになるかと思います。気持ち的にあまり重要でないサイドバーの見出しのランクを下げたいところですが…その辺ははっきりしたことは言えないので、SEOのエロい人にアドバイスを仰ぎたいですね＞＜

<body>
<div id="wrapper">
<header>
<h1>食べ物</h1>
</header>
<div id="contents">
<article>
	<header>
	<h1>りんご</h1>
	</header>
	<section>
		<h1>りんごとは</h1>
		<p>りんごの説明</p>
		<p>りんごの説明</p>
		<p>りんごの説明</p>
	</section>

	<section>
		<h1>りんごの種類</h1>
		<section>
			<h1>ジョナゴールド</h1>
			<p>ジョナゴールドの説明</p>
			<p>ジョナゴールドの説明</p>
			<p>ジョナゴールドの説明</p>
		</section>

		<section>
			<h1>ふじ</h1>
			<p>ふじの説明</p>
			<p>ふじの説明</p>
			<p>ふじの説明</p>
		</section>

		<section>
			<h1>ゴールデンデリシャス</h1>
			<p>ゴールデンデリシャスの説明</p>
			<p>ゴールデンデリシャスの説明</p>
			<p>ゴールデンデリシャスの説明</p>
		</section>

	</section>

	<section>
		<h1>りんごの名産地</h1>
		<p>りんごの名産地の説明</p>
		<p>りんごの名産地の説明</p>
		<p>りんごの名産地の説明</p>

		<section>
			<h1>青森のりんご</h1>
			<p>青森のりんごの説明</p>
			<p>青森のりんごの説明</p>
			<p>青森のりんごの説明</p>
		</section>

	</section>

	<section>
		<h1>りんごの情報</h1>
		<p>りんごの情報について</p>
		<p>りんごの情報について</p>
		<p>りんごの情報について</p>
	</section>

<aside>
	<p>コメント</p>
<aside>

<footer>
<a href="mailto:fruits@example.com">果物担当へメールする</a>
</footer>
</article>

<div id="side">
<aside>
	<h1>カテゴリ</h1>
	<ul>
	<li><a href="">野菜</a></li>
	<li><a href="">肉</a></li>
	<li><a href="">果物</a></li>
	<li><a href="">穀物</a></li>
	</ul>
</aside>
<aside>
	<h1>地域</h1>
	<ul>
	<li><a href="">地域名</a></li>
	<li><a href="">地域名</a></li>
	<li><a href="">地域名</a></li>
	<li><a href="">地域名</a></li>
	</ul>
</aside>
</div>
</div>
<footer>
<address>
<a href="mailto:foods@example.com">食べ物へメールする</a>
</address>
<p><small>© copyright 1990 食べ物</small></p>
</footer>
</div>
</body>

終わりに

現状でwebcre8が得た情報からだーっとまとめてみました。荒いところ、勘違いしているところもあるかもしれません。ただ最近新しく得た情報から自分としては合点がいったところが多々あったのでまとめてみた次第です。もし何かおかしいところ、単純な間違いなど見つけたら教えていただけると幸いです。すぐに追記させて頂きます☆

ちなみに後から見てみたら多分にもれずこのブログのアウトラインも正直微妙なところがあるのでｗ 2、3日中に修正しようと思います！

追記

付け忘れたんだけど、記事のURLやソース自体、またはコーディングしたテキストを入力することでそのHTMLのアウトライン構造を分析してくれるHTML 5 Outlinerというサービスがあります。なかなか痒いところに手が届く仕様になっているのでチェックしてみてはどうでしょうか☆

HTML 5 Outliner

追記2

後日この話題に関して、他のコンテンツのカテゴリについての記事を書きましたのでこの記事で不十分なようであればこちらも読んでみてください。

[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ