HTML5コメント欄の<article>について

質問

現在HTML5でブログテンプレートをコーディングしています。
その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。
導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり
ソースの記述順序上、メインカラムの中にコメント欄が入りません。
簡単に構造を書くと
<div id="wrapper">
<div id="main"> //メインカラム
～～
</div><!-- #main-->
<div id="left"></div>
<div id="right"></div>
<div id="comment"></div>
</div><!-- #wrapper-->

こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。
このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。
(勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります)

なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。
かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。

このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？
http://www.w3.org/TR/html5/sections.html#the-article-element
ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み)
コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。
その<article>に<hn>タグがないことが疑問に思わせた発端なのですが
恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので
<hn>タグをつけていないのだと思われます。

だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり
記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。
これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。
どなたかご教授宜しくお願い致します。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

>だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり
>記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。
>これが合っているのかどうか、

HTMLの文法では、関連性のあるものを１つのグループにまとめなければなりません。
逆に、関連性のない物は別のグループに分けなければなりません。
といってもHTMLやコンピューターに限った事ではないんですけどね。衣服とおもちゃを一緒の箱にしまうことがないのと同じです。

W3Cに書かれているように、
記事とコメントをHTML構造上では一緒にして、デザインだけ離す（CSSを駆使して離れている場所に表示させる）ようにしてください。

<div id="main" class="article">
　記事
　<div class="aside">
　　記事に関係する余談、注釈など
　</div>
　<div id="related-pages" class="nav">
　　関連記事へのリンクなど
　</div>
　<div class="section">
　　コメント
　</div>
</div>
<div id="nav" class="nav">
　記事に関係のない、サイト全体のナビゲーションなど
</div>
<div id="miscellanous" class="aside">
　記事に関係のない余談など、
　<div class="section">ログインフォーム</div>
　<div class="section">広告</div>
</div>

HTML4では<div>でグループ化していましたが、HTML5では<article><section><aside><footer>などでグループ化します。
タグ名が変わっただけで基本的な文法そのものは変わりません。

以前、OKWaveで教えていただいたサイトですが、このパターンがあれば、基本的なレイアウトはたいてい作れると思います。
http://blog.html.it/layoutgala/index.html

#left、.leftなどの書き方はCSSだけでレイアウトを変更し左右を入れ替えると、idと表示位置が逆になったりして混乱の元になるので止めた方が良いです。
サイドバーを#sidebarとしていないのも、いわゆる1カラムデザインの場合に「サイド」ではなくなるからです。

---- aside -----
No.1の書き方ですが、ナビゲーションは記事の親要素のsectionに含まれていますので、記事に関連するナビゲーションという意味になります。
<aside>も同様に、HTML構造は記事と同じグループに入っていますので「記事に関連する注釈などが書かれている」と判断されます。
（そこに書いてある文章を解析しません。HTMLタグが目印です。（というかHTMLタグは目印です。））
もし<aside>の中に本文と直接関係のない記事を書くのであれば、記事が入っている<section>の外側に書かなければなりません。
（ナビゲーションも同様です。）

<section>
　　<h2>章本文タイトル</h2>
　　<p>記事</p>
　　<section>
　　　<h3>項タイトル</h3>
　　</section>
　　<nav>
　　　<p>ナビゲーション</p>　<!-- このナビゲーションは記事が含まれる親要素と同じ要素に入っているため、記事に関連したナビゲーションと判断されます。 -->
　　</nav>
　　<div class="comment">
　　　<p>コメント--何処にあっても良い</p>
　　</div>
</section>
<aside>
　<p>本文と直接関係ない記事</p>
</aside>

お礼

回答ありがとうございます。
やはり、メインコンテンツボックスの中に<section>としてコメント欄を含めて
1つ1つのコメントを<article>で囲むという方法にレイアウトを変更いたしました。
HTMLをきちんとしようとするのは、意識してなかった自分には難しいですね…。

回答No.3

神崎 渉瑠（@taloo）

>その<article>に<hn>タグがないことが疑問に思わせた発端なのですが

一応、こちらの質問に対しての回答を。

見出し（タイトル、表題）がなければ<hn>がなくてもかまいません。

何らかの理由で必要だというのなら、皮肉たっぷりにタイトル：「無題」とでも付けておけば良いと思います。

回答No.1

ORUKA1951

<div id="wrapper">
<div id="main"> //メインカラム
～～
</div><!-- #main-->
<div id="left"></div>
<div id="right"></div>
<div id="comment"></div>
</div><!-- #wrapper-->
こんな感じになっており、
★間違いです。!!!仕様書をろくに読まずにHTML5は無論HTML4.01も無理です。
HTML4.01にて、DIVは
『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされていたはずです。!!!
　それが理解されたとは言いがたく、HTML5では『文書内に埋め込まれた「意味」を明確にする( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )』ために「HTML5 では、文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加されます。
　合わせて!!DIVは原則として使えなくなります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
MEMO:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より
（著者は、他に適切な要素がないときの最後の最後の手段としてdiv要素を使用することが奨励される。div要素の代わりにより適切な要素を使用することにより、読者のためには、より良いアクセシビリティを著者にとってはメンテナンス性の向上につながる。）

★articleは内部にheader,section,footerを持つと想定される完結した記事で、それらをもつことが必須ではありません。hnではなくheader,section,footerです。
　<article><header></header><section></section><footer></footer></article>
★<article>でメインカラムを囲みたいのですが・・　
　そうではありません。sectionに関するコメントでしたら
　　<div class="section">
　　　記事
　　　<div class="comment"></div>
　　</div>
　　のはずです。文書構造に反したデザインにはならないはずです。
　　<div class="section">
　　　記事
　　<div>
　　<div class="section comment"></div>
　の場合もあるでしょう。

HTML4.01では、
<body><!-- タブは　(全角スペース)に置換してある。
　<div class="header">
　　<h1>ページタイトル</h1>
　　<p>記事</p>
　</div>
　<div class="section">
　　<h2>章本文タイトル</h2>
　　<p>記事</p>
　　<div class="section">
　　　<h3>項タイトル</h3>
　　</div>
　　<div class="nav">
　　　<p>ナビゲーション</p>
　　</div>
　　<div class="comment">
　　　<p>コメント--何処にあっても良い</p>
　　</div>
　　<div class="aside">
　　　<p>本文と直接関係ない記事</p>
　　</div>
　</div>
　<div class="footer">
　　<p>フッター</p>
　</div>
</body>

と書いていかなければならなかったものが
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<p>記事</p>
　</header>
　<section>
　　<h2>章本文タイトル</h2>
　　<p>記事</p>
　　<section>
　　　<h3>項タイトル</h3>
　　</section>
　　<nav>
　　　<p>ナビゲーション</p>
　　</nav>
　　<div class="comment">
　　　<p>コメント--何処にあっても良い</p>
　　</div>
　　<aside>
　　　<p>本文と直接関係ない記事</p>
　　</aside>
　</section>
　<footer>
　　<p>フッター</p>
　</footer>
</body>

と書けるようになった!!!これがHTML5です。

★ floatで段組をすると、文書構造を変更しなければなりません。
　また、本来の記事内での画像周辺へのテキスト周り込みなどが出来なくなります。
スタイルシートは、
div.header,div.section,div.footer{
width:80%;margin:0 auto;
padding:5px;
}
div.section{
position:relative;
min-height: 300px;
}
div.section h2,
div.section p,
div.section div.section{
width:70%;
margin:0 15%;
min-height:0;
}
div.section div.section p{width:auto;margin:0;}
div.section div.nav,
div.section div.aside{
width:15%;
position:absolute;
top:0;height:100%;
}
div.section div.comment{
width:70%;margin:5px auto;
font-size:0.9em;
border:inset 2px silver;
}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
/* 色分け */
body{background-color:gray}
div.header{background-color:lime;}
div.section{background-color:yellow;}
div.section div.section{background-color:white;}
div.footer{background-color:silver;}
div.section div.aside{background-color:aqua;}
div.section div.nav{background-color:fuchsia;}
div.section div.article{background-color:silver;}