article
とても単純なhtmlバリデーションエラーがあった。
The “main” element must not appear as a descendant of the “article” element.
“ main”要素は、“ article”要素の子孫としてはいけません。(直訳)
main > articleの順で入れ子にするから、あとは記事部分に使うのが無難。
それ単体で成り立つ。という意味を肥大化させない。
http://www.htmq.com/html5/article.shtml
section
これも単純なhtmlバリデーションinfoがあった。（警告ではない）
Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.
セクションに見出しがありません。すべてのセクションに識別用の見出しを追加するには、「h2」 - 「h6」要素を使用することを検討してください。(直訳)
section > h2など、見出しタグが必要だと思う。
これはエラーではないので必須ではないが、見出しがないものはそもそもsectionで囲む必要は無い。
要素の入れ子
以上を踏まえてざっと整理すると
- main > article > section > h2その他
- main > section > article > section > h2その他
- main > section > h2その他 + article > 以下略
みたいな形が間違いではないと思う。
まとめ
これが正しいというのは、htmlの方針が変わったり、googleの検索基準が変わったりするから、定義しずらいと思う。
（これが正しい組み方！っていう本はあまりみたことがない。）
なので、間違った組み方だけしなければなんでもええねん！
ul > li を ul > div > li とかにしなければ大丈夫！
みたいな感覚。
なので、この記事もあくまで参考程度で。
悩んでたら解消のきっかけになれば幸いです。