title: Can I use multiple main elements in a multipage document?
body: <p>I am working on a site with jQuery Mobile "multipage" documents, where there may be several "pages" of the site that are coded as divs of a single html document. Here's the basic structure:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-role="page" id="page1"&gt;
          &lt;header&gt;Page 1&lt;/header&gt;
          &lt;main&gt;Content...&lt;/main&gt;
          &lt;footer&gt;...&lt;/footer&gt;
      &lt;/div&gt;
      &lt;div data-role="page" id="page2"&gt;
          &lt;header&gt;Page 2&lt;/header&gt;
          &lt;main&gt;Content...&lt;/main&gt;
          &lt;footer&gt;...&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>I would like to use the html5 <code>&lt;main&gt;</code> element as shown, but the w3c validator gives me an error, saying "A document must not include more than one main element."</p>
  
  <p>I understand that the w3c standards permit only one <code>&lt;main&gt;</code> per document. However, the aria standards for <code>role="main"</code> (to which <code>&lt;main&gt;</code> is mapped) do allow "multiple main elements as DOM descendants, assuming each of those is associated with different document nodes" (<a href="https://www.w3.org/TR/wai-aria/roles#main" rel="noreferrer">https://www.w3.org/TR/wai-aria/roles#main</a>).</p>
  
  <p>Do these jQuery Mobile <code>[data-role='page']</code> divs count as "different document nodes"? Can I have multiple <code>&lt;main&gt;</code> elements if only one at a time is exposed to the end user? </p>
  
  <p>(Note that inactive jQuery Mobile pages are in the document <code>&lt;body&gt;</code>, but hidden with <code>display:"none"</code>.)</p>