Restrict the main element to be used once per document

Multiple main elements are still allowed if all or all but one have the hidden attribute specified. The main element is also restricted in terms of where it can appear in a document. It can only have html, body, form without accessible name, div, and autonomous custom elements as ancestors.

This also slightly alters the definition of the body element as it effectively encompasses all content of a document, except for some metadata.

Fixes #100.

Author: annevk

images/content-venn.svg

@@ -10696,7 +10696,7 @@ console.assert(image.height === 200);</pre>
    <li><code>kbd</code></li>
    <li><code>label</code></li>
    <li><code>link</code> (if it is <span>allowed in the body</span>)</li>
-   <li><code>main</code></li>
+   <li><code>main</code> (if it is a <span>hierarchically correct <code>main</code> element</span>)</li>
    <li><code>map</code></li>
    <li><code>mark</code></li>
    <li><span>MathML <code>math</code></span></li>
@@ -15170,7 +15170,7 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
    <dd w-nohtml>Uses <code>HTMLBodyElement</code>.</dd>
   </dl>
 
-  <p>The <code>body</code> element <span>represents</span> the main content of the document.</p>
+  <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
 
   <p>In conforming documents, there is only one <code>body</code> element. The <code
   data-x="dom-document-body">document.body</code> IDL attribute provides scripts with easy access to
@@ -15550,7 +15550,7 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Flow content</span>, but with no <code>main</code> element descendants.</dd>
+   <dd><span>Flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -15727,7 +15727,7 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Flow content</span>, but with no <code>main</code> element descendants.</dd>
+   <dd><span>Flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -16116,7 +16116,8 @@ Space is not the only void</pre>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Flow content</span>, but with no <code>header</code>, <code>footer</code>, or <code>main</code> element descendants.</dd>
+   <dd><span>Flow content</span>, but with no <code>header</code> or <code>footer</code> element
+   descendants.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -16202,7 +16203,8 @@ Space is not the only void</pre>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Flow content</span>, but with no <code>header</code>, <code>footer</code>, or <code>main</code> element descendants.</dd>
+   <dd><span>Flow content</span>, but with no <code>header</code> or <code>footer</code> element
+   descendants.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -18960,9 +18962,9 @@ first matching case):&lt;/p&gt;
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Either: One <code>figcaption</code> element followed by <span>flow content</span>.</dd>
-   <dd>Or: <span>Flow content</span> followed by one <code>figcaption</code> element.</dd>
-   <dd>Or: <span>Flow content</span>.</dd>
+   <dd>Either: one <code>figcaption</code> element followed by <span>flow content</span>.</dd>
+   <dd>Or: <span>flow content</span> followed by one <code>figcaption</code> element.</dd>
+   <dd>Or: <span>flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -19182,7 +19184,8 @@ included with Exhibit B.
    <dd><span>Flow content</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
-   <dd>Where <span>flow content</span> is expected.</dd>
+   <dd>Where <span>flow content</span> is expected, but only if it is a <span>hierarchically correct
+   <code>main</code> element</span>.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd><span>Flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
@@ -19191,15 +19194,17 @@ included with Exhibit B.
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>main</code> element can be used as a container for the dominant contents of the
-  document. It <span>represents</span> its children.</p>
+  <p>The <code>main</code> element <span>represents</span> the dominant contents of the
+  document.</p>
 
-  <p class="note">The <code>main</code> element is distinct from the <code>section</code> and
-  <code>article</code> elements in that the <code>main</code> element does not contribute to the
-  document <span>outline</span>.</p>
+  <p>A document must not have more than one <code>main</code> element that does not have the <code
+  data-x="attr-hidden">hidden</code> attribute specified.</p>
 
-  <p class="note">While there is no restriction as to the number of <code>main</code> elements in a
-  document, web developers are encouraged to stick to a single element.</p>
+  <p>A <dfn>hierarchically correct <code>main</code> element</dfn> is one whose ancestor elements
+  are limited to <code>html</code>, <code>body</code>, <code>div</code>, <code>form</code> without
+  an <span data-x="concept-accessible-name">accessible name</span>, and <span data-x="autonomous
+  custom element">autonomous custom elements</span>. Each <code>main</code> element must be a
+  <span>hierarchically correct <code>main</code> element</span>.</p>
 
   <div class="example">
 
@@ -19241,6 +19246,35 @@ included with Exhibit B.
 &lt;/footer>
 &lt;/html></pre>
 
+   <p>In the following example, multiple <code>main</code> elements are used and script is used to
+   make navigation work without a server roundtrip and to set the <code
+   data-x="attr-hidden">hidden</code> attribute on those that are not current:
+
+   <pre>&lt;!doctype html>
+&lt;html lang=en-CA>
+&lt;meta charset=utf-8>
+&lt;title> &hellip; &lt;/title>
+&lt;link rel=stylesheet href=spa.css>
+&lt;script src=spa.js async>&lt;/script>
+&lt;nav>
+ &lt;a href=/>Home&lt;/a>
+ &lt;a href=/about>About&lt;/a>
+ &lt;a href=/contact>Contact&lt;/a>
+&lt;/nav>
+&lt;main>
+ &lt;h1>Home&lt;/h1>
+ &hellip;
+&lt;/main>
+&lt;main hidden>
+ &lt;h1>About&lt;/h1>
+ &hellip;
+&lt;/main>
+&lt;main hidden>
+ &lt;h1>Contact&lt;/h1>
+ &hellip;
+&lt;/main>
+&lt;footer>Made with ❤️ by &lt;a href=https://example.com/>Example 👻&lt;/a>.&lt;/footer></pre>
+
   </div>
 
 
@@ -19256,7 +19290,7 @@ included with Exhibit B.
    <dd>As a child of a <code>dl</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>If the element is a child of a <code>dl</code> element: one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
-   <dd>If the element is not a child of a <code>dl</code> element: <span>Flow content</span>.</dd>
+   <dd>If the element is not a child of a <code>dl</code> element: <span>flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
@@ -116450,10 +116484,10 @@ interface <dfn>External</dfn> {
 
     <tr>
      <th><code>main</code></th>
-     <td>Container for the dominant contents of another element</td>
+     <td>Container for the dominant contents of the document</td>
      <td><span data-x="Flow content">flow</span>;
          <span data-x="Palpable content">palpable</span></td>
-     <td><span data-x="Flow content">flow</span></td>
+     <td><span data-x="Flow content">flow</span>*</td>
      <td><span data-x="Flow content">flow</span></td>
      <td><span data-x="global attributes">globals</span></td>
      <td><code>HTMLElement</code></td>
@@ -117336,7 +117370,6 @@ interface <dfn>External</dfn> {
       <code>ins</code>;
       <code>kbd</code>;
       <code>label</code>;
-      <code>main</code>;
       <code>map</code>;
       <code>mark</code>;
       <span>MathML <code>math</code></span>;
@@ -117379,6 +117412,7 @@ interface <dfn>External</dfn> {
      <td>
       <code>area</code> (if it is a descendant of a <code>map</code> element);
       <code>link</code> (if it is <span>allowed in the body</span>);
+      <code>main</code> (if it is a <span>hierarchically correct <code>main</code> element</span>);
       <code>meta</code> (if the <code data-x="attr-itemprop">itemprop</code> attribute is present)
 
     <tr>
@@ -120610,6 +120644,7 @@ INSERT INTERFACES HERE
   Alfred Agrell, <!-- Alcaro on GitHub -->
   Ali Juma,
   Alice Boxhall,
+  Alice Wonder,
   Allan Clements,
   Allen Wirfs-Brock,
   Alex Komoroske,