HTML5:<article>と<section>と<h>タグの記述法の見直し

Question

現在はwordpressでこのように出力されるように記述しています。
ですが、HTMLのより典型的な記述法に仕様と思っています。
role属性は引き続き記載したままにする予定です。

↓現状はこの形です。

<main role="main">
	<div class="post">
		<section class="sec">
			<h2>タイトル</h2>
			<div class="post-meta">    //meta情報
				<span class="post-date">2015/9/15</span>
				<span class="category"><a href="カテゴリ" rel="category tag">日記</a></span>
				<span class="comment-num">Comment&nbsp;：&nbsp;<a href="コメント">0</a></span>
			</div>
			<article>    //本文
				<p>～～～<a href="リンク">……続きを読む</a></p>
			</article>
		</section>
	</div>
</main>

このままでも問題なく動作するのですが、「W3C」でチェックすると、

__<article>内に<h2>を記載せよ__---

という警告がでます。
なので

<article>
	<div class="post">
		<h2>タイトル</h2>
		<section class="meta">    //meta情報
		</section>
		<section class="">    //上記の<article>にあたる要素
		</section>
	</div>
</article>

と__<article>____<section>__を置き換えたほうがいいでしょうか？
__<section>は<article>__の子要素として扱って大丈夫ですか？

自分はずっと__<article>は<section>__の中に記述するものだとばかり思っていました。

Answer 1

<article><section>を置き換えたほうがいいでしょうか？

単純に元のコードでsectionとarticleを入れ替えただけでは、
今度は <section>内に<h2>を記載せよ という警告が出ると思います。

section、article、aside、navの4つのセクション要素のうち、

<section>と<article>には原則として見出し要素<h2> - <h6>を記述することが推奨されているからです。

理由は、そもそも「セクション」というもの自体が「見出しとそれに伴うコンテンツのひとかたまり」
を指すものであるため、自然に見出しがつかない領域に対してsection要素やarticle要素を使うこと自体
不自然であるとみなされるからです。

（ただし見出しを伴わないセクションが全てNGかというとそうでもありません。
意味的には明らかにセクションでも、デザイン的に敢えて見出しを立てないようなケースもあるからです。）

<section>は<article>の子要素として扱って大丈夫ですか？

<article>の中に<section>が入るのも、<section>の中に<article>が入るのも、 文法的にはどちらも問題ありません。 ただし、<article>は「自己完結した独立したセクション」<section>は「一般的なセクション」 のように意味付けの役割が異なりますので、どのような構造にするかについては 文書の内容に合わせて適切に設定することが求められます。

自分はずっと<article>は<section>の中に記述するものだとばかり思っていました。

そういう縛りはありません。実際のコンテンツの意味合いと文書構造に合わせて
その都度適切に記述してください。

今回の文書の場合であれば、h2要素タイトルを包む .sec を<section>または<article>とし、
本文〜となっている部分についてはh3で小見出しを立てないのであれば<div>、
h3で小見出しを立てるのであれば<section>とするのがよろしいかと思われます。
.secを<section>、<article>のどちらにすればよいかは内容次第ですが、
発行年月日もついていることですし、ブログ記事的なものであれば<article>の方がふさわしいのではないかと推測します。

あと、別に必須ではないですが、タイトルとメタ情報をまるっと<header>に入れても良いと思います。
その方がセクション内のヘッダー情報と本文領域が明確になるので。

---

【補足】
他の方が「main要素の中でsection要素を使用する必要はない」とコメントされてますが、
文書構造がそうなっているならmain要素の中で他のセクション要素を使うことは何ら問題ありませんし、
Web文書であれば普通は使うことになります。
逆にセクション要素の中でmain要素を使うことは文法違反になります。

Comments

[makoto-n]

わかりやすく説明していただいてありがとうございます！

Answer 2

section要素はアウトライン生成の為にある要素です。
main要素はアウトラインに影響しない為、main要素の中でsection要素を使用する必要はないと思います。

• 4.4.14 main要素 — HTML5 日本語訳
• 4.3.3 section要素 — HTML5 日本語訳
• 4.3.10 見出しとセクション — HTML5 日本語訳

Answer 3

W3Cの解説ではそれぞれに

<article> ・・・ 文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造 <section> ・・・ 文書またはアプリケーションの一般的セクション とありましたので、組み合わせて使うならば

<article>
  <header>
    <h2>表題</h2>
  </header>
  <section>
    <h2>セクション１</h2>
  </section>
  <section>
    <h2>セクション２</h2>
  </section>
</article>

が正しい用法のようです

こちらのサイトでの解説がわかりやすかったので参考までに
html5の要素articleとsectionの違いを理解する