title: Why HTML5 Nested Element <main> is Invalid
body: <p>Why is it invalid to use no more than one <code>&lt;main&gt;</code> element per page? For, example, if an <code>&lt;article&gt;</code> can have both a nested <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> element, why not a <code>&lt;main&gt;</code> as well?
  <br><br>Example:</p>
  
  <pre><code>&lt;article&gt;
    &lt;header&gt; ... &lt;/header&gt;
    &lt;main&gt; ... &lt;/main&gt;
    &lt;footer&gt; ... &lt;/footer&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Rr379.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rr379.png" alt="W3.org html validation result: error"></a></p>
  
  <p><br><strong>Edit</strong>: And, I guess my follow question is, given the code example, what should be used in its stead?</p>