article、section、hgroup？

質問

HTML5にある<article>、<section>、<hgroup>の3つのタグの使い分けに困っています。

普通に書いたら下記のように3つのタグが並ぶと思います。

<section><article><hgroup>
<h1>本文</h1>
<h2>タイトル</h2>
<h3>日時</h3>
</hgroup></article></section>

CSSでどのタグを指定しても同じ装飾になります。
この3つのタグが無意味にしか感じられません。

h1～h6はhgroupで囲む。1つの括りで扱える情報なのでarticleが付く。
そして１つのセクションとしてのまとまりなのでsectionが付く。

けれどCSSでどのタグに装飾しても同じ。

こんな3つもタグを並べる意味はあるのでしょうか？

前回の質問：

SEO的に最も良いh1～h3指定順位とは？　http://okwave.jp/qa/q7730062.html　

前日の質問：

Webサイトにスライディングサイドバーを設置したい　http://okwave.jp/qa/q7728373.html

回答No.4

ORUKA1951 · ベストアンサー

＞headerには直接内容は入らないんですか。
　書いては、チェックを頼んでたら埒があきません。私もたまったものじゃない。
　とにかく仕様書を読んで理解することは自身で行ってください。私もあなたの質問に回答するたびに、念のため必ずチェックしているのですよ。
<!-- <div id="main">こんなもの要りません。-->
<article>
　<header>
　　<p><time datetime="2012-9-30">2012年9月30日</time></p>
　　<!-- tinme要素はフレージング・コンテンツ--HTML4で言うところの行内要素 フレーズという単語はわかりますよね、-->
　<!-- header内には見だしがあるはずでは？ -->
　</header>

　<section>
　　<hgroup>
　　　<h1>タイトル１</h1>
<!--　　　<p>本文１</p> hrgoupにはh1要素しか入れられません -->
　　</hgroup>

　</section>
　　<p>本文１</p><!-- ここに来るはずです。 -->
　<section>
　　<hgroup>
　　<h1>タイトル２</h1>
<!--　　<p>本文２</p> hrgoupにはh1要素しか入れられません -->
　　</hgroup>
　　<p>本文１</p><!-- ここに来るはずです。 -->
　</section>
　<footer>
　　<p class="relative"><a href="">前</a> | <a href="">次</a></p>
　　<!-- この様なところにdivを使うのはおかしい またnavを使うべきではない -->
　</footer>
</article>

　divは、あくまで要素(タグ)が足りないときにidやclass名と組み合わせて文書構造を示すために使うのです。単にリンクの段落(paragraph)でしたら<p>とマークアップしてclass名をrelative(関係者)とかをつけておけば、どこに登場しても統一できる。sectionの最後に
<p class="relative"><a href="">前</a> | <a href="">目次</a> | <a href="">次</a></p>
とかね。今は使わなくても将来の可能性も考えます。そのためにも一度しか書けないidよりはclass名を使うほうが良い。

最後に仕様書のURLをあげて置きます。
※HTML5 ( http://www.w3.org/TR/2011/WD-html5-20110525/ )
　→要素(Elements)の索引 ( http://www.w3.org/TR/2011/WD-html5-20110525/index.html#elements-1 )
　ここでhgroupを見ればchildlen(子供)には「One or more h1, h2, h3, h4, h5, and/or h6」「ひとつ以上のh1, h2, h3, h4, h5, および h6」と書かれていますよ。

また、先にも紹介しましたが
※Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　のDATA入力(タグで選択)してもよいでしょう。

お礼

回答ありがとうございます。

んーん、難しい・・・

私はMDN(Mozilla Developer Network)　https://developer.mozilla.org/en-US/docs/HTML/HTML5　のサイトでHTML5を勉強したんですが全然理解できていないようです。

W3Cのサイトは英語＆何を言っているのかさっぱりわからない＆難しすぎて理解出来なかったんですよね。

やはりインターネットだけで勉強するのは無謀なのかな。

HTML5+CSS3の書籍を一度見てみます。ありがとうございます。

回答No.3

ORUKA1951

＞<article>
＞<header>10月3日</header>
　繰り返しますが、<header>内に直接内容は入りません。
　<header><h1>10月3日</h1></header>
最悪
　<header><p>10月3日</p></header>

＞mainでも<header>と<footer>を書いても大丈夫なんでしょうか？
　もちろんです。あくまで文書構造を示すのですから、articleはheader,section,footerを持ちうる完結した記事です。(header,footerはなくても良いが、ありうる内容ということ)
<article>
　<header></header>
　<section>
　　<h1></h1>
　　<section>
　　　<h1></h1>
　　　<article>
　　　　<header></header>
　　　　<section></section>
　　　　<footer></footer>
　　　</article>
　　</section>
　</section>
であっても問題ありません。

W3Cでも、hgroupやmarkは最後まで議論されていましたが・・
本当にhgroupが必要か否かはよく見てください。
本来なら
<section>
　<h1>見だし</h1>
　<section>
　　<h2>見だし</h2>
のほうが適しているはずです。ひとつのセクションに見出しはひとつしかありえないのが普通です。先で２番目のsectionが増えても良いですね。その場合に全体の見出しは常にh1ですよる。
　たとえばスタイルシートでデザインするときにh1はその位置にとどめておいて、次のsectionに進むたびにh2とその記事だけスクロールするとか。h2をタグのようにデザインして、見出しをクリックすると次に入れ替わるとか・・

なお、
<aside id="sidebar-left"><!-- 左サイドバー --></aside>
　→<aside id="contentTable"></aside>

<aside id="sidebar-right"></aside>
　→<aside id="siteMap"></div>
のように、後で誰が見てもわかるように、誰かが左右を反対にデザインしたときに、それに手をつけようとしたら混乱する。HTMLの一部を書き直すにしても、siteMapを書き直したければid="siteMap"を探せばよい。スタイルシートを直すときも、siteMapを横に並べようと思ったらそうすればよい。

お礼

回答ありがとうございます。

headerには直接内容は入らないんですか。

fotterも直しました。

これでどうでしょうか？ご教授願います。

改善前：

<article>
<header>10月3日</header>
<section>
<hgroup>
<h1>タイトル１</h1>
<h2>本文１</h2>
</hgroup>
</section>
<section>
<hgroup>
<h1>タイトル２</h1>
<h2>本文２</h2>
</hgroup>
</section>
<footer>次のページ</footer>
</article>

改善後：

<div id="main">
<article>
<header>
<time datetime="2012-9-30">2012年9月30日</time>
</header>

<section>
<hgroup>
<h1>タイトル１</h1>
<p>本文１</p>
</hgroup>
</section>

<section>
<hgroup>
<h1>タイトル２</h1>
<p>本文２</p>
</hgroup>
</section>

<footer>
<div id="next-page">次のページ</div>
</footer>
</article>
</div>

回答No.2

ORUKA1951

先ほどは失礼しました。お名前に「さん」つけるの忘れてました。
<hgroup>
<section>
<h1>10月4日</h1>
<article>
<h2>タイトル</h2>
<p>本文</p>
</article>
</section>
</hgroup>
は違います。hgroup内にはh1～h2以外は入れてはなりません。
もし、articleをつかってマークアップするなら
<section>
　<h1>日記</h1>
　<p>説明</p>
　<article>
　　<header>
　　　<h1><time class="writed" datetime="2012-10-04">10月4日</time></h1>
　　</header>
　　<section>
　　　<h1>犬と散歩</h1>
　　　<p></p>
　　</section>
　　<footer>
　　</footer>
　</article>
　<article>
　　<header>
　　　<h1><time class="writed" datetime="2012-10-05">10月5日</time></h1>
　　</header>
　　<section>
　　　<h1>犬と散歩</h1>
　　　<p></p>
　　</section>
　　<footer>
　　</footer>
　</article>
でしょう。繰り返しますが、article内にはheader,section,footerが入ります。

　この場合、この様には書かずに、
<section>
　<h1>日記</h1>
　<p>説明</p>
　<section>
　　<h1><time class="writed" datetime="2012-10-04">10月4日</time></h1>
　　<section>
　　　<h1>朝は犬と散歩</h1>
　　　<p></p>
　　</section>
　　<section>
　　　<h1>昼は終日ごろ寝</h1>
　　</section>

　のほうが良いと思います。sectionはセクショニングコンテンツですから、きちんと階層だって整理されますから。

お礼

回答ありがとうございます。

全体の文章構造：

<!DOCTYPE html>
<head>
<header>
<div id="header-menu"><!-- トップロゴ --></div>
<nav id="local-navigation"> <!-- ローカルナビゲーション --> </nav>
<nav id="breadcrumb-ist"><!-- パンくずリスト --></div>
<aside id="sidebar-left"><!-- 左サイドバー --></aside>
<aside id="sliding-sidebar"><!-- スライディングサイドバー --></div>
<aside id="sidebar-right"><!-- 右サイドバー --></aside>
</header>
</head>
<body>
<div id="main">
.
.
.
.
</div>
<footer>
<nav id="gloval-navigation"> <!-- グローバルナビゲーション --> </nav>
<address><!-- 連絡先 --></address>
</footer>
</body>
</html>

mainの文書構造の書き方で悩んでいます。

10月3日
タイトル１
本文１
タイトル２
本文２

10月4日
タイトル１
本文１

下記の書き方でどうでしょうか？アドバイスをお願いします。

<article>
<header>10月3日</header>
<section>
<hgroup>
<h1>タイトル</h1>
<h2>本文１</h2>
</hgroup>
</section>
<footer>次のページ</footer>
</article>

１．hgroup内にはh1～h6以外は入れていけない。
２．article内にはheader,section,footerが入る。

１つ疑問に思ったんですが全体の文章構造に<header>と<footer>を使っていますが、
mainでも<header>と<footer>を書いても大丈夫なんでしょうか？

ご教授頂きたいです。

回答No.1

ORUKA1951

繰り返しになりますが、HTML5では文書構造が極めて重視されます。もともとHTML4.01でも
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と明記されている(1999年)のに、まったく守られてこなかった。
　そのためにHTML5では新しい要素として、まっとうなウェブデザイナーなら、してきた
<div class="header"><div class="section"><div class="article">が、<header><section><article>になっただけです。
　HTML5ではそれぞれの要素が「メタデータ　コンテント」「フロー　コンテント」「セクショニング　コンテント」「ヘッディング　コンテント」「フレージング　コンテント」「エンベッディッド　コンテント」「インタラクティブ　コンテンツ」に分けられるのはご存知でしょう。
<section>　フローコンテント、セクショニングコンテント
　　・・見出しひとつ!!と記事を持ちうる塊
<article>　フローコンテント　ヘッディングコンテント
　　・・header要素section要素footer要素を持つあるいは持つと期待される一塊
<hgroup>　フローコンテント、ヘッディングコンテント
　　・・複数の見出しをもつ場合//いまだに議論が続いています。

　です。それぞれになにを入れるかは、このように期待されています。
<article>
　<header></header>
　<section></section>
　<footer></footer>
</article>
　が期待されています。よって
<section><article><hgroup>
<h1>本文</h1>
<h2>タイトル</h2>
<h3>日時</h3>
</hgroup></article></section>
はありえませんね。おき得るとしたら

<section>
　<h1>見だし</h1>
　<p>記事</p>
　<article><!-- 本文と独立しかつ完結した記事 -->
　　<!-- SEO的に最も良いh1～h3指定順位とは？( http://okwave.jp/qa/q7730062.html )
　　　でのsectionの階層付けに寄与しません。-->
　　<header>
　　　<hgroup>
　　　　<h1>本文</h1>
　　　　<h2>タイトル</h2>
　　　　<p>日時</p>
　　　</hgroup>
　　</header>
　　<section>
　　　<h1>・・・</h1>
　　</section>
　　<footer>
　　</footer>
　</article>
</section>

と言う状況ですね。

selene2010の今までの質問や今回の『CSSでどのタグを指定しても同じ装飾になります。』
を見ていると、HTML4.01の勧告(1999年)以来、繰り返し叫ばれている、もっとも重要なHTMLによる文書構造と、スタイルシートの分離と言う概念が足りないようです。

　先の回答( http://okwave.jp/qa/q7728329.html#a2 )でも書きましたが、HTMLは徹底して文書をその構成要素についてマークアップするもので、プレゼンテーションとは独立したものという発想に切り替えてください。

お礼

回答ありがとうございます。

HTML5の<h1>～<h6>は重要度だと思っていました。

助言を元に考えると下記のようになりました。

<title>サイト名</title>

<hgroup>

<section>
<h1>10月3日</h1>

<article>
<h2>タイトル</h2>
<p>本文</p>
</article>

<article>
<h2>タイトル</h2>
<p>本文</p>
</article>
</section>

<section>
<h1>10月4日</h1>

<article>
<h2>タイトル</h2>
<p>本文</p>
</article>
</section>

</hgroup>

作りたいのは日記サイトなんですがネタが毎日あるわけではないので年月日ではなく月日で管理しようと思っています。
そのためdatetimeは使えませんでした。

改良前：

<hgroup>
<h1>タイトル</h1>
<h2>日時</h2>
<h3>本文</h3>
</hgroup>

改良後：

<hgroup>
<section>
<h1>10月4日</h1>
<article>
<h2>タイトル</h2>
<p>本文</p>
</article>
</section>
</hgroup>