Permalink
Browse files

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.
  • Loading branch information...
annevk committed Jan 23, 2018
1 parent ad4ddd8 commit 1dec930b3df93c799d5f3f685a46940913476086
Showing with 57 additions and 22 deletions.
  1. +1 −1 images/content-venn.svg
  2. +56 −21 source
@@ -69,7 +69,7 @@
<li><code>keygen</code></li>
<li><code>label</code></li>
<li><code>link</code>*</li>
<li><code>main</code></li>
<li><code>main</code>*</li>
<li><code>map</code></li>
<li><code>mark</code></li>
<li><code>math</code></li>
77 source
@@ -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,

0 comments on commit 1dec930

Please sign in to comment.