From fdc8d4b020b5ce2cdde12c2c31cc692e0a1084c5 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Fri, 23 Feb 2018 11:30:29 +0100
Subject: [PATCH 1/5] Add heading-focused outlines and :heading

This makes a number of fairly big changes:

* Introduces a heading and heading level concept.
* Replaces the outline algorithm with a document headings concept.
* Requires document headings to not skip heading levels and start
  with heading level 1.
* Introduces a :heading pseudo-class selector.
* Introduces a :heading(level) functional pseudo-class selector.
* Does away with the section concept (except insofar it's needed to
  influence the heading level of h1/hgroup).
* Does away with sectioning roots.

Tests: ...

Fixes #83.
---
 source | 928 ++++++++++-----------------------------------------------
 1 file changed, 153 insertions(+), 775 deletions(-)

diff --git a/source b/source
index 5f6f05ad1cf..611f5e18e6a 100644
--- a/source
+++ b/source
@@ -2367,15 +2367,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <dt>Data mining tools</dt>
 
    <dd id="data-mining">
-
     <p>Applications and tools that process HTML and XML documents for reasons other than to either
     render the documents or check them for conformance should act in accordance with the semantics
     of the documents that they process.</p>
 
-    <p class="example">A tool that generates <span data-x="outline">document outlines</span> but
-    increases the nesting level for each paragraph and does not increase the nesting level for each
-    section would not be conforming.</p>
-
+    <p class="example">A tool that generates document outlines but increases the nesting level for
+    each paragraph and does not increase the nesting level for <span
+    data-x="concept-heading">headings</span> would not be conforming.</p>
    </dd>
 
 
@@ -3871,6 +3869,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     spec=CSSVALUES></p>
 
     <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-values-3/#integer-value">&lt;integer></dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-values/#lengths">&lt;length></dfn></li>
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-values/#em">'em'</dfn> unit</li>
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-values/#ex">'ex'</dfn> unit</li>
@@ -10959,7 +10958,8 @@ console.assert(image.height === 200);</code></pre>
   <h6>Sectioning content</h6>
 
   <p><dfn>Sectioning content</dfn> is content that defines the scope of <span data-x="heading
-  content">headings</span> and <span data-x="footer">footers</span>.</p>
+  content">headings</span> and <span data-x="footer">footers</span>, and determines the
+  <span>heading level</span> of <code>h1</code> and <code>hgroup</code> elements.</p>
 
   <!-- when updating this also update the category index -->
   <ul class="brief category-list">
@@ -10969,13 +10969,7 @@ console.assert(image.height === 200);</code></pre>
    <li><code>section</code></li>
   </ul>
 
-  <p>Each <span>sectioning content</span> element potentially has a heading and an
-  <span>outline</span>. See the section on <span>headings and sections</span> for further
-  details.</p>
-
-  <p class="note">There are also certain elements that are <span data-x="sectioning root">sectioning
-  roots</span>. These are distinct from <span>sectioning content</span>, but they can also have an
-  <span>outline</span>.</p>
+  <p>See the section on <span>headings and sections</span> for further details.</p>
 
 
   <h6>Heading content</h6>
@@ -15462,7 +15456,7 @@ interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd><span>Sectioning root</span>.</dd>
+   <dd>None.</dd>
    <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>
@@ -15735,8 +15729,8 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
   <p class="note" id="use-div-for-wrappers">The <code>section</code> element is not a generic
   container element. When an element is needed only for styling purposes or as a convenience for
   scripting, authors are encouraged to use the <code>div</code> element instead. A general rule is
-  that the <code>section</code> element is appropriate only if the element's contents would be
-  listed explicitly in the document's <span>outline</span>.</p>
+  that the <code>section</code> element is appropriate when used in conjunction with a <span
+  data-x="concept-heading">heading</span>.</p>
 
   <div class="example">
 
@@ -16215,19 +16209,12 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd w-dev>Uses <code>HTMLHeadingElement</code>.</dd>
   </dl>
 
-  <p>These elements <span data-x="represents">represent</span> headings for their sections.</p>
-
   <p>The semantics and meaning of these elements are defined in the section on <span>headings and
   sections</span>.</p>
 
-  <p>These elements have a <dfn>rank</dfn> given by the number in their name. The <code>h1</code>
-  element is said to have the highest rank, the <code>h6</code> element has the lowest rank, and two
-  elements with the same name have equal rank.</p>
-
   <div class="example">
-
-   <p>As far as their respective document outlines (their heading and section structures) are
-   concerned, these two snippets are semantically equivalent:</p>
+   <p>As far as their respective <span data-x="heading level">heading levels</span> are concerned,
+   these two snippets are semantically equivalent:</p>
 
    <pre><code class="html" data-x="">&lt;body>
 &lt;h1>Let's call it a draw(ing surface)&lt;/h1>
@@ -16263,7 +16250,7 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <p>The two styles can be combined, for compatibility with legacy tools while still
    future-proofing for when that compatibility is no longer needed. This third snippet again has the
-   same outline as the previous two:</p>
+   same <span data-x="heading level">heading levels</span> as the previous two:</p>
 
    <pre><code class="html" data-x="">&lt;body>
  &lt;h1>Let's call it a draw(ing surface)&lt;/h1>
@@ -16283,12 +16270,10 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   &lt;h2>Paths&lt;/h2>
  &lt;/section>
 &lt;/body></code></pre>
-
   </div>
 
 
 
-
   <h4>The <dfn><code>hgroup</code></dfn> element</h4>
 
   <dl class="element">
@@ -16308,24 +16293,15 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>hgroup</code> element <span>represents</span> the heading of a section, which
-  consists of all the <code>h1</code>&ndash;<code>h6</code> element children of the
-  <code>hgroup</code> element. The element is used to group a set of
-  <code>h1</code>&ndash;<code>h6</code> elements when the heading has multiple levels, such as
-  subheadings, alternative titles, or taglines.</p>
+  <p>The <code>hgroup</code> element can be used to group a set of
+  <code>h1</code>&ndash;<code>h6</code> elements for a <span
+  data-x="concept-heading">heading</span> that has multiple levels, such as subheadings, alternative
+  titles, or taglines.</p>
 
-  <p>The <span>rank</span> of an <code>hgroup</code> element is the rank of the highest-ranked
-  <code>h1</code>&ndash;<code>h6</code> element descendant of the <code>hgroup</code> element, if
-  there are any such elements, or otherwise the same as for an <code>h1</code> element (the highest
-  rank). Other <code>h1</code>&ndash;<code>h6</code> elements of <span>heading content</span> in the
-  <code>hgroup</code> element indicate subheadings or subtitles or (secondary) alternative
-  titles.</p>
-
-  <p>The section on <span>headings and sections</span> defines how <code>hgroup</code> elements are
-  assigned to individual sections.</p>
+  <p>The remainder of the semantics and meaning of the <code>hgroup</code> element, including what
+  it <span>represents</span>, are defined in the section on <span>headings and sections</span>.</p>
 
   <div class="example">
-
    <p>Here are some examples of valid headings.</p>
 
     <pre><code class="html" data-x="">&lt;hgroup&gt;
@@ -16339,13 +16315,10 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;/hgroup&gt;</code></pre>
 
    <p>The point of using <code>hgroup</code> in these examples is to prevent the <code>h2</code>
-   element (which acts as a secondary title) from creating a separate section of its own in any
-   <span>outline</span> and to instead cause the contents of the <code>h2</code> to be shown in
-   rendered output from the <span>outline</span> algorithm in some way to indicate that it is not
-   the title of a separate section but instead just a secondary title in a group of titles.</p>
-   <!-- http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895 -->
+   element (which acts as a secondary title) from creating a separate heading of its own.</p>
+   <!-- https://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895 -->
 
-   <p>How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of
+   <p>How a user agent exposes such multi-level headings in user interfaces (e.g., in tables of
    contents or search results) is left open to implementers, as it is a user interface issue. The
    first example above could be rendered as:</p>
 
@@ -16360,7 +16333,6 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <pre>The reality dysfunction
 Space is not the only void</pre>
-
   </div>
 
   <div class="example">
@@ -16387,20 +16359,17 @@ Space is not the only void</pre>
    two titles indicates that the titles are not equivalent; instead the first <code>h1</code> gives
    the (primary) title while the second gives the (secondary) alternative title. Even though both
    the title and alternative title are marked up with <code>h1</code> elements, in a rendered view
-   of output from the <span>outline</span> algorithm, the second <code>h1</code> in the
-   <code>hgroup</code> will be shown in some way that clearly indicates it is secondary; for
-   example:
+   the second <code>h1</code> in the <code>hgroup</code> will likely be shown in some way that
+   clearly indicates it is secondary; for example:
 
    <p>In a US publication:</p>
    <pre>The Avengers (Avengers Assemble)</pre>
 
    <p>In a UK publication:</p>
    <pre>Avengers Assemble (The Avengers)</pre>
-
   </div>
 
   <div class="example">
-
    <p>In the following example, an <code>hgroup</code> element is used to mark up a two-level
    heading in a wizard-style dialog box:</p>
 
@@ -16430,7 +16399,6 @@ Space is not the only void</pre>
   &lt;button type=submit value="next"> Next &#x2192; &lt;/button>
  &lt;/form>
 &lt;/dialog></code></pre>
-
   </div>
 
 
@@ -16487,16 +16455,10 @@ Space is not the only void</pre>
 
   </div>
 
-  <p class="note">The <code>header</code> element is not <span>sectioning content</span>; it doesn't
-  introduce a new section.</p>
+  <p class="note">The <code>header</code> element is not <span>sectioning content</span>.</p>
 
   <div class="example">
-
-  <p>In this example, the page has a page heading given by the <code>h1</code> element, and two
-  subsections whose headings are given by <code>h2</code> elements. The content after the
-  <code>header</code> element is still part of the last subsection started in the
-  <code>header</code> element, because the <code>header</code> element doesn't take part in the
-  <span>outline</span> algorithm.</p>
+   <p>Another example header for a game:</p>
 
    <pre><code class="html" data-x="">&lt;body>
  &lt;header>
@@ -16508,15 +16470,12 @@ Space is not the only void</pre>
     &lt;li>&lt;a href="/download">Download&lt;/a>
    &lt;/ul>
   &lt;/nav>
-  &lt;h2>Important News&lt;/h2> &lt;!-- this starts a second subsection -->
-  &lt;!-- this is part of the subsection entitled "Important News" -->
+  &lt;h2>Important News&lt;/h2>
   &lt;p>To play today's games you will need to update your client.&lt;/p>
-  &lt;h2>Games&lt;/h2> &lt;!-- this starts a third subsection -->
+  &lt;h2>Games&lt;/h2>
  &lt;/header>
  &lt;p>You have three active games:&lt;/p>
- &lt;!-- this is still part of the subsection entitled "Games" -->
  ...</code></pre>
-
   </div>
 
 
@@ -16540,9 +16499,9 @@ Space is not the only void</pre>
   </dl>
 
   <p>The <code>footer</code> element <span>represents</span> a footer for its nearest ancestor
-  <span>sectioning content</span> or <span>sectioning root</span> element. A footer typically
-  contains information about its section such as who wrote it, links to related documents, copyright
-  data, and the like.</p>
+  <span>sectioning content</span> or <code>body</code> element. A footer typically contains
+  information about its section, such as who wrote it, links to related documents, copyright data,
+  and the like.</p>
 
   <p>When the <code>footer</code> element contains entire sections, they <span
   data-x="represents">represent</span> appendices, indexes, long colophons, verbose license
@@ -16558,8 +16517,8 @@ Space is not the only void</pre>
   <p>Footers don't necessarily have to appear at the <em>end</em> of a section, though they usually
   do.</p>
 
-  <p>When the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
-  element is <span>the body element</span>, then it applies to the whole page.</p>
+  <p>When the nearest ancestor <span>sectioning content</span> or <code>body</code> element is
+  <span>the body element</span>, then it applies to the whole page.</p>
 
   <p class="note">The <code>footer</code> element is not <span>sectioning content</span>; it doesn't
   introduce a new section.</p>
@@ -16787,86 +16746,70 @@ Space is not the only void</pre>
 
   <h4><dfn>Headings and sections</dfn></h4>
 
-  <p>The <code>h1</code>&ndash;<code>h6</code> elements and the <code>hgroup</code> element are
-  headings.</p>
+  <p><span>Heading content</span> elements have a <dfn>heading level</dfn>, which is either null or
+  an unsigned integer. It is determined as follows for a given <span>heading content</span> element
+  <var>heading</var>:</p>
 
-  <p>The first element of <span>heading content</span> in an element of <span>sectioning
-  content</span> <span>represents</span> the heading for that section. Subsequent headings of equal
-  or higher <span>rank</span> start new (implied) sections, headings of lower <span>rank</span>
-  start implied subsections that are part of the previous one. In both cases, the element
-  <span>represents</span> the heading of the implied section.</p>
+  <ol>
+   <li><p>If <var>heading</var> has a parent <code>hgroup</code> element, then return null.</p></li>
 
-  <p>Certain elements are said to be <dfn data-x="sectioning root">sectioning roots</dfn>, including
-  <code>blockquote</code> and <code>td</code> elements. These elements can have their own outlines,
-  but the sections and headings inside these elements do not contribute to the outlines of their
-  ancestors.</p>
+   <li>
+    <p>Switch on <var>heading</var>:</p>
 
-  <!-- when updating this also update the category index -->
-  <ul class="brief category-list">
-   <li><code>blockquote</code></li>
-   <li><code>body</code></li>
-   <li><code>details</code></li>
-   <li><code>dialog</code></li>
-   <li><code>fieldset</code></li>
-   <li><code>figure</code></li>
-   <li><code>td</code></li>
-  </ul>
+    <dl class="switch">
+     <dt><code>h2</code></dt>
+     <dd>Return 2.</dd>
 
-  <!-- a document element isn't a sectioning root. This means, for instance, that you don't get an
-  outline if you just have a random XML file with <html:h1> elements in it. Other vocabs need to
-  define what their sectioning root is. -->
+     <dt><code>h3</code></dt>
+     <dd>Return 3.</dd>
 
-  <p><span>Sectioning content</span> elements are always considered subsections of their nearest
-  ancestor <span>sectioning root</span> or their nearest ancestor element of <span>sectioning
-  content</span>, whichever is nearest, regardless of what implied sections other headings may have
-  created.</p>
+     <dt><code>h4</code></dt>
+     <dd>Return 4.</dd>
+
+     <dt><code>h5</code></dt>
+     <dd>Return 5.</dd>
+
+     <dt><code>h6</code></dt>
+     <dd>Return 6.</dd>
+    </dl>
+   </li>
+
+   <li><p>Return the number of ancestor <span>sectioning content</span> elements + 1.</p></li>
+  </ol>
+
+  <p>A <span>heading content</span> element whose <span>heading level</span> is non-null
+  <span>represents</span> a <dfn data-x="concept-heading">heading</dfn>. The lower a <span
+  data-x="concept-heading">heading</span>'s <span>heading level</span> is, the more important the
+  <span data-x="concept-heading">heading</span> is.</p>
+
+  <p class="note">I.e., <span data-x="concept-heading">headings</span> are <span>heading
+  content</span> elements whose parent is not an <code>hgroup</code> element.</p>
+
+  <p>The <dfn>document headings</dfn> are all <span data-x="concept-heading">headings</span> in a
+  document, in <span>tree order</span>.</p>
+
+  <div w-nodev>
+
+  <p>The <span>document headings</span> must be used for generating document outlines, for
+  example when generating tables of contents. When creating an interactive table of contents,
+  entries should jump the user to the relevant <span data-x="concept-heading">heading</span>.</p>
 
-  <div class="example">
-   <p>For the following fragment:</p>
-   <pre><code class="html" data-x="">&lt;body&gt;
- &lt;h1&gt;Foo&lt;/h1&gt;
- &lt;h2&gt;Bar&lt;/h2&gt;
- &lt;blockquote&gt;
-  &lt;h3&gt;Bla&lt;/h3&gt;
- &lt;/blockquote&gt;
- &lt;p&gt;Baz&lt;/p&gt;
- &lt;h2&gt;Quux&lt;/h2&gt;
- &lt;section&gt;
-  &lt;h3&gt;Thud&lt;/h3&gt;
- &lt;/section&gt;
- &lt;p&gt;Grunt&lt;/p&gt;
-&lt;/body&gt;</code></pre>
-   <p>...the structure would be:</p>
-   <ol>
-    <li>
-     Foo (heading of explicit <code>body</code> section, containing the "Grunt" paragraph)
-     <ol>
-      <li>
-       Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
-      </li>
-      <li>
-       Quux (heading starting implied section with no content other than the heading itself)
-      </li>
-      <li>
-       Thud (heading of explicit <code>section</code> section)
-      </li>
-     </ol>
-    </li>
-   </ol>
-   <p>Notice how the <code>section</code> ends the earlier implicit section so that a later
-   paragraph ("Grunt") is back at the top level.</p>
   </div>
 
-  <p>Sections may contain headings of any <span>rank</span>, but authors are strongly encouraged to
-  either use only <code>h1</code> elements, or to use elements of the appropriate <span>rank</span>
-  for the section's nesting level.</p>
+  <p>At least a single <span data-x="concept-heading">heading</span> within <span>document
+  headings</span> must have a <span>heading level</span> of 1.</p>
+
+  <p>Each <span data-x="concept-heading">heading</span> following another <span
+  data-x="concept-heading">heading</span> <var>lead</var> in <span>document headings</span> must
+  have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
+  <span>heading level</span>.</p>
 
-  <p>Authors are also encouraged to explicitly wrap sections in elements of <span>sectioning
-  content</span>, instead of relying on the implicit sections generated by having multiple headings
-  in one element of <span>sectioning content</span>.</p>
+  <p>Authors are encouraged to avoid a <span>sectioning content</span> element <var>section</var>
+  without a <span data-x="concept-heading">heading</span> descendant whose nearest ancestor
+  <span>sectioning content</span> element is not <var>section</var>.</p>
 
   <div class="example">
-   <p>For example, the following is correct:</p>
+   <p>The following example is non-conforming:</p>
 
    <pre><code class="html" data-x="">&lt;body&gt;
  &lt;h4&gt;Apples&lt;/h4&gt;
@@ -16874,14 +16817,10 @@ Space is not the only void</pre>
  &lt;section&gt;
   &lt;h2&gt;Taste&lt;/h2&gt;
   &lt;p&gt;They taste lovely.&lt;/p&gt;
-  &lt;h6&gt;Sweet&lt;/h6&gt;
-  &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
-  &lt;h1&gt;Color&lt;/h1&gt;
-  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/body&gt;</code></pre>
 
-   <p>However, the same document would be more clearly expressed as:</p>
+   <p>It could be written as follows and then it would be conforming:</p>
 
    <pre><code class="html" data-x="">&lt;body&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
@@ -16889,22 +16828,12 @@ Space is not the only void</pre>
  &lt;section&gt;
   &lt;h2&gt;Taste&lt;/h2&gt;
   &lt;p&gt;They taste lovely.&lt;/p&gt;
-  &lt;section&gt;
-   &lt;h3&gt;Sweet&lt;/h3&gt;
-   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
-  &lt;/section&gt;
- &lt;/section&gt;
- &lt;section&gt;
-  &lt;h2&gt;Color&lt;/h2&gt;
-  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/body&gt;</code></pre>
 
-   <p>Both of the documents above are semantically identical and would produce the same outline in
-   compliant user agents.</p>
-
-   <p>This third example is also semantically identical, and might be easier to maintain (e.g. if
-   sections are often moved around in editing):</p>
+   <p>It could also be written as follows, and this might be preferable if the sections move around
+   a lot, as the <span>heading level</span> of <code>h1</code> elements depends on the number of
+   ancestor <span>sectioning content</span> elements:</p>
 
    <pre><code class="html" data-x="">&lt;body&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
@@ -16912,51 +16841,12 @@ Space is not the only void</pre>
  &lt;section&gt;
   &lt;h1&gt;Taste&lt;/h1&gt;
   &lt;p&gt;They taste lovely.&lt;/p&gt;
-  &lt;section&gt;
-   &lt;h1&gt;Sweet&lt;/h1&gt;
-   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
-  &lt;/section&gt;
- &lt;/section&gt;
- &lt;section&gt;
-  &lt;h1&gt;Color&lt;/h1&gt;
-  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/body&gt;</code></pre>
 
-   <p>This final example would need explicit style rules to be rendered well in legacy browsers.
-   Legacy browsers without CSS support would render all the headings as top-level headings.</p>
-
-  </div>
-
-
-  <h5 id="outlines">Creating an outline</h5>
-
-  <div w-nodev>
-
-  <!-- v2 idea: It would be nice if there was a way to use this to autogenerate a table of contents
-  or some such -->
-
-  <p>This section defines an algorithm for creating an outline for a <span>sectioning content</span>
-  element or a <span>sectioning root</span> element. It is defined in terms of a walk over the nodes
-  of a DOM tree, in <span>tree order</span>, with each node being visited when it is <i>entered</i> and when it
-  is <i>exited</i> during the walk.</p>
-
   </div>
 
-  <p>The <dfn>outline</dfn> for a <span>sectioning content</span> element or a <span>sectioning
-  root</span> element consists of a list of one or more potentially nested <span
-  data-x="concept-section">sections</span>. The element for which an <span>outline</span> is created
-  is said to be <dfn>the outline's owner</dfn>.</p>
-
-  <p>A <dfn data-x="concept-section">section</dfn> is a container that corresponds to some nodes in
-  the original DOM tree. Each section can have one heading associated with it, and can contain any
-  number of further nested sections. <span w-nodev>The algorithm for the outline also
-  associates each node in the DOM tree with a particular section and potentially a heading.</span>
-  (The sections in the outline aren't <code>section</code> elements, though some may correspond to
-  such elements &mdash; they are merely conceptual sections.)</p>
-
   <div class="example">
-
    <p>The following markup fragment:</p>
 
    <pre><code class="html" data-x="">&lt;body>
@@ -16971,418 +16861,27 @@ Space is not the only void</pre>
   &lt;p>Some intro to the first section.&lt;/p>
 &lt;/body></code></pre>
 
-   <p>...results in the following outline being created for the <code>body</code> node (and thus the
-   entire document):</p>
+   <p>...results in 3 <span>document headings</span>:</p>
 
    <ol class="brief">
-    <li>
-     <p><strong>Section created for <code>body</code> node</strong>.</p>
-     <p>Associated with heading <code data-x="">&lt;hgroup
-     id="document-title">...&lt;/hgroup></code> consisting of primary heading <code
-     data-x="">&lt;h1>HTML&lt;/h1></code> and secondary heading <code data-x="">&lt;h2>Living
-     Standard — Last Updated 12 August 2016&lt;/h2></code>.</p>
-     <p>Also associated with the paragraph <code data-x="">&lt;p>Some intro to the
-     document.&lt;/p></code> (though it likely would not be shown in a rendered view of the
-     outline).</p>
-     <p>Nested sections:</p>
-     <ol class="brief">
-      <li>
-       <p><strong>Section implied for first <code>h2</code> element.</strong></p>
-       <p>Associated with heading <code data-x="">&lt;h2>Table of contents&lt;/h2></code>.</p>
-       <p>Also associated with the ordered list <code data-x="">&lt;ol id=toc>...&lt;/ol></code>
-       (though it likely would not be shown in a rendered view of the outline).</p>
-       <p>No nested sections.</p>
-      </li>
-      <li>
-       <p><strong>Section implied for second <code>h2</code> element.</strong></p>
-       <p>Associated with heading <code data-x="">&lt;h2>First section&lt;/h2></code>.</p>
-       <p>Also associated with the paragraph <code data-x="">&lt;p>Some intro to the first
-       section.&lt;/p></code> (though it likely would not be shown in a rendered view of the
-       outline).</p>
-       <p>No nested sections.</p>
-      </li>
-     </ol>
-    </li>
+    <li><p><code data-x="">&lt;hgroup id="document-title">...&lt;/hgroup></code> consisting of <code
+    data-x="">&lt;h1>HTML&lt;/h1></code> and <code
+    data-x="">&lt;h2>Living Standard — Last Updated 12 August 2016&lt;/h2></code>.</p></li>
+
+    <li><p><code data-x="">&lt;h2>Table of contents&lt;/h2></code>.</p></li>
+
+    <li><p><code data-x="">&lt;h2>First section&lt;/h2></code>.</p></li>
    </ol>
 
-   <p>The following image shows what a rendered view of the outline might look like.</p>
+   <p>A rendered view of the <span>document headings</span> might look like:</p>
 
    <p><img src="/images/outline.svg" width="465" height="120" alt="Top-level section with the
    multi-level heading &quot;HTML: Living Standard — Last Updated 12 August 2016&quot; and two
    subsections; &quot;Table of contents&quot; and &quot;First section&quot;."></p>
   </div>
 
-  <div w-nodev>
-
-  <p>The algorithm that must be followed during a walk of a DOM subtree rooted at a <span>sectioning
-  content</span> element or a <span>sectioning root</span> element to determine that element's
-  <span>outline</span> is as follows:</p>
-
-  <ol>
-
-   <li><p>Let <var>current outline target</var> be null. (It holds the element whose
-   <span>outline</span> is being created.)</p></li>
-
-   <li><p>Let <var>current section</var> be null. (It holds a pointer to a <span
-   data-x="concept-section">section</span>, so that elements in the DOM can all be associated with a
-   section.)</p></li>
-
-   <li><p>Create a stack to hold elements, which is used to handle nesting. Initialize this stack to
-   empty.</p></li>
-
-   <li>
-
-    <p>Walk over the DOM in <span>tree order</span>, starting with the <span>sectioning
-    content</span> element or <span>sectioning root</span> element at the root of the subtree for
-    which an outline is to be created, and trigger the first relevant step below for each element as
-    the walk enters and exits it.</p>
-
-    <dl class="switch">
-
-     <dt>When exiting an element, if that element is the element at the top of the stack</dt>
-
-     <dd>
-
-      <p class="note">The element being exited is a <span>heading content</span> element or an
-      element with a <code data-x="attr-hidden">hidden</code> attribute.</p>
-
-      <p>Pop that element from the stack.</p>
-
-     </dd>
-
-
-     <dt>If the top of the stack is a <span>heading content</span> element or an element with a
-     <code data-x="attr-hidden">hidden</code> attribute</dt>
-
-     <dd><p>Do nothing.</p></dd>
-
-
-     <dt>When entering an element with a <code data-x="attr-hidden">hidden</code> attribute</dt>
-
-     <dd>
-
-      <p>Push the element being entered onto the stack. (This causes the algorithm to skip that
-      element and any descendants of the element.)</p>
-
-     </dd>
-
-
-     <dt>When entering a <span>sectioning content</span> element</dt>
-
-     <dd>
-
-      <p>Run these steps:</p>
-
-      <ol>
-
-       <li>
-
-        <p>If <var>current outline target</var> is not null, then:</p>
-
-        <ol>
-
-         <li><p>If the <var>current section</var> has no heading, create an implied
-         heading and let that be the heading for the <var>current section</var>.</p></li>
-
-         <li><p>Push <var>current outline target</var> onto the stack.</p></li>
-
-        </ol>
-
-       </li>
-
-       <li><p>Let <var>current outline target</var> be the element that is being
-       entered.</p></li>
-
-       <li><p>Let <var>current section</var> be a newly created <span
-       data-x="concept-section">section</span> for the <var>current outline target</var>
-       element.</p></li>
-
-       <li><p>Associate <var>current outline target</var> with <var>current
-       section</var>.</p></li>
-
-       <li><p>Let there be a new <span>outline</span> for the new <var>current outline
-       target</var>, initialized with just the new <var>current section</var> as the only
-       <span data-x="concept-section">section</span> in the outline.</p></li>
-
-      </ol>
-
-     </dd>
-
-
-     <dt>When exiting a <span>sectioning content</span> element, if the stack is not empty</dt>
-
-     <dd>
-
-      <p>Run these steps:</p>
-
-      <ol>
-
-       <li><p>If the <var>current section</var> has no heading, create an implied heading
-       and let that be the heading for the <var>current section</var>.</p></li>
-
-       <li><p>Pop the top element from the stack, and let the <var>current outline
-       target</var> be that element.</p></li>
-
-       <li><p>Let <var>current section</var> be the last section in the
-       <span>outline</span> of the <var>current outline target</var> element.</p></li>
-
-       <li><p>Append the <span>outline</span> of the <span>sectioning content</span> element being
-       exited to the <var>current section</var>. (This does not change which section is
-       the last section in the <span>outline</span>.)</p></li>
-
-      </ol>
-
-     </dd>
-
-
-     <dt>When entering a <span>sectioning root</span> element</dt>
-
-     <dd>
-
-      <p>Run these steps:</p>
-
-      <ol>
-
-       <li><p>If <var>current outline target</var> is not null, push <var>current outline target</var> onto the stack.</p></li>
-
-       <li><p>Let <var>current outline target</var> be the element that is being
-       entered.</p></li>
-
-       <li><p>Let <var>current outline target</var>'s <i>parent section</i> be <var>current section</var>.</p></li>
-
-       <li><p>Let <var>current section</var> be a newly created <span
-       data-x="concept-section">section</span> for the <var>current outline target</var>
-       element.</p></li>
-
-       <li><p>Let there be a new <span>outline</span> for the new <var>current outline
-       target</var>, initialized with just the new <var>current section</var> as the only
-       <span data-x="concept-section">section</span> in the outline.</p></li>
-
-      </ol>
-
-     </dd>
-
-
-     <dt>When exiting a <span>sectioning root</span> element, if the stack is not empty</dt>
-
-     <dd>
-
-      <p>Run these steps:</p>
-
-      <ol>
-
-       <li><p>If the <var>current section</var> has no heading, create an implied heading
-       and let that be the heading for the <var>current section</var>.</p></li>
-
-       <li><p>Let <var>current section</var> be <var>current outline
-       target</var>'s <i>parent section</i>.</p></li>
-
-       <li><p>Pop the top element from the stack, and let the <var>current outline
-       target</var> be that element.</p></li>
-
-      </ol>
-
-     </dd>
-
-
-     <dt>When exiting a <span>sectioning content</span> element or a <span>sectioning root</span>
-     element (when the stack is empty)</dt>
-
-     <dd>
-
-      <p class="note">The <var>current outline target</var> is the element being exited,
-      and it is the <span>sectioning content</span> element or a <span>sectioning root</span>
-      element at the root of the subtree for which an outline is being generated.</p>
-
-      <p>If the <var>current section</var> has no heading, create an implied heading and
-      let that be the heading for the <var>current section</var>.</p>
-
-      <p>Skip to the next step in the overall set of steps. (The walk is over.)</p>
-
-     </dd>
-
-
-     <dt>When entering a <span>heading content</span> element</dt>
-
-     <dd>
-
-      <p>If the <var>current section</var> has no heading, let the element being entered be
-      the heading for the <var>current section</var>.</p>
-
-      <p class="note">If the element being entered is an <code>hgroup</code> element, that
-      <code>hgroup</code> as a whole is a <em>multi-level</em> heading for the <var>current
-      section</var>, with the highest-<span data-x="rank">ranked</span>
-      <code>h1</code>&ndash;<code>h6</code> descendant of the <code>hgroup</code> providing the
-      primary heading for the <var>current section</var>, and with other
-      <code>h1</code>&ndash;<code>h6</code> descendants of the <code>hgroup</code> providing
-      secondary headings for the <var>current section</var>.</p>
-
-      <p>Otherwise, if the element being entered has a <span>rank</span> equal to or higher than the
-      heading of the last section of the <span>outline</span> of the <var>current outline
-      target</var>, or if the heading of the last section of the <span>outline</span> of the <var>current outline target</var> is an implied heading, then create a new <span
-      data-x="concept-section">section</span> and append it to the <span>outline</span> of the <var>current outline target</var> element, so that this new section is the new last
-      section of that outline. Let <var>current section</var> be that new section. Let the
-      element being entered be the new heading for the <var>current section</var>.</p>
-
-      <p>Otherwise, run these substeps:</p>
-
-      <ol>
-
-       <li><p>Let <var>candidate section</var> be <var>current
-       section</var>.</p></li>
-
-       <li><p><i>Heading loop</i>: If the element being entered has a <span>rank</span> lower than
-       the <span>rank</span> of the heading of the <var>candidate section</var><!-- the
-       first time through, it won't be, but maybe on a subsequent pass it is -->, then create a new
-       <span data-x="concept-section">section</span>, and append it to <var>candidate
-       section</var>. (This does not change which section is the last section in the outline.) Let
-       <var>current section</var> be this new section. Let the element being entered be the
-       new heading for the <var>current section</var>. Abort these substeps.</p>
-
-       <li><p>Let <var>new candidate section</var> be the <span
-       data-x="concept-section">section</span> that contains <var>candidate section</var> in
-       the <span>outline</span> of <var>current outline target</var>.</p></li>
-
-       <li><p>Let <var>candidate section</var> be <var>new candidate
-       section</var>.</p></li>
-
-       <li><p>Return to the step labeled <i>heading loop</i>.</p></li>
-
-      </ol>
-
-      <p>Push the element being entered onto the stack. (This causes the algorithm to skip any
-      descendants of the element.)</p>
-
-      <p class="note">Recall that <code>h1</code> has the <em>highest</em> rank, and <code>h6</code>
-      has the lowest rank.</p>
-
-     </dd>
-
-
-     <dt>Otherwise</dt>
-
-     <dd><p>Do nothing.</p></dd>
-
-    </dl>
-
-    <p id="associatedSection">In addition, whenever the walk exits a node, after doing the steps
-    above, if the node is not associated with a <span data-x="concept-section">section</span> yet,
-    associate the node with the <span data-x="concept-section">section</span> <var>current
-    section</var>.</p>
-
-   </li>
-
-   <li><p>Associate all non-element nodes that are in the subtree for which an outline is being
-   created with the <span data-x="concept-section">section</span> with which their parent element is
-   associated.</p></li>
-
-   <li><p>Associate all nodes in the subtree with the heading of the <span
-   data-x="concept-section">section</span> with which they are associated, if any.</p></li>
-
-  </ol>
-
-  <p>The tree of sections created by the algorithm above, or a proper subset thereof, must be used
-  when generating document outlines, for example when generating tables of contents.</p>
-
-  <p>The outline created for <span>the body element</span> of a <code>Document</code> is the
-  <span>outline</span> of the entire document.</p>
-
-  <p>When creating an interactive table of contents, entries should jump the user to the relevant
-  <span>sectioning content</span> element, if the <span data-x="concept-section">section</span> was
-  created for a real element in the original document, or to the relevant <span>heading
-  content</span> element, if the <span data-x="concept-section">section</span> in the tree was
-  generated for a heading in the above process.</p>
-
-  <p class="note">Selecting the first <span data-x="concept-section">section</span> of the document
-  therefore always takes the user to the top of the document, regardless of where the first heading
-  in the <code>body</code> is to be found.</p>
-
-  <p>The <dfn>outline depth</dfn> of a <span>heading content</span> element associated with a <span
-  data-x="concept-section">section</span> <var>section</var> is the number of <span
-  data-x="concept-section">sections</span> that are ancestors of <var>section</var> in the
-  outermost <span>outline</span> that <var>section</var> finds itself in when the <span
-  data-x="outline">outlines</span> of its <code>Document</code>'s elements are created, plus 1. The
-  <span>outline depth</span> of a <span>heading content</span> element not associated with a <span
-  data-x="concept-section">section</span> is 1.</p>
-
-  <p>User agents should provide default headings for sections that do not have explicit section
-  headings.</p>
-
-  <div class="example">
-
-   <p>Consider the following snippet:</p>
-
-   <pre><code class="html" data-x="">&lt;body>
- &lt;nav>
-  &lt;p>&lt;a href="/">Home&lt;/a>&lt;/p>
- &lt;/nav>
- &lt;p>Hello world.&lt;/p>
- &lt;aside>
-  &lt;p>My cat is cute.&lt;/p>
- &lt;/aside>
-&lt;/body></code></pre>
-
-   <p>Although it contains no headings, this snippet has three sections: a document (the
-   <code>body</code>) with two subsections (a <code>nav</code> and an <code>aside</code>). A user
-   agent could present the outline as follows:</p>
-
-   <ol class="brief">
-    <li>Untitled document
-     <ol>
-      <li>Navigation</li>
-      <li>Sidebar</li>
-     </ol>
-    </li>
-   </ol>
-
-   <p>These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by
-   this specification, and might vary with the user's language, the page's language, the user's
-   preferences, the user agent implementer's preferences, etc.</p>
-
-  </div>
-
-  <div class="note">
-
-   <p>The following JavaScript function shows how the tree walk could be implemented. The <var>root</var> argument is the root of the tree to walk (either a <span>sectioning
-   content</span> element or a <span>sectioning root</span> element), and the <var>enter</var> and <var>exit</var> arguments are callbacks that are called with
-   the nodes as they are entered and exited. <ref spec=JAVASCRIPT></p>
-
-   <pre><code class="js" data-x="">function (root, enter, exit) {
-  var node = root;
-  start: while (node) {
-    enter(node);
-    if (node.firstChild) {
-      node = node.firstChild;
-      continue start;
-    }
-    while (node) {
-      exit(node);
-      if (node == root) {
-        node = null;
-      } else if (node.nextSibling) {
-        node = node.nextSibling;
-        continue start;
-      } else {
-        node = node.parentNode;
-      }
-    }
-  }
-}</code></pre>
-
-  </div>
-
-  </div>
-
-
-  <h5>Sample outlines</h5>
-
-  <!-- NON-NORMATIVE SECTION -->
-
   <div class="example">
-
-   <p>The following document shows a straight-forward application of the <span>outline</span>
-   algorithm. First, here is the document, which is a book with very short chapters and
-   subsections:</p>
+   <p>First, here is a document, which is a book with very short chapters and subsections:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
@@ -17405,7 +16904,7 @@ Space is not the only void</pre>
 &lt;h3>Poor judgement&lt;/h3>
 &lt;p>Usually if you lose money it's because you made a mistake.&lt;/p></code></pre>
 
-   <p>This book would form the following outline:</p>
+   <p>Its <span>document headings</span> could be presented as follows:</p>
 
    <ol class="brief">
     <li> The Tax Book
@@ -17427,14 +16926,13 @@ Space is not the only void</pre>
      </ol>
    </ol>
 
-   <p>Notice that the <code>title</code> element does not participate in the outline.</p>
-
+   <p>Notice that the <code>title</code> element is not a <span
+   data-x="concept-heading">heading</span>.</p>
   </div>
 
   <div class="example">
-
-   <p>Here is a similar document, but this time using <code>section</code> elements to get the same
-   effect:</p>
+   <p>Here is a similar document, but this time using <code>h1</code> and <code>section</code>
+   elements to get the same effect:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
@@ -17473,7 +16971,7 @@ Space is not the only void</pre>
  &lt;/section>
 &lt;/section></code></pre>
 
-   <p>This book would form the same outline:</p>
+   <p>Its <span>document headings</span> could be presented identically:</p>
 
    <ol class="brief">
     <li> The Tax Book
@@ -17494,11 +16992,9 @@ Space is not the only void</pre>
        </ol>
      </ol>
    </ol>
-
   </div>
 
   <div class="example">
-
    <p>A document can contain multiple top-level headings:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
@@ -17510,26 +17006,11 @@ Space is not the only void</pre>
 &lt;p>Edible.&lt;/p>
 &lt;h1>Carambola&lt;/h1>
 &lt;p>Star.&lt;/p></code></pre>
-
-   <p>This would form the following simple outline consisting of three top-level sections:</p>
-
-   <ol class="brief">
-    <li> Apples
-    <li> Bananas
-    <li> Carambola
-   </ol>
-
-   <p>Effectively, the <code>body</code> element is split into three.</p>
-
   </div>
 
   <div class="example">
-
-   <p>Mixing both the <code>h1</code>&ndash;<code>h6</code> model and the
-   <code>section</code>/<code>h1</code> model can lead to some unintuitive results.</p>
-
-   <p>Consider for example the following, which is just the previous example but with the contents
-   of the (implied) <code>body</code> wrapped in a <code>section</code>:</p>
+   <p>The following example is non-conforming as it has no <span
+   data-x="concept-heading">heading</span> whose <span>heading level</span> is 1:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
@@ -17542,32 +17023,11 @@ Space is not the only void</pre>
  &lt;h1>Carambola&lt;/h1>
  &lt;p>Star.&lt;/p>
 &lt;/section></code></pre>
-
-   <p>The resulting outline would be:</p>
-
-   <ol class="brief">
-    <li> <i>(untitled page)</i>
-     <ol class="brief">
-      <li> Apples
-      <li> Bananas
-      <li> Carambola
-     </ol>
-   </ol>
-
-   <p>This result is described as <i>unintuitive</i> because it results in three subsections even
-   though there's only one <code>section</code> element. Effectively, the <code>section</code> is
-   split into three, just like the implied <code>body</code> element in the previous example.</p>
-
-   <p>(In this example, "<i>(untitled page)</i>" is the implied heading for the <code>body</code>
-   element, since it has no explicit heading.)</p>
-
   </div>
 
   <div class="example">
-
-   <p>Headings never rise above other sections. Thus, in the following example, the first
-   <code>h1</code> does not actually describe the page header; it describes the header for the
-   second half of the page:</p>
+   <p>The following example is non-conforming as the first <span
+   data-x="concept-heading">heading</span>'s <span>heading level</span> is not 1:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
@@ -17578,24 +17038,11 @@ Space is not the only void</pre>
 &lt;/section>
 &lt;h1>Feathers&lt;/h1>
 &lt;p>Epidermal growths.&lt;/p></code></pre>
-
-   <p>The resulting outline would be:</p>
-
-   <ol class="brief">
-    <li> <i>(untitled page)</i>
-     <ol class="brief">
-      <li> A plea from our caretakers
-     </ol>
-    <li> Feathers
-   </ol>
-
   </div>
 
   <div class="example">
-
-   <p>Thus, when an <code>article</code> element starts with a <code>nav</code> block and only later
-   has its heading, the result is that the <code>nav</code> block is not part of the same section as
-   the rest of the <code>article</code> in the outline. For instance, take this document:</p>
+   <p>A <code>header</code> elements do not influence the <span>document headings</span> of a
+   document:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
 &lt;html lang="en">
@@ -17616,26 +17063,17 @@ Space is not the only void</pre>
 &lt;/article>
 &lt;/html></code></pre>
 
-   <p>The resulting outline would be:</p>
+   <p>The document's <span>document headings</span> could be presented as follows:</p>
 
    <ol class="brief">
     <li> Ray's blog
      <ol class="brief">
-      <li> <i>Untitled article</i>
-       <ol class="brief">
-        <li> <i>Untitled navigation section</i>
-       </ol>
       <li> We're adopting a child!
      </ol>
    </ol>
-
-   <p>Also worthy of note in this example is that the <code>header</code> element has no effect
-   whatsoever on the document outline.</p>
-
   </div>
 
   <div class="example">
-
    <p>The <code>hgroup</code> element can be used for subheadings. For example:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
@@ -17651,12 +17089,14 @@ Space is not the only void</pre>
  &lt;h2> 12:00 to 18:00 &lt;/h2>
 &lt;/hgroup>
 &lt;p>We study.&lt;/p>
-&lt;hgroup>
- &lt;h2>Additional Commentary&lt;/h2>
- &lt;h3>Because not all this is necessarily true&lt;/h3>
- &lt;h6>Ok it's almost certainly not true&lt;/h6>
-&lt;/hgroup>
-&lt;p>Yeah we probably play, rather than study.&lt;/p>
+&lt;section>
+ &lt;hgroup>
+  &lt;h2>Additional Commentary&lt;/h2>
+  &lt;h3>Because not all this is necessarily true&lt;/h3>
+  &lt;h6>Ok it's almost certainly not true&lt;/h6>
+ &lt;/hgroup>
+ &lt;p>Yeah we probably play, rather than study.&lt;/p>
+&lt;/section>
 &lt;hgroup>
  &lt;h1> The evening &lt;/h1>
  &lt;h2> 18:00 to 00:00 &lt;/h2>
@@ -17669,13 +17109,14 @@ Space is not the only void</pre>
 &lt;p>We play some more.&lt;/p>
 &lt;/html></code></pre>
 
-   <p>The resulting outline would be:</p>
+   <p>The document's <span>document headings</span> could be presented as follows:</p>
 
    <ol class="brief">
     <li> The morning <small>06:00 to 12:00</small>
     <li> The afternoon <small>12:00 to 18:00</small>
      <ol class="brief">
-      <li> Additional Commentary <small>Because not all this is necessarily true <small>Ok it's almost certainly not true</small></small>
+      <li> Additional Commentary <small>Because not all this is necessarily true <small>Ok it's
+      almost certainly not true</small></small>
      </ol>
     <li> The evening <small>18:00 to 00:00</small>
     <li> The night <small>00:00 to 06:00</small>
@@ -17690,13 +17131,14 @@ Space is not the only void</pre>
     <li> The morning &mdash; 06:00 to 12:00
     <li> The afternoon &mdash; 12:00 to 18:00
      <ol class="brief">
-      <li> Additional Commentary &mdash; Because not all this is necessarily true &mdash; Ok it's almost certainly not true
+      <li> Additional Commentary &mdash; Because not all this is necessarily true &mdash; Ok it's
+      almost certainly not true
      </ol>
     <li> The evening &mdash; 18:00 to 00:00
     <li> The night &mdash; 00:00 to 06:00
    </ol>
 
-   <p>But so would the following:</p>
+   <p>And so would the following:</p>
 
    <ol class="brief">
     <li> The morning
@@ -17707,62 +17149,6 @@ Space is not the only void</pre>
     <li> The evening
     <li> The night
    </ol>
-
-   <p>The following would also be valid, though maybe less practical in most contexts:</p>
-
-   <ol class="brief">
-    <li> <p>The morning
-         <p> 06:00 to 12:00
-    <li> <p>The afternoon
-         <p> 12:00 to 18:00
-     <ol class="brief">
-      <li> <p> Additional Commentary
-           <p> Because not all this is necessarily true
-           <p> Ok it's almost certainly not true
-     </ol>
-    <li> <p>The evening
-         <p> 18:00 to 00:00
-    <li> <p>The night
-         <p> 00:00 to 06:00
-   </ol>
-
-  </div>
-
-
-  <h5>Exposing outlines to users</h5>
-
-  <p>User agents are encouraged to expose page outlines to users to aid in navigation. This is
-  especially true for non-visual media, e.g. screen readers.</p>
-
-  <p>However, to mitigate the difficulties that arise from authors misusing <span>sectioning
-  content</span>, user agents are also encouraged to offer a mode that navigates the page using
-  <span>heading content</span> alone.</p>
-
-  <div class="example">
-
-   <p>For instance, a user agent could map the arrow keys as follows:</p>
-
-   <dl>
-
-    <dt><kbd><kbd>Shift</kbd>+<kbd>&larr; Left</kbd></kbd>
-    <dd>Go to previous section, including subsections of previous sections
-
-    <dt><kbd><kbd>Shift</kbd>+<kbd>&rarr; Right</kbd></kbd>
-    <dd>Go to next section, including subsections of the current section
-
-    <dt><kbd><kbd>Shift</kbd>+<kbd>&uarr; Up</kbd></kbd>
-    <dd>Go to parent section of the current section
-
-    <dt><kbd><kbd>Shift</kbd>+<kbd>&darr; Down</kbd></kbd>
-    <dd>Go to next section, skipping subsections of the current section
-
-   </dl>
-
-   <p>Plus in addition, the user agent could map the <kbd><kbd>j</kbd></kbd> and
-   <kbd><kbd>k</kbd></kbd> keys to navigating to the previous or next element of <span>heading
-   content</span>, regardless of the section's outline depth and ignoring sections with no
-   headings.</p>
-
   </div>
 
 
@@ -17839,7 +17225,7 @@ Space is not the only void</pre>
 
     <tr>
      <td rowspan=2><code>h1</code>&ndash;<code>h6</code>
-     <td>A section heading
+     <td>A <span data-x="concept-heading">heading</span>
     <tr>
      <td><pre class="example"><code class="html" data-x=""><strong>&lt;h1></strong>The Guide To Music On The Playa<strong>&lt;/h1></strong>
 <strong>&lt;h2></strong>The Main Stage<strong>&lt;/h2></strong>
@@ -17849,7 +17235,7 @@ Space is not the only void</pre>
 
     <tr>
      <td rowspan=2><code>hgroup</code>
-     <td><!--REPRESENTS hgroup-->
+     <td>A <span data-x="concept-heading">heading</span>
     <tr>
      <td><pre class="example"><code class="html" data-x=""><strong>&lt;hgroup></strong>
  &lt;h1>Burning Music&lt;/h1>
@@ -18162,8 +17548,6 @@ of Gralmond's winters.&lt;/p></code></pre>
 
   </div>
 
-  <p class="note">The <code>hr</code> element does not affect the document's
-  <span>outline</span>.</p>
 
 
   <h4>The <dfn><code>pre</code></dfn> element</h4>
@@ -18284,7 +17668,6 @@ a friend lost to the
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</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>
@@ -19290,7 +18673,6 @@ first matching case):&lt;/p&gt;
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</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>
@@ -40937,7 +40319,7 @@ interface <dfn>HTMLTableRowElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd><span>Sectioning root</span>.</dd>
+   <dd>None.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>As a child of a <code>tr</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
@@ -41038,7 +40420,6 @@ interface <dfn>HTMLTableCellElement</dfn> : <span>HTMLElement</span> {
    <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>
-   <!-- EDITING NOTE: If you remove 'heading content' from the list above, make sure to fix the definition of 'sectioning root' to include <th> elements -->
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-tdth-colspan">colspan</code></dd>
@@ -52491,7 +51872,6 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></code></pre>
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</span>.</dd>
    <dd><span data-x="category-listed">Listed</span> and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</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>
@@ -57149,7 +56529,6 @@ dictionary <dfn>FormDataEventInit</dfn> : <span>EventInit</span> {
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</span>.</dd>
    <dd><span>Interactive 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>
@@ -57648,7 +57027,6 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</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>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
@@ -68840,6 +68218,24 @@ contradict people?
   these selectors match HTML elements. <ref spec=SELECTORS> <ref spec=CSSUI></p>
 
   <dl>
+   <dt><dfn data-export="" data-dfn-type="selector"><code
+   data-x="selector-heading">:heading</code></dfn></dt>
+   <dt><dfn data-export="" data-dfn-type="selector"><code
+   data-x="selector-heading-function">:heading()</code></dfn></dt>
+   <!-- TODO: should these be data-noexport? -->
+   <dd>
+    <p>The <code data-x="selector-heading">:heading</code> <span>pseudo-class</span> must match any
+    element that is a <span data-x="concept-heading">heading</span>.</p>
+
+    <p>The <code data-x="selector-heading-function">:heading()</code> functional
+    <span>pseudo-class</span> accepts a <dfn data-x="selector-heading-function-level">level</dfn>.
+    <span data-x="selector-heading-function-level">Level</span> must be a positive
+    <span>&lt;integer></span>. The <code data-x="selector-heading-function">:heading()</code>
+    functional <span>pseudo-class</span> must match any element that is a <span
+    data-x="concept-heading">heading</span> whose <span>heading level</span> is <span
+    data-x="selector-heading-function-level">level</span>. <ref spec=CSSVALUES></p>
+   </dd>
+
    <dt><dfn data-noexport="" data-dfn-type="selector"><code
    data-x="selector-defined">:defined</code></dfn></dt>
    <!-- data-noexport="" is used explicitly here and for other psuedo-classes below as the script
@@ -119126,7 +118522,6 @@ interface <dfn>External</dfn> {
      <th><code>blockquote</code></th>
      <td>A section quoted from another source</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Sectioning root">sectioning root</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>
@@ -119138,7 +118533,7 @@ interface <dfn>External</dfn> {
     <tr>
      <th><code>body</code></th>
      <td>Document body</td>
-     <td><span data-x="Sectioning root">sectioning root</span></td>
+     <td>none</td>
      <td><code>html</code></td>
      <td><span data-x="Flow content">flow</span></td>
      <td><span data-x="global attributes">globals</span>;
@@ -119325,7 +118720,6 @@ interface <dfn>External</dfn> {
      <th><code>details</code></th>
      <td>Disclosure control for hiding details</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Sectioning root">sectioning root</span>;
          <span data-x="Interactive content">interactive</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td><span data-x="Flow content">flow</span></td>
@@ -119351,8 +118745,7 @@ interface <dfn>External</dfn> {
     <tr>
      <th><code>dialog</code></th>
      <td>Dialog box or window</td>
-     <td><span data-x="Flow content">flow</span>;
-         <span data-x="Sectioning root">sectioning root</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>;
@@ -119432,7 +118825,6 @@ interface <dfn>External</dfn> {
      <th><code>fieldset</code></th>
      <td>Group of form controls</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Sectioning root">sectioning root</span>;
          <span data-x="category-listed">listed</span>;
          <span data-x="Form-associated element">form-associated</span>;
          <span data-x="Palpable content">palpable</span></td>
@@ -119460,7 +118852,6 @@ interface <dfn>External</dfn> {
      <th><code>figure</code></th>
      <td>Figure with optional caption</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Sectioning root">sectioning root</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td><span data-x="Flow content">flow</span></td>
      <td><code>figcaption</code>*;
@@ -119501,7 +118892,7 @@ interface <dfn>External</dfn> {
 
     <tr>
      <th><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code></th>
-     <td>Section heading</td>
+     <td>Heading</td>
      <td><span data-x="Flow content">flow</span>;
          <span data-x="Heading content">heading</span>;
          <span data-x="Palpable content">palpable</span></td>
@@ -119535,7 +118926,7 @@ interface <dfn>External</dfn> {
 
     <tr>
      <th><code>hgroup</code></th>
-     <td>heading group</td>
+     <td>Heading</td>
      <td><span data-x="Flow content">flow</span>;
          <span data-x="Heading content">heading</span>;
          <span data-x="Palpable content">palpable</span></td>
@@ -120334,7 +119725,7 @@ interface <dfn>External</dfn> {
     <tr>
      <th><code>td</code></th>
      <td>Table cell</td>
-     <td><span data-x="Sectioning root">sectioning root</span></td>
+     <td>none</td>
      <td><code>tr</code></td>
      <td><span data-x="Flow content">flow</span></td>
      <td><span data-x="global attributes">globals</span>;
@@ -120823,19 +120214,6 @@ interface <dfn>External</dfn> {
       <code>object</code> (if the <code data-x="attr-hyperlink-usemap">usemap</code> attribute is present)<!-- see also comment in <object> section -->;
       <code>video</code> (if the <code data-x="attr-media-controls">controls</code> attribute is present)
 
-    <tr>
-     <td> <span data-x="sectioning root">Sectioning roots</span>
-     <td>
-      <code>blockquote</code>;
-      <code>body</code>;
-      <code>details</code>;
-      <code>dialog</code>;
-      <code>fieldset</code>;
-      <code>figure</code>;
-      <code>td</code>
-     <td>
-      &mdash;
-
     <tr>
      <td> <span data-x="form-associated element">Form-associated elements</span>
      <td>

From 16fc3b30093674dcfbc03388dcd8e059e4fafb3b Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Fri, 11 Oct 2019 11:26:56 +0200
Subject: [PATCH 2/5] only require heading level 1 if there's a heading

---
 source | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/source b/source
index 611f5e18e6a..28855df9577 100644
--- a/source
+++ b/source
@@ -16796,8 +16796,9 @@ Space is not the only void</pre>
 
   </div>
 
-  <p>At least a single <span data-x="concept-heading">heading</span> within <span>document
-  headings</span> must have a <span>heading level</span> of 1.</p>
+  <p>If a document has a <span data-x="concept-heading">heading</span>, at least a single <span
+  data-x="concept-heading">heading</span> within <span>document headings</span> must have a
+  <span>heading level</span> of 1.</p>
 
   <p>Each <span data-x="concept-heading">heading</span> following another <span
   data-x="concept-heading">heading</span> <var>lead</var> in <span>document headings</span> must

From cc30358a4192eff4a701205b53f77e39d9795356 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Fri, 11 Oct 2019 11:29:08 +0200
Subject: [PATCH 3/5] make footer consistent with header

---
 source | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source b/source
index 28855df9577..cf27b2cb958 100644
--- a/source
+++ b/source
@@ -16520,8 +16520,7 @@ Space is not the only void</pre>
   <p>When the nearest ancestor <span>sectioning content</span> or <code>body</code> element is
   <span>the body element</span>, then it applies to the whole page.</p>
 
-  <p class="note">The <code>footer</code> element is not <span>sectioning content</span>; it doesn't
-  introduce a new section.</p>
+  <p class="note">The <code>footer</code> element is not <span>sectioning content</span>.</p>
 
   <div class="example">
 
@@ -123865,6 +123864,7 @@ INSERT INTERFACES HERE
   Josh Juran,
   Josh Levenberg,
   Josh Matthews,
+  Josh Tumath,
   Joshua Bell,
   Joshua Randall,
   Juan Olvera, <!-- thinkxl on GitHub -->

From a3e4db0ce9b3e1186745f85a9b6ed08c3b2072b5 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Fri, 11 Oct 2019 11:47:32 +0200
Subject: [PATCH 4/5] address feedback from Carolyn and Mike

---
 source | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/source b/source
index cf27b2cb958..328547f92fa 100644
--- a/source
+++ b/source
@@ -16804,9 +16804,10 @@ Space is not the only void</pre>
   have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
   <span>heading level</span>.</p>
 
-  <p>Authors are encouraged to avoid a <span>sectioning content</span> element <var>section</var>
-  without a <span data-x="concept-heading">heading</span> descendant whose nearest ancestor
-  <span>sectioning content</span> element is not <var>section</var>.</p>
+  <p class="note">Authors are encouraged to avoid having a <span>sectioning content</span> element
+  <var>section</var> without a <span data-x="concept-heading">heading</span> descendant whose
+  nearest ancestor <span>sectioning content</span> element is not <var>section</var>. I.e., avoid
+  having a section without a heading.</p>
 
   <div class="example">
    <p>The following example is non-conforming:</p>
@@ -17041,7 +17042,7 @@ Space is not the only void</pre>
   </div>
 
   <div class="example">
-   <p>A <code>header</code> elements do not influence the <span>document headings</span> of a
+   <p><code>header</code> elements do not influence the <span>document headings</span> of a
    document:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
@@ -123508,6 +123509,7 @@ INSERT INTERFACES HERE
   Carlos Amengual,
   Carlos Gabriel Cardona,
   Carlos Perell&oacute; Mar&iacute;n,
+  Carolyn MacLeod,
   Casey Leask,
   Cătălin Badea,
   C&#x103;t&#x103;lin Mari&#x219;,

From 8aa45de834ca41a5efbc827259e4ea485cb9aa7c Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Fri, 11 Oct 2019 13:29:56 +0200
Subject: [PATCH 5/5] improve hgroup wording per Mike's earlier feedback

---
 source | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/source b/source
index 328547f92fa..240db24d17a 100644
--- a/source
+++ b/source
@@ -16314,8 +16314,9 @@ interface <dfn>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
 &lt;/hgroup&gt;</code></pre>
 
-   <p>The point of using <code>hgroup</code> in these examples is to prevent the <code>h2</code>
-   element (which acts as a secondary title) from creating a separate heading of its own.</p>
+   <p>The point of using <code>hgroup</code> in these examples is to create a single heading
+   consisting of two pieces (the primary title in the <code>h1</code> element and the secondary
+   title in the <code>h2</code> element).</p>
    <!-- https://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895 -->
 
    <p>How a user agent exposes such multi-level headings in user interfaces (e.g., in tables of