Explain whether an article element can have section elements and vice-versa

It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section> and an <article>, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.


Use the <section> if your page consists of multiple articles.


Use the <article> when you have an article that's comprehensive enough to contain multiple sections.


You can even combine them both if using both fits your content, such that your markup looks like this.

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>