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 all 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
2 changes: 1 addition & 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.
77 changes: 56 additions & 21 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10698,7 +10698,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>
Expand Down Expand Up @@ -15172,7 +15172,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
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.

To be clear, this is a change that could have been made without the other changes in this PR, right? This was inaccurate before as well, since headers and footers could also be inside the body. If that's not the right way to think of it, I might be missing something that I should be paying attention to elsewhere in these changes.

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.

Yeah, I haven't actually looked at when this was written, but that seems correct.

Copy link
Member Author

@annevk annevk Jan 15, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

It seems this description of the body element goes back to 2006, before the main element was introduced.

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.

Thanks for checking that.

Expand Down Expand Up @@ -15552,7 +15552,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 +15729,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 +16118,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 @@ -16204,7 +16205,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 @@ -18962,9 +18964,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,7 +19190,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>
Expand All @@ -19197,15 +19200,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
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!

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

Expand Down Expand Up @@ -19247,6 +19252,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>
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;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>


Expand All @@ -19262,7 +19296,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>
Expand Down Expand Up @@ -116530,10 +116564,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>
Expand Down Expand Up @@ -117416,7 +117450,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 @@ -117459,6 +117492,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>
Expand Down Expand Up @@ -120690,6 +120724,7 @@ INSERT INTERFACES HERE
Alfred Agrell, <!-- Alcaro on GitHub -->
Ali Juma,
Alice Boxhall,
Alice Wonder,
Allan Clements,
Allen Wirfs-Brock,
Alex Komoroske,
Expand Down