Skip to content

Restrict the main element to be used once per document #3354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
annevk merged 12 commits into from
Jan 23, 2018
Merged

Restrict the main element to be used once per document #3354

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2c570b9
Restrict the main element to be used once per document
annevk Jan 15, 2018
38465fa
nit
annevk Jan 15, 2018
8f1b75f
only allow main in body/div
annevk Jan 15, 2018
701e6bc
zero or more
annevk Jan 15, 2018
433ec9c
it's actually more complicated
annevk Jan 15, 2018
be4c49d
attempt at defining the restrictions in terms of ancestors (similar t…
annevk Jan 19, 2018
cac0c21
simplify requirement
annevk Jan 19, 2018
8460af5
ack Alice Wonder
annevk Jan 19, 2018
783612c
nits
annevk Jan 19, 2018
0bc0404
tiny nit
annevk Jan 19, 2018
5050f0f
main element ancestors abstraction didn't work on closer inspection
annevk Jan 19, 2018
8200648
add accessible name restrictions to form
annevk Jan 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion images/content-venn.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 changes: 62 additions & 34 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10698,7 +10698,6 @@ 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>map</code></li>
<li><code>mark</code></li>
<li><span>MathML <code>math</code></span></li>
Expand Down Expand Up @@ -11007,7 +11006,6 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<li><code>ins</code></li>
<li><code>kbd</code></li>
<li><code>label</code></li>
<li><code>main</code></li>
<li><code>map</code></li>
<li><code>mark</code></li>
<li><span>MathML <code>math</code></span></li>
Expand Down Expand Up @@ -15142,7 +15140,8 @@ interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>As the second element in an <code>html</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd>Zero or one <code>main</code> element optionally intermixed with <span>flow
Copy link
Member

@foolip foolip Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be zero or more to allow for <main hidden>, right?

content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="handler-window-onafterprint">onafterprint</code></dd>
Expand Down Expand Up @@ -15172,7 +15171,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
Expand Down Expand Up @@ -15552,7 +15551,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>
Expand Down Expand Up @@ -15729,7 +15728,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>
Expand Down Expand Up @@ -16118,7 +16117,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>
Copy link
Member

@foolip foolip Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer "Flow content excluding main" to be expanded in place, treating main more like other elements. Here: "Flow content, but with no header, footer or main element descendants." (unchanged, I think)

Copy link
Member Author

@annevk annevk Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started with that and expected the review feedback to go the other way given that repeating yourself too much is never great. Happy to flip it back though.

Copy link
Member

@foolip foolip Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may well have asked for the opposite if you did, who knows :)

I think the changes will be fewer if we trim the cases where main is disallowed, but let's start with figuring that out, and then inline the changes if the changes are no more than currently.

Expand Down Expand Up @@ -16204,7 +16204,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>
Expand Down Expand Up @@ -16348,9 +16349,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 <span>heading
content</span> descendants, no <span>sectioning content</span>
descendants, and no <code>header</code>, <code>footer</code>, or
<dd><span>Flow content</span>, but with no <span>heading content</span> descendants, no
<span>sectioning content</span> descendants, and no <code>header</code>, <code>footer</code>, or
<code>address</code> element descendants.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
Expand Down Expand Up @@ -18877,7 +18877,8 @@ first matching case):&lt;/p&gt;
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>dl</code> elements.</dd>
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>div</code> elements that are children of a <code>dl</code> element.</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>, <span>sectioning content</span>, or <span>heading content</span> descendants.</dd>
<dd><span>Flow content</span>, but with no <code>header</code>, <code>footer</code>,
<span>sectioning content</span>, or <span>heading content</span> 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>
Expand Down Expand Up @@ -18962,9 +18963,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>
Expand Down Expand Up @@ -19188,24 +19189,21 @@ 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>As a child of a <code>body</code> or <code>div</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Flow content</span>, but with no <code>main</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>
<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 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>The <code>main</code> element <span>represents</span> the dominant contents of the
document.</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 document must not have more than one <code>main</code> element, unless all but one of the
<code>main</code> elements in the document have the <code data-x="attr-hidden">hidden</code>
attribute specified.</p>

<div class="example">

Copy link
Member

@foolip foolip Jan 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, simplified a lot of the other bits. Thanks!

Expand Down Expand Up @@ -19247,6 +19245,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>
Copy link
Member

@foolip foolip Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good example!

&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>


Expand All @@ -19262,7 +19289,8 @@ 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: zero or one <code>main</code>
element optionally intermixed with <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>
Expand Down Expand Up @@ -115902,7 +115930,8 @@ interface <dfn>External</dfn> {
<td>Document body</td>
<td><span data-x="Sectioning root">sectioning root</span></td>
<td><code>html</code></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="Flow content">flow</span>;
<code>main</code>*</td>
<td><span data-x="global attributes">globals</span>;
<code data-x="handler-window-onafterprint">onafterprint</code>;
<code data-x="handler-window-onbeforeprint">onbeforeprint</code>;
Expand Down Expand Up @@ -116130,7 +116159,8 @@ interface <dfn>External</dfn> {
<span data-x="Palpable content">palpable</span></td>
<td><span data-x="Flow content">flow</span>;
<code>dl</code></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="Flow content">flow</span>;
<code>main</code>*</td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLDivElement</code></td>
</tr>
Expand Down Expand Up @@ -116530,10 +116560,10 @@ interface <dfn>External</dfn> {

<tr>
<th><code>main</code></th>
<td>Container for the dominant contents of another element</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>Container for the dominant contents of the document</td>
<td>none</td>
<td><code>body</code>;
<code>div</code></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
Expand Down Expand Up @@ -117416,7 +117446,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>;
Expand Down Expand Up @@ -117696,7 +117725,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>;
Expand Down