#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で囲む必要は無い。

#要素の入れ子

以上を踏まえてざっと整理すると

みたいな形が間違いではないと思う。

#まとめ
これが正しいというのは、htmlの方針が変わったり、googleの検索基準が変わったりするから、定義しずらいと思う。
（これが正しい組み方！っていう本はあまりみたことがない。）

なので、間違った組み方だけしなければなんでもええねん！
ul > li を ul > div > li とかにしなければ大丈夫！
みたいな感覚。

なので、この記事もあくまで参考程度で。
悩んでたら解消のきっかけになれば幸いです。