From 106568894f44a550cf584e5b2e0a17241ee48026 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 17 Apr 2022 13:35:46 +0100
Subject: [PATCH 01/42] removed outline algorithm

The CSS UA styles partial implementation has been left as is
https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings

Why partial? refer to https://codepen.io/stevef/pen/ZEvmNPg
---
 source | 1113 +++-----------------------------------------------------
 1 file changed, 58 insertions(+), 1055 deletions(-)

diff --git a/source b/source
index 4835a38ae3f..8f6fb9e202a 100644
--- a/source
+++ b/source
@@ -60,7 +60,7 @@
    </hgroup>
    <hgroup w-dev>
     <h1><a href="/dev/" rel=home>HTML: The Living Standard</a></h1>
-    <h2 class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
+    <p class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></p>
    </hgroup>
    <nav w-nosplit w-nodev w-noreview>
     <!-- Note: be sure to keep an even number of <a>s, for small screens where they appear in two columns. -->
@@ -2084,10 +2084,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <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>
    </dd>
 
 
@@ -10283,12 +10279,12 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
  &lt;h2&gt;The leaders in arbitrary fast delivery since 1920&lt;/h2&gt;
  ...</code></pre>
 
-   <p>The <code>hgroup</code> element is intended for these kinds of situations:</p>
+   <p>The <code>p</code> element may be used for these kinds of situations:</p>
 
    <pre><code class="html">&lt;body&gt;
  &lt;hgroup&gt;
   &lt;h1&gt;ACME Corporation&lt;/h1&gt;
-  &lt;h2&gt;The leaders in arbitrary fast delivery since 1920&lt;/h2&gt;
+  &lt;p&gt;The leaders in arbitrary fast delivery since 1920&lt;/p&gt;
  &lt;/hgroup&gt;
  ...</code></pre>
 
@@ -11168,8 +11164,7 @@ console.assert(image.height === 200);</code></pre>
   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>
+  roots</span>. These are distinct from <span>sectioning content</span>.</p>
 
 
   <h6>Heading content</h6>
@@ -11185,7 +11180,6 @@ console.assert(image.height === 200);</code></pre>
    <li><code>h4</code></li>
    <li><code>h5</code></li>
    <li><code>h6</code></li>
-   <li><code>hgroup</code></li>
   </ul>
 
 
@@ -11552,7 +11546,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <span>inter-element whitespace</span> do not form paragraphs.</p>
 
    <pre><code class="html">&lt;section>
-  &lt;h1>Example of paragraphs&lt;/h1>
+  &lt;h2>Example of paragraphs&lt;/h2>
   This is the &lt;em>first&lt;/em> paragraph in this example.
   &lt;p>This is the second.&lt;/p>
   &lt;!-- This is not a paragraph. -->
@@ -11578,7 +11572,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <code>del</code> element straddles the boundary between the two paragraphs.</p>
 
    <pre><code class="html">&lt;section>
-  &lt;ins>&lt;h1>Example of paragraphs&lt;/h1>
+  &lt;ins>&lt;h2>Example of paragraphs&lt;/h2>
   This is the &lt;em>first&lt;/em> paragraph in&lt;/ins> this example&lt;del>.
   &lt;p>This is the second.&lt;/p>&lt;/del>
   &lt;!-- This is not a paragraph. -->
@@ -11651,7 +11645,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    content. For example, in the following section:</p>
 
    <pre><code class="html">&lt;section>
- &lt;h1>My Cats&lt;/h1>
+ &lt;h2>My Cats&lt;/h2>
  You can play with my cat simulator.
  &lt;object data="cats.sim">
   To see the cat simulator, use one of the following links:
@@ -11690,7 +11684,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
 
    <!-- My Fish -->
    <pre><code class="html">&lt;section>
- &lt;h1>My Cats&lt;/h1>
+ &lt;h2>My Cats&lt;/h2>
  &lt;p>You can play with my cat simulator.&lt;/p>
  &lt;object data="cats.sim">
   &lt;p>To see the cat simulator, use one of the following links:&lt;/p>
@@ -16415,7 +16409,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;article itemscope itemtype="http://schema.org/BlogPosting">
  &lt;header>
-  &lt;h1 itemprop="headline">The Very First Rule of Life&lt;/h1>
+  &lt;h2 itemprop="headline">The Very First Rule of Life&lt;/h2>
   &lt;p>&lt;time itemprop="datePublished" datetime="2009-10-09">3 days ago&lt;/time>&lt;/p>
   &lt;link itemprop="url" href="?comments=0">
  &lt;/header>
@@ -16431,7 +16425,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;article itemscope itemtype="http://schema.org/BlogPosting">
  &lt;header>
-  &lt;h1 itemprop="headline">The Very First Rule of Life&lt;/h1>
+  &lt;h2 itemprop="headline">The Very First Rule of Life&lt;/h2>
   &lt;p>&lt;time itemprop="datePublished" datetime="2009-10-09">3 days ago&lt;/time>&lt;/p>
   &lt;link itemprop="url" href="?comments=0">
  &lt;/header>
@@ -16439,7 +16433,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
  sending whatever you're saying to the world. Seriously.&lt;/p>
  &lt;p><em>...</em>&lt;/p>
  &lt;section>
-  &lt;h1>Comments&lt;/h1>
+  &lt;h2>Comments&lt;/h2>
   &lt;article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
    &lt;link itemprop="url" href="#c1">
    &lt;footer>
@@ -16482,7 +16476,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 &lt;script src="/scripts/widgets.js">&lt;/script>
 &lt;link rel=stylesheet href="/styles/main.css">
 &lt;article is="stock-widget">
- &lt;h1>Stocks&lt;/h1>
+ &lt;h2>Stocks&lt;/h2>
  &lt;table>
   &lt;thead> &lt;tr> &lt;th> Stock &lt;th> Value &lt;th> Delta
   &lt;tbody> &lt;template> &lt;tr> &lt;td> &lt;td> &lt;td> &lt;/template>
@@ -16490,7 +16484,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
  &lt;p> &lt;input type=button value="Refresh" onclick="this.parentElement.refresh()">
 &lt;/article>
 &lt;article is="news-widget">
- &lt;h1>News&lt;/h1>
+ &lt;h2>News&lt;/h2>
  &lt;ul>
   &lt;template>
    &lt;li>
@@ -16540,9 +16534,7 @@ interface <dfn interface>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>
+  scripting, authors are encouraged to use the <code>div</code> element instead.</p>
 
   <div class="example">
 
@@ -16551,26 +16543,22 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;article>
  &lt;hgroup>
-  &lt;h1>Apples&lt;/h1>
-  &lt;h2>Tasty, delicious fruit!&lt;/h2>
+  &lt;h2>Apples&lt;/h2>
+  &lt;p>Tasty, delicious fruit!&lt;/p>
  &lt;/hgroup>
  &lt;p>The apple is the pomaceous fruit of the apple tree.&lt;/p>
  &lt;section>
-  &lt;h1>Red Delicious&lt;/h1>
+  &lt;h3>Red Delicious&lt;/h3>
   &lt;p>These bright red apples are the most common found in many
   supermarkets.&lt;/p>
  &lt;/section>
  &lt;section>
-  &lt;h1>Granny Smith&lt;/h1>
+  &lt;h3>Granny Smith&lt;/h3>
   &lt;p>These juicy, green apples make a great filling for
   apple pies.&lt;/p>
  &lt;/section>
 &lt;/article></code></pre>
 
-   <p>Notice how the use of <code>section</code> means that the author can use <code>h1</code>
-   elements throughout, without having to worry about whether a particular section is at the top
-   level, the second level, the third level, and so on.</p>
-
   </div>
 
   <div class="example">
@@ -16589,8 +16577,8 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
    >&lt;H1
      >Graduation&lt;/H1
    >&lt;Section
-     >&lt;H1
-       >Ceremony&lt;/H1
+     >&lt;H2
+       >Ceremony&lt;/H2
      >&lt;P
        >Opening Procession&lt;/P
      >&lt;P
@@ -16603,8 +16591,8 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
        >Closing Speech by Headmaster&lt;/P
    >&lt;/Section
    >&lt;Section
-     >&lt;H1
-       >Graduates&lt;/H1
+     >&lt;H2
+       >Graduates&lt;/H2
      >&lt;Ul
        >&lt;Li
          >Molly Carpenter&lt;/Li
@@ -16632,37 +16620,37 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;style>
  section { border: double medium; margin: 2em; }
- section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
- section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
+ section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
+ section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
 &lt;/style>
 &lt;header>
  &lt;hgroup>
   &lt;h1>My Book&lt;/h1>
-  &lt;h2>A sample with not much content&lt;/h2>
+  &lt;p>A sample with not much content&lt;/p>
  &lt;/hgroup>
  &lt;p>&lt;small>Published by Dummy Publicorp Ltd.&lt;/small>&lt;/p>
 &lt;/header>
 &lt;section class="chapter">
- &lt;h1>My First Chapter&lt;/h1>
+ &lt;h2>My First Chapter&lt;/h2>
  &lt;p>This is the first of my chapters. It doesn't say much.&lt;/p>
  &lt;p>But it has two paragraphs!&lt;/p>
 &lt;/section>
 &lt;section class="chapter">
- &lt;h1>It Continues: The Second Chapter&lt;/h1>
+ &lt;h2>It Continues: The Second Chapter&lt;/h2>
  &lt;p>Bla dee bla, dee bla dee bla. Boom.&lt;/p>
 &lt;/section>
 &lt;section class="chapter">
- &lt;h1>Chapter Three: A Further Example&lt;/h1>
+ &lt;h2>Chapter Three: A Further Example&lt;/h2>
  &lt;p>It's not like a battle between brightness and earthtones would go
  unnoticed.&lt;/p>
  &lt;p>But it might ruin my story.&lt;/p>
 &lt;/section>
 &lt;section class="appendix">
- &lt;h1>Appendix A: Overview of Examples&lt;/h1>
+ &lt;h2>Appendix A: Overview of Examples&lt;/h2>
  &lt;p>These are demonstrations.&lt;/p>
 &lt;/section>
 &lt;section class="appendix">
- &lt;h1>Appendix B: Some Closing Remarks&lt;/h1>
+ &lt;h2>Appendix B: Some Closing Remarks&lt;/h2>
  &lt;p>Hopefully this long example shows that you &lt;em>can&lt;/em> style
  sections, so long as they are used to indicate actual sections.&lt;/p>
 &lt;/section></code></pre>
@@ -16723,7 +16711,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
  &lt;/nav>
  &lt;article>
   &lt;header>
-   &lt;h1>Demos in Exampland&lt;/h1>
+   &lt;h2>Demos in Exampland&lt;/h2>
    &lt;p>Written by A. N. Other.&lt;/p>
   &lt;/header>
   &lt;nav>
@@ -16735,11 +16723,11 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
   &lt;/nav>
   &lt;div>
    &lt;section id="public">
-    &lt;h1>Public demonstrations&lt;/h1>
+    &lt;h2>Public demonstrations&lt;/h2>
     &lt;p><em>...more...</em>&lt;/p>
    &lt;/section>
    &lt;section id="destroy">
-    &lt;h1>Demolitions&lt;/h1>
+    &lt;h2>Demolitions&lt;/h2>
     &lt;p><em>...more...</em>&lt;/p>
    &lt;/section>
    <em>...more...</em>
@@ -16779,7 +16767,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
  &lt;main>
   &lt;article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
    &lt;header>
-    &lt;h1 itemprop="headline">My Day at the Beach&lt;/h1>
+    &lt;h2 itemprop="headline">My Day at the Beach&lt;/h2>
    &lt;/header>
    &lt;div itemprop="articleBody">
     &lt;p>Today I went to the beach and had a lot of fun.&lt;/p>
@@ -16891,7 +16879,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
    in a much longer news story on Europe.</p>
 
    <pre><code class="html">&lt;aside>
- &lt;h1>Switzerland&lt;/h1>
+ &lt;h2>Switzerland&lt;/h2>
  &lt;p>Switzerland, a land-locked country in the middle of geographic
  Europe, has not joined the geopolitical European Union, though it is
  a signatory to a number of European treaties.&lt;/p>
@@ -16940,13 +16928,13 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
   to the page, namely, links to other blogs, and links to blog posts
   from this blog</em> -->
   &lt;nav>
-   &lt;h1>My blogroll&lt;/h1>
+   &lt;h2>My blogroll&lt;/h2>
    &lt;ul>
     &lt;li>&lt;a href="https://blog.example.com/">Example Blog&lt;/a>
    &lt;/ul>
   &lt;/nav>
   &lt;nav>
-   &lt;h1>Archives&lt;/h1>
+   &lt;h2>Archives&lt;/h2>
    &lt;ol reversed>
     &lt;li>&lt;a href="/last-post">My last post&lt;/a>
     &lt;li>&lt;a href="/first-post">My first post&lt;/a>
@@ -16966,7 +16954,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
  &lt;/aside>
  &lt;article>
   &lt;!-- <em>this is a blog post</em> -->
-  &lt;h1>My last post&lt;/h1>
+  &lt;h2>My last post&lt;/h2>
   &lt;p>This is my last post.&lt;/p>
   &lt;footer>
    &lt;p>&lt;a href="/last-post" rel=bookmark>Permalink&lt;/a>
@@ -16974,14 +16962,14 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
  &lt;/article>
  &lt;article>
   &lt;!-- <em>this is also a blog post</em> -->
-  &lt;h1>My first post&lt;/h1>
+  &lt;h2>My first post&lt;/h2>
   &lt;p>This is my first post.&lt;/p>
   &lt;aside>
    &lt;!-- <em>this aside is about the blog post, since it's inside the
    &lt;article> element; it would be wrong, for instance, to put the
    blogroll here, since the blogroll isn't really related to this post
    specifically, only to the page as a whole</em> -->
-   &lt;h1>Posting&lt;/h1>
+   &lt;h2>Posting&lt;/h2>
    &lt;p>While I'm thinking about it, I wanted to say something about
    posting. Posting is fun!&lt;/p>
   &lt;/aside>
@@ -17059,33 +17047,6 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;body>
  &lt;h1>Let's call it a draw(ing surface)&lt;/h1>
- &lt;section>
-  &lt;h1>Diving in&lt;/h1>
- &lt;/section>
- &lt;section>
-  &lt;h1>Simple shapes&lt;/h1>
- &lt;/section>
- &lt;section>
-  &lt;h1>Canvas coordinates&lt;/h1>
-  &lt;section>
-   &lt;h1>Canvas coordinates diagram&lt;/h1>
-  &lt;/section>
- &lt;/section>
- &lt;section>
-  &lt;h1>Paths&lt;/h1>
- &lt;/section>
-&lt;/body></code></pre>
-
-   <p>Authors might prefer the former style for its terseness, or the latter style for its
-   convenience in the face of heavy editing; which is best is purely an issue of preferred authoring
-   style.</p>
-
-   <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>
-
-   <pre><code class="html">&lt;body>
- &lt;h1>Let's call it a draw(ing surface)&lt;/h1>
  &lt;section>
   &lt;h2>Diving in&lt;/h2>
  &lt;/section>
@@ -17103,9 +17064,11 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;/section>
 &lt;/body></code></pre>
 
-  </div>
-
-
+   <p>Authors might prefer the former style for its terseness, or the latter style for its
+   convenience in the face of heavy editing; which is best is purely an issue of preferred authoring
+   style.</p>
+  
+ </div>
 
 
   <h4>The <dfn element><code>hgroup</code></dfn> element</h4>
@@ -17113,14 +17076,13 @@ interface <dfn interface>HTMLHeadingElement</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>Heading 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>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>One or more <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
-   <code>h5</code>, <code>h6</code> elements, optionally intermixed with <span>script-supporting
-   elements</span>.</dd>
+   <dd>One <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
+   <code>h5</code>, <code>h6</code> element, optionally with one or more paragraphs of text, 
+  optionally intermixed with <span>script-supporting elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -17131,132 +17093,24 @@ interface <dfn interface>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 <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 <code>hgroup</code> element has no special meaning at all. It <span>represents</span> its children. 
+ The element may be used to group a <code>h1</code>&ndash;<code>h6</code> element, for styling purposes, 
+ with one or more paragraphs of text representing its subheading, alternative title, or tagline.</p>
 
   <div class="example">
 
-   <p>Here are some examples of valid headings.</p>
+   <p>Here are some examples of valid headings contained within a <code>hgroup</code> element.</p>
 
     <pre><code class="html">&lt;hgroup&gt;
  &lt;h1&gt;The reality dysfunction&lt;/h1&gt;
- &lt;h2&gt;Space is not the only void&lt;/h2&gt;
+ &lt;p&gt;Space is not the only void&lt;/p&gt;
 &lt;/hgroup&gt;</code></pre>
 
     <pre><code class="html">&lt;hgroup&gt;
  &lt;h1&gt;Dr. Strangelove&lt;/h1&gt;
- &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
+ &lt;p&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/p&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 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 -->
-
-   <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>
-
-   <pre>The reality dysfunction: Space is not the only void</pre>
-
-   <p>Alternatively, it could look like this:
-
-   <pre>The reality dysfunction (Space is not the only void)</pre>
-
-   <p>In interfaces where a title can be rendered on multiple lines, it could be rendered as
-   follows, maybe with the first line in a bigger font size:</p>
-
-   <pre>The reality dysfunction
-Space is not the only void</pre>
-
-  </div>
-
-  <div class="example">
-   <p>The following two examples show ways in which two <code>h1</code> headings could be used
-   within an <code>hgroup</code> element to group the US and UK names for the same movie.</p>
-
-   <pre><code class="html">&lt;hgroup>
- &lt;h1>The Avengers&lt;/h1>
- &lt;h1>Avengers Assemble&lt;/h1>
-&lt;/hgroup>
-
-&lt;hgroup>
- &lt;h1>Avengers Assemble&lt;/h1>
- &lt;h1>The Avengers&lt;/h1>
-&lt;/hgroup></code></pre>
-
-   <p>The first example above shows how the movie names might be grouped in a publication in the US,
-   with the US name <i>The Avengers</i> as the (primary) title, and the UK name <i>Avengers
-   Assemble</i> as the (secondary) alternative title. The second example above shows how the movie
-   names might be grouped in a publication in the UK, with the UK name as the (primary) title, and
-   the US name as the (secondary) alternative title.</p>
-
-   <p>In both cases it is important to note the use of the <code>hgroup</code> element to group the
-   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:
-
-   <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>
-
-   <pre><code class="html">&lt;dialog onclose="walletSetup.continue(this.returnValue)">
- &lt;hgroup>
-  &lt;h1>Wallet Setup&lt;/h1>
-  &lt;h2>Configure your Wallet funding source&lt;/h2>
- &lt;/hgroup>
- &lt;p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
- salesmen you may find in the dungeons, and to pay for mercenaries.&lt;/p>
- &lt;p>We support two payment sources:&lt;/p>
- &lt;form method=dialog>
-  &lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
-   &lt;legend> &lt;label> &lt;input type=radio name=payment-type value=cc> Credit Card &lt;/label> &lt;/legend>
-   &lt;p>&lt;label>Name on card: &lt;input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name">&lt;/label>
-   &lt;p>&lt;label>Card number: &lt;input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016">&lt;/label>
-   &lt;p>&lt;label>Expiry Date: &lt;input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02">&lt;/label>
-   &lt;p>&lt;label>Security Code: &lt;input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246">&lt;/label>
-  &lt;/fieldset>
-  &lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
-   &lt;legend> &lt;label> &lt;input type=radio name=payment-type value=bank> Checking Account &lt;/label> &lt;/legend>
-   &lt;p>&lt;label>Name on account: &lt;input name=bank1 autocomplete="section-bank cc-name">&lt;/label>
-   &lt;p>&lt;label>Routing number: &lt;input name=bank2 inputmode=numeric>&lt;/label>
-   &lt;p>&lt;label>Account number: &lt;input name=bank3 inputmode=numeric>&lt;/label>
-  &lt;/fieldset>
-  &lt;button type=submit value="back"> &#x2190; Back &lt;/button>
-  &lt;button type=submit value="next"> Next &#x2192; &lt;/button>
- &lt;/form>
-&lt;/dialog></code></pre>
-
-  </div>
-
-
+ </div>
 
   <h4>The <dfn element><code>header</code></dfn> element</h4>
 
@@ -17307,7 +17161,7 @@ Space is not the only void</pre>
    <pre><code class="html">&lt;header&gt;
  &lt;hgroup&gt;
   &lt;h1&gt;Fullscreen API&lt;/h1&gt;
-  &lt;h2&gt;Living Standard &mdash; Last Updated 19 October 2015&lt;/h2&gt;
+  &lt;p&gt;Living Standard &mdash; Last Updated 19 October 2015&lt;p&gt;
  &lt;/hgroup&gt;
  &lt;dl&gt;
   &lt;dt&gt;Participate:&lt;/dt&gt;
@@ -17623,8 +17477,7 @@ 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>The <code>h1</code>&ndash;<code>h6</code> elements are headings.</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
@@ -17652,652 +17505,6 @@ Space is not the only void</pre>
   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. -->
 
-  <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>
-
-  <div class="example">
-   <p>For the following fragment:</p>
-   <pre><code class="html">&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>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>
-
-  <div class="example">
-   <p>For example, the following is correct:</p>
-
-   <pre><code class="html">&lt;body&gt;
- &lt;h4&gt;Apples&lt;/h4&gt;
- &lt;p&gt;Apples are fruit.&lt;/p&gt;
- &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>
-
-   <pre><code class="html">&lt;body&gt;
- &lt;h1&gt;Apples&lt;/h1&gt;
- &lt;p&gt;Apples are fruit.&lt;/p&gt;
- &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>
-
-   <pre><code class="html">&lt;body&gt;
- &lt;h1&gt;Apples&lt;/h1&gt;
- &lt;p&gt;Apples are fruit.&lt;/p&gt;
- &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">&lt;body>
-  &lt;hgroup id="document-title">
-    &lt;h1>HTML&lt;/h1>
-    &lt;h2>Living Standard — Last Updated 12 August 2016&lt;/h2>
-  &lt;/hgroup>
-  &lt;p>Some intro to the document.&lt;/p>
-  &lt;h2>Table of contents&lt;/h2>
-  &lt;ol id=toc>...&lt;/ol>
-  &lt;h2>First section&lt;/h2>
-  &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>
-
-   <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>
-   </ol>
-
-   <p>The following image shows what a rendered view of the outline 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">&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">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>
-
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang=en>
-&lt;title>The Tax Book (all in one page)&lt;/title>
-&lt;h1>The Tax Book&lt;/h1>
-&lt;h2>Earning money&lt;/h2>
-&lt;p>Earning money is good.&lt;/p>
-&lt;h3>Getting a job&lt;/h3>
-&lt;p>To earn money you typically need a job.&lt;/p>
-&lt;h2>Spending money&lt;/h2>
-&lt;p>Spending is what money is mainly used for.&lt;/p>
-&lt;h3>Cheap things&lt;/h3>
-&lt;p>Buying cheap things often not cost-effective.&lt;/p>
-&lt;h3>Expensive things&lt;/h3>
-&lt;p>The most expensive thing is often not the most cost-effective either.&lt;/p>
-&lt;h2>Investing money&lt;/h2>
-&lt;p>You can lend your money to other people.&lt;/p>
-&lt;h2>Losing money&lt;/h2>
-&lt;p>If you spend money or invest money, sooner or later you will lose money.
-&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>
-
-   <ol class="brief">
-    <li> The Tax Book
-     <ol class="brief">
-      <li> Earning money
-       <ol class="brief">
-        <li> Getting a job
-       </ol>
-      <li> Spending money
-       <ol class="brief">
-        <li> Cheap things
-        <li> Expensive things
-       </ol>
-      <li> Investing money
-      <li> Losing money
-       <ol class="brief">
-        <li> Poor judgement
-       </ol>
-     </ol>
-   </ol>
-
-   <p>Notice that the <code>title</code> element does not participate in the outline.</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>
-
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang=en>
-&lt;title>The Tax Book (all in one page)&lt;/title>
-&lt;h1>The Tax Book&lt;/h1>
-&lt;section>
- &lt;h1>Earning money&lt;/h1>
- &lt;p>Earning money is good.&lt;/p>
- &lt;section>
-  &lt;h1>Getting a job&lt;/h1>
-  &lt;p>To earn money you typically need a job.&lt;/p>
- &lt;/section>
-&lt;/section>
-&lt;section>
- &lt;h1>Spending money&lt;/h1>
- &lt;p>Spending is what money is mainly used for.&lt;/p>
- &lt;section>
-  &lt;h1>Cheap things&lt;/h1>
-  &lt;p>Buying cheap things often not cost-effective.&lt;/p>
- &lt;/section>
- &lt;section>
-  &lt;h1>Expensive things&lt;/h1>
-  &lt;p>The most expensive thing is often not the most cost-effective either.&lt;/p>
- &lt;/section>
-&lt;/section>
-&lt;section>
- &lt;h1>Investing money&lt;/h1>
- &lt;p>You can lend your money to other people.&lt;/p>
-&lt;/section>
-&lt;section>
- &lt;h1>Losing money&lt;/h1>
- &lt;p>If you spend money or invest money, sooner or later you will lose money.
- &lt;section>
-  &lt;h1>Poor judgement&lt;/h1>
-  &lt;p>Usually if you lose money it's because you made a mistake.&lt;/p>
- &lt;/section>
-&lt;/section></code></pre>
-
-   <p>This book would form the same outline:</p>
-
-   <ol class="brief">
-    <li> The Tax Book
-     <ol class="brief">
-      <li> Earning money
-       <ol class="brief">
-        <li> Getting a job
-       </ol>
-      <li> Spending money
-       <ol class="brief">
-        <li> Cheap things
-        <li> Expensive things
-       </ol>
-      <li> Investing money
-      <li> Losing money
-       <ol class="brief">
-        <li> Poor judgement
-       </ol>
-     </ol>
-   </ol>
-
-  </div>
-
   <div class="example">
 
    <p>A document can contain multiple top-level headings:</p>
@@ -18324,211 +17531,6 @@ Space is not the only void</pre>
 
   </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>
-
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang=en>
-&lt;title>Alphabetic Fruit&lt;/title>
-&lt;section>
- &lt;h1>Apples&lt;/h1>
- &lt;p>Pomaceous.&lt;/p>
- &lt;h1>Bananas&lt;/h1>
- &lt;p>Edible.&lt;/p>
- &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>
-
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang=en>
-&lt;title>Feathers on The Site of Encyclopedic Knowledge&lt;/title>
-&lt;section>
- &lt;h1>A plea from our caretakers&lt;/h1>
- &lt;p>Please, we beg of you, send help! We're stuck in the server room!&lt;/p>
-&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>
-
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang="en">
-&lt;title>We're adopting a child! &mdash; Ray's blog&lt;/title>
-&lt;h1>Ray's blog&lt;/h1>
-&lt;article>
- &lt;header>
-  &lt;nav>
-   &lt;a href="?t=-1d">Yesterday&lt;/a>;
-   &lt;a href="?t=-7d">Last week&lt;/a>;
-   &lt;a href="?t=-1m">Last month&lt;/a>
-  &lt;/nav>
-  &lt;h1>We're adopting a child!&lt;/h1>
- &lt;/header>
- &lt;p>As of today, Janine and I have signed the papers to become
- the proud parents of baby Diane! We've been looking forward to
- this day for weeks.&lt;/p>
-&lt;/article>
-&lt;/html></code></pre>
-
-   <p>The resulting outline would be:</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">&lt;!DOCTYPE HTML>
-&lt;html lang="en">
-&lt;title>Chronotype: CS Student&lt;/title>
-&lt;hgroup>
- &lt;h1> The morning &lt;/h1>
- &lt;h2> 06:00 to 12:00 &lt;/h2>
-&lt;/hgroup>
-&lt;p>We sleep.&lt;/p>
-&lt;hgroup>
- &lt;h1> The afternoon &lt;/h1>
- &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;hgroup>
- &lt;h1> The evening &lt;/h1>
- &lt;h2> 18:00 to 00:00 &lt;/h2>
-&lt;/hgroup>
-&lt;p>We play.&lt;/p>
-&lt;hgroup>
- &lt;h1> The night &lt;/h1>
- &lt;h2> 00:00 to 06:00 &lt;/h2>
-&lt;/hgroup>
-&lt;p>We play some more.&lt;/p>
-&lt;/html></code></pre>
-
-   <p>The resulting outline would be:</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>
-     </ol>
-    <li> The evening <small>18:00 to 00:00</small>
-    <li> The night <small>00:00 to 06:00</small>
-   </ol>
-
-   <p>Exactly how this is represented by user agents, as most interface issues, is left as a matter
-   of implementation preference, but the key part is that the <code>hgroup</code>'s descendant
-   <code>h1</code>&ndash;<code>h6</code> elements are what form the element's heading. Thus, the
-   following would be equally valid:</p>
-
-   <ol class="brief">
-    <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
-     </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>
-
-   <ol class="brief">
-    <li> The morning
-    <li> The afternoon
-     <ol class="brief">
-      <li> Additional Commentary
-     </ol>
-    <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>
 
@@ -128968,3 +127970,4 @@ INSERT INTERFACES HERE
   should view the <a href="/review-drafts/2022-01/">Living Standard Review Draft</a>.</p>
  </body>
 </html>
+

From f86c39757de63058d8d1687d8e0162af9e815d35 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 17 Apr 2022 22:32:40 +0100
Subject: [PATCH 02/42] clarify allowed content of hgroup

response to https://github.com/whatwg/html/pull/7829#pullrequestreview-943975472
---
 source | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source b/source
index 8f6fb9e202a..109f5a7a1fa 100644
--- a/source
+++ b/source
@@ -17081,7 +17081,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Where <span>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>One <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
-   <code>h5</code>, <code>h6</code> element, optionally with one or more paragraphs of text, 
+   <code>h5</code>, <code>h6</code> element, optionally with one or more <code>p</code> elements, 
   optionally intermixed with <span>script-supporting elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
@@ -17095,7 +17095,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <p>The <code>hgroup</code> element has no special meaning at all. It <span>represents</span> its children. 
  The element may be used to group a <code>h1</code>&ndash;<code>h6</code> element, for styling purposes, 
- with one or more paragraphs of text representing its subheading, alternative title, or tagline.</p>
+ with one or more <code>p</code> elements containing text representing its subheading, alternative title, or tagline.</p>
 
   <div class="example">
 

From e96100f86c66294f7b87432910b6ee9ed5389e10 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Mon, 18 Apr 2022 22:37:00 +0100
Subject: [PATCH 03/42] updated headings and sections

used modified text of @annevk PR headings and sections section https://github.com/whatwg/html/pull/3499
---
 source | 276 ++++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 215 insertions(+), 61 deletions(-)

diff --git a/source b/source
index 109f5a7a1fa..fcf22fb8d37 100644
--- a/source
+++ b/source
@@ -17475,97 +17475,251 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
 
 
-  <h4><dfn>Headings and sections</dfn></h4>
+ <h4><dfn>Headings and sections</dfn></h4>
 
-  <p>The <code>h1</code>&ndash;<code>h6</code> elements are headings.</p>
+  <p><span>Heading content</span> elements have a <dfn>heading level</dfn>, which is 
+  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>Switch on <var>heading</var>:</p>
 
-  <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>
+    <dl class="switch">
+     <dt><code>h2</code></dt>
+     <dd>Return 2.</dd>
 
-  <!-- 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>
+     <dt><code>h3</code></dt>
+     <dd>Return 3.</dd>
+
+     <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>
+   
+  </ol>
+
+  <p>A <span>heading content</span> element <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>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>
 
-  <!-- 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. -->
+  <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>
+
+  <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
+  have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
+  <span>heading level</span>.</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>
 
-   <p>A document can contain multiple top-level headings:</p>
+   <pre><code class="html" data-x="">&lt;body&gt;
+ &lt;h4&gt;Apples&lt;/h4&gt;
+ &lt;p&gt;Apples are fruit.&lt;/p&gt;
+ &lt;section&gt;
+  &lt;h2&gt;Taste&lt;/h2&gt;
+  &lt;p&gt;They taste lovely.&lt;/p&gt;
+ &lt;/section&gt;
+&lt;/body&gt;</code></pre>
 
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang=en>
-&lt;title>Alphabetic Fruit&lt;/title>
-&lt;h1>Apples&lt;/h1>
-&lt;p>Pomaceous.&lt;/p>
-&lt;h1>Bananas&lt;/h1>
-&lt;p>Edible.&lt;/p>
-&lt;h1>Carambola&lt;/h1>
-&lt;p>Star.&lt;/p></code></pre>
+   <p>It could be written as follows and then it would be conforming:</p>
 
-   <p>This would form the following simple outline consisting of three top-level sections:</p>
+   <pre><code class="html" data-x="">&lt;body&gt;
+ &lt;h1&gt;Apples&lt;/h1&gt;
+ &lt;p&gt;Apples are fruit.&lt;/p&gt;
+ &lt;section&gt;
+  &lt;h2&gt;Taste&lt;/h2&gt;
+  &lt;p&gt;They taste lovely.&lt;/p&gt;
+ &lt;/section&gt;
+&lt;/body&gt;</code></pre>
+
+  </div>
+
+  <div class="example">
+   <p>The following markup fragment:</p>
+
+   <pre><code class="html" data-x="">&lt;body>
+  &lt;hgroup id="document-title">
+    &lt;h1>HTML&lt;/h1>
+    &lt;p>Living Standard — Last Updated 12 August 2016&lt;/p>
+  &lt;/hgroup>
+  &lt;p>Some intro to the document.&lt;/p>
+  &lt;h2>Table of contents&lt;/h2>
+  &lt;ol id=toc>...&lt;/ol>
+  &lt;h2>First section&lt;/h2>
+  &lt;p>Some intro to the first section.&lt;/p>
+&lt;/body></code></pre>
+
+   <p>...results in 3 <span>document headings</span>:</p>
 
    <ol class="brief">
-    <li> Apples
-    <li> Bananas
-    <li> Carambola
+    <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;p>Living Standard — Last Updated 12 August 2016&lt;/p></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>Effectively, the <code>body</code> element is split into three.</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
+   heading and associated text &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 class="example">
+   <p>First, here is a document, which is a book with very short chapters and subsections:</p>
 
-  <h5>Exposing outlines to users</h5>
+   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+&lt;html lang=en>
+&lt;title>The Tax Book (all in one page)&lt;/title>
+&lt;h1>The Tax Book&lt;/h1>
+&lt;h2>Earning money&lt;/h2>
+&lt;p>Earning money is good.&lt;/p>
+&lt;h3>Getting a job&lt;/h3>
+&lt;p>To earn money you typically need a job.&lt;/p>
+&lt;h2>Spending money&lt;/h2>
+&lt;p>Spending is what money is mainly used for.&lt;/p>
+&lt;h3>Cheap things&lt;/h3>
+&lt;p>Buying cheap things often not cost-effective.&lt;/p>
+&lt;h3>Expensive things&lt;/h3>
+&lt;p>The most expensive thing is often not the most cost-effective either.&lt;/p>
+&lt;h2>Investing money&lt;/h2>
+&lt;p>You can lend your money to other people.&lt;/p>
+&lt;h2>Losing money&lt;/h2>
+&lt;p>If you spend money or invest money, sooner or later you will lose money.
+&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>Its <span>document headings</span> could be presented as follows:</p>
 
-  <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>
+   <ol class="brief">
+    <li> The Tax Book
+     <ol class="brief">
+      <li> Earning money
+       <ol class="brief">
+        <li> Getting a job
+       </ol>
+      <li> Spending money
+       <ol class="brief">
+        <li> Cheap things
+        <li> Expensive things
+       </ol>
+      <li> Investing money
+      <li> Losing money
+       <ol class="brief">
+        <li> Poor judgement
+       </ol>
+     </ol>
+   </ol>
 
-  <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>
+   <p>Notice that the <code>title</code> element is not a <span
+   data-x="concept-heading">heading</span>.</p>
+  </div>
 
   <div class="example">
+   <p>A document can contain multiple top-level headings:</p>
 
-   <p>For instance, a user agent could map the arrow keys as follows:</p>
+   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+&lt;html lang=en>
+&lt;title>Alphabetic Fruit&lt;/title>
+&lt;h1>Apples&lt;/h1>
+&lt;p>Pomaceous.&lt;/p>
+&lt;h1>Bananas&lt;/h1>
+&lt;p>Edible.&lt;/p>
+&lt;h1>Carambola&lt;/h1>
+&lt;p>Star.&lt;/p></code></pre>
+  </div>
 
-   <dl>
-    <dt><kbd><kbd>Shift</kbd> + <kbd>&larr; Left</kbd></kbd>
-    <dd>Go to previous section, including subsections of previous sections
+  <div class="example">
+   <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>
 
-    <dt><kbd><kbd>Shift</kbd> + <kbd>&rarr; Right</kbd></kbd>
-    <dd>Go to next section, including subsections of the current section
+   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+&lt;html lang=en>
+&lt;title>Alphabetic Fruit&lt;/title>
+&lt;section>
+ &lt;h2>Apples&lt;/h2>
+ &lt;p>Pomaceous.&lt;/p>
+ &lt;h2>Bananas&lt;/h2>
+ &lt;p>Edible.&lt;/p>
+ &lt;h2>Carambola&lt;/h2>
+ &lt;p>Star.&lt;/p>
+&lt;/section></code></pre>
+  </div>
 
-    <dt><kbd><kbd>Shift</kbd> + <kbd>&uarr; Up</kbd></kbd>
-    <dd>Go to parent section of the current section
+  <div class="example">
+   <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>
 
-    <dt><kbd><kbd>Shift</kbd> + <kbd>&darr; Down</kbd></kbd>
-    <dd>Go to next section, skipping subsections of the current section
-   </dl>
+   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+&lt;html lang=en>
+&lt;title>Feathers on The Site of Encyclopedic Knowledge&lt;/title>
+ &lt;h2>A plea from our caretakers&lt;/h2>
+ &lt;p>Please, we beg of you, send help! We're stuck in the server room!&lt;/p>
+&lt;h1>Feathers&lt;/h1>
+&lt;p>Epidermal growths.&lt;/p></code></pre>
+  </div>
 
-   <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 class="example">
+   <p><code>header</code> elements do not influence the <span>document headings</span> of a
+   document:</p>
 
-  </div>
+   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+&lt;html lang="en">
+&lt;title>We're adopting a child! &mdash; Ray's blog&lt;/title>
+&lt;h1>Ray's blog&lt;/h1>
+&lt;article>
+ &lt;header>
+  &lt;nav>
+   &lt;a href="?t=-1d">Yesterday&lt;/a>;
+   &lt;a href="?t=-7d">Last week&lt;/a>;
+   &lt;a href="?t=-1m">Last month&lt;/a>
+  &lt;/nav>
+  &lt;h2>We're adopting a child!&lt;/h2>
+ &lt;/header>
+ &lt;p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.&lt;/p>
+&lt;/article>
+&lt;/html></code></pre>
 
+   <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> We're adopting a child!
+     </ol>
+   </ol>
+  </div>
 
 
   <h4>Usage summary</h4>

From 7ffe0bdf242e4ff743887ab7de40b4506ab0d340 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Mon, 18 Apr 2022 23:21:37 +0100
Subject: [PATCH 04/42] removed sectioning root concept

general clean up and closer alignment with @annevk PR https://github.com/whatwg/html/pull/3499
---
 source | 73 +++++++++++++++++-----------------------------------------
 1 file changed, 21 insertions(+), 52 deletions(-)

diff --git a/source b/source
index fcf22fb8d37..2ac393d66ee 100644
--- a/source
+++ b/source
@@ -2084,6 +2084,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <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 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>
 
 
@@ -11159,17 +11163,12 @@ 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>.</p>
+  <p>See the section on <span>headings and sections</span> for further details.</p>
 
 
   <h6>Heading content</h6>
 
-  <p><dfn export>Heading content</dfn> defines the header of a section (whether explicitly marked
+  <p><dfn export>Heading content</dfn> defines the heading of a section (whether explicitly marked
   up using <span>sectioning content</span> elements, or implied by the heading content itself).</p>
 
   <!-- when updating this also update the category index -->
@@ -16248,7 +16247,7 @@ console.log(style.disabled); // false</code></pre>
 
   <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>
@@ -17127,7 +17126,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
+   <dd>If the nearest ancestor <span>sectioning content</span>
    element is <span>the body element</span>: <a
    href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
@@ -17181,8 +17180,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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>
+  <code>header</code> element.</p>
 
    <pre><code class="html">&lt;body>
  &lt;header>
@@ -17223,7 +17221,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
+   <dd>If the nearest ancestor <span>sectioning content</span>
    element is <span>the body element</span>: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
@@ -17235,7 +17233,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </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
+  <span>sectioning content</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>
 
@@ -17253,7 +17251,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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>
+  <p>When the nearest ancestor <span>sectioning content</span>
   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
@@ -17794,7 +17792,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
     <tr>
      <td rowspan=2><code>h1</code>&ndash;<code>h6</code>
-     <td>A section heading
+     <td>A heading
     <tr>
      <td><pre class="example"><code class="html"><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>
@@ -17808,19 +17806,19 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
     <tr>
      <td><pre class="example"><code class="html"><strong>&lt;hgroup></strong>
  &lt;h1>Burning Music&lt;/h1>
- &lt;h2>The Guide To Music On The Playa&lt;/h2>
+ &lt;p>The Guide To Music On The Playa&lt;/p>
 <strong>&lt;/hgroup></strong>
 &lt;section>
  <strong>&lt;hgroup></strong>
   &lt;h1>Main Stage&lt;/h1>
-  &lt;h2>The Fiction Of A Music Festival&lt;/h2>
+  &lt;p>The Fiction Of A Music Festival&lt;/p>
  <strong>&lt;/hgroup></strong>
  &lt;p>If you want to play on a stage, you <!--non-normative-->should bring one.&lt;/p>
 &lt;/section>
 &lt;section>
  <strong>&lt;hgroup></strong>
   &lt;h1>Loudness!&lt;/h1>
-  &lt;h2>Questions About Amplified Music&lt;/h2>
+  &lt;p>Questions About Amplified Music&lt;/p>
  <strong>&lt;/hgroup></strong>
  &lt;p>Amplifiers up to 300W or 90dB are welcome.&lt;/p>
 &lt;/section></code></pre>
@@ -18129,10 +18127,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 element><code>pre</code></dfn> element</h4>
 
   <dl class="element">
@@ -18257,7 +18251,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>
@@ -19316,7 +19309,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>
@@ -41293,7 +41285,6 @@ interface <dfn interface>HTMLTableRowElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd><span>Sectioning root</span>.</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>
@@ -52975,7 +52966,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>
@@ -57719,7 +57709,6 @@ dictionary <dfn dictionary>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>
@@ -58246,7 +58235,6 @@ interface <dfn interface>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>
@@ -121896,7 +121884,6 @@ interface <dfn interface>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>
@@ -121908,7 +121895,7 @@ interface <dfn interface>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>;
@@ -122095,7 +122082,6 @@ interface <dfn interface>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>
@@ -122121,8 +122107,7 @@ interface <dfn interface>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>;
@@ -122202,7 +122187,6 @@ interface <dfn interface>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>
@@ -122230,7 +122214,6 @@ interface <dfn interface>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>*;
@@ -122272,7 +122255,7 @@ interface <dfn interface>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>
@@ -122307,9 +122290,8 @@ interface <dfn interface>External</dfn> {
 
     <tr>
      <th><code>hgroup</code></th>
-     <td>heading group</td>
+     <td>Generic Heading container</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Heading content">heading</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td>
       <code>legend</code>;
@@ -123119,7 +123101,7 @@ interface <dfn interface>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>;
@@ -123606,19 +123588,6 @@ interface <dfn interface>External</dfn> {
       <code>input</code> (if the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state);
       <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 0d2fa7b6f463f4b3cd9a06236b4255a098236454 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Tue, 19 Apr 2022 09:46:19 +0100
Subject: [PATCH 05/42] another fix?

---
 source | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source b/source
index 5e8c1e3263c..f9cf4af6ca8 100644
--- a/source
+++ b/source
@@ -16432,7 +16432,6 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
  sending whatever you're saying to the world. Seriously.&lt;/p>
  &lt;p><em>...</em>&lt;/p>
  &lt;section>
-  &lt;h2>Comments&lt;/h2>
   &lt;h1>Comments&lt;/h1>
   &lt;article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
    &lt;link itemprop="url" href="#c1">

From 3d23dab131317be1b633325ebe98b1b19cd2b287 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Tue, 19 Apr 2022 11:54:21 +0100
Subject: [PATCH 06/42] added return h1

after feedback from @mtrootyy https://github.com/whatwg/html/pull/7829#pullrequestreview-945468052
---
 source | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source b/source
index f9cf4af6ca8..42bad96967f 100644
--- a/source
+++ b/source
@@ -17485,7 +17485,10 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
     <p>Switch on <var>heading</var>:</p>
 
     <dl class="switch">
-     <dt><code>h2</code></dt>
+	 <dt><code>h1</code></dt>
+     <dd>Return 1.</dd>
+     
+	 <dt><code>h2</code></dt>
      <dd>Return 2.</dd>
 
      <dt><code>h3</code></dt>

From 88bc37ac857744e8b99ec9cacf6cc8db5d4b606e Mon Sep 17 00:00:00 2001
From: "Michael[tm] Smith" <mike@w3.org>
Date: Wed, 20 Apr 2022 17:04:56 +0900
Subject: [PATCH 07/42] Fix build errors

---
 source | 39 +++++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/source b/source
index 42bad96967f..1777d23cd37 100644
--- a/source
+++ b/source
@@ -2084,8 +2084,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <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 document outlines but increases the nesting level for
+
+    <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>
@@ -17066,7 +17066,6 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>Authors might prefer the former style for its terseness, or the latter style for its
    convenience in the face of heavy editing; which is best is purely an issue of preferred authoring
    style.</p>
-  
  </div>
 
 
@@ -17080,8 +17079,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Where <span>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>One <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
-   <code>h5</code>, <code>h6</code> element, optionally with one or more <code>p</code> elements, 
-  optionally intermixed with <span>script-supporting elements</span>.</dd>
+   <code>h5</code>, <code>h6</code> element, optionally with one or more <code>p</code> elements,
+   optionally intermixed with <span>script-supporting elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -17092,13 +17091,14 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>hgroup</code> element has no special meaning at all. It <span>represents</span> its children. 
- The element may be used to group a <code>h1</code>&ndash;<code>h6</code> element, for styling purposes, 
- with one or more <code>p</code> elements containing text representing its subheading, alternative title, or tagline.</p>
+  <p>The <code>hgroup</code> element <span>represents</span> its children. It otherwise has no
+  special meaning at all. The element may be used to group <code>h1</code>&ndash;<code>h6</code>
+  elements, for styling purposes, with one or more <code>p</code> elements containing text
+  representing its subheading, alternative title, or tagline.</p>
 
   <div class="example">
 
-   <p>Here are some examples of valid headings contained within a <code>hgroup</code> element.</p>
+   <p>Here are some examples of valid headings contained within an <code>hgroup</code> element.</p>
 
     <pre><code class="html">&lt;hgroup&gt;
  &lt;h1&gt;The reality dysfunction&lt;/h1&gt;
@@ -17473,22 +17473,21 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
 
 
- <h4><dfn>Headings and sections</dfn></h4>
+  <h4><dfn>Headings and sections</dfn></h4>
 
-  <p><span>Heading content</span> elements have a <dfn>heading level</dfn>, which is 
-  an unsigned integer. It is determined as follows for a given <span>heading content</span> element
+  <p><span>Heading content</span> elements have a <dfn>heading level</dfn>, which is an unsigned
+  integer. It is determined as follows for a given <span>heading content</span> element
   <var>heading</var>:</p>
 
   <ol>
-  
    <li>
     <p>Switch on <var>heading</var>:</p>
 
     <dl class="switch">
-	 <dt><code>h1</code></dt>
+     <dt><code>h1</code></dt>
      <dd>Return 1.</dd>
-     
-	 <dt><code>h2</code></dt>
+
+     <dt><code>h2</code></dt>
      <dd>Return 2.</dd>
 
      <dt><code>h3</code></dt>
@@ -17504,12 +17503,12 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
      <dd>Return 6.</dd>
     </dl>
    </li>
-   
   </ol>
 
-  <p>A <span>heading content</span> element <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>A <span>heading content</span> element <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>The <dfn>document headings</dfn> are all <span data-x="concept-heading">headings</span> in a
   document, in <span>tree order</span>.</p>

From f5f3917d3bd1156f62717c4c82dd589299d53373 Mon Sep 17 00:00:00 2001
From: "Michael[tm] Smith" <mike@w3.org>
Date: Wed, 20 Apr 2022 17:20:18 +0900
Subject: [PATCH 08/42] Fix markup error caught by HTML checker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This error seems to have been introduced in f5def65,
https://github.com/whatwg/html/pull/7475 — so it’s unclear why CI didn’t
catch it there.
---
 source | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source b/source
index 1777d23cd37..9a9c2bf43da 100644
--- a/source
+++ b/source
@@ -74694,7 +74694,6 @@ END:VCARD</pre>
     <tr>
      <td><span data-x="attr-hidden-until-found-state">Until found state</span>
      <td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-until-found-keyword">until-found</code></dfn>
-     <td>
     <tr>
      <td rowspan=2><span data-x="attr-hidden-hidden-state">Hidden state</span>
      <td>The empty string

From d7a8d508f2ef794f7dbdfba5f0472a4dbc2a5800 Mon Sep 17 00:00:00 2001
From: "Michael[tm] Smith" <mike@w3.org>
Date: Wed, 20 Apr 2022 17:50:22 +0900
Subject: [PATCH 09/42] Revert markup change that added p element in hgroup

Changing the spec source markup to use a p element in hgroup will need
to wait until after the spec change lands.
---
 source | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source b/source
index 9a9c2bf43da..71892f6c8fa 100644
--- a/source
+++ b/source
@@ -60,7 +60,11 @@
    </hgroup>
    <hgroup w-dev>
     <h1><a href="/dev/" rel=home>HTML: The Living Standard</a></h1>
+    <h2 class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
+    <!-- FIXME: once the spec is changed to allow p elements as in hgroup,
+         the h2 above needs to be changed to a p element; like this:
     <p class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></p>
+    -->
    </hgroup>
    <nav w-nosplit w-nodev w-noreview>
     <!-- Note: be sure to keep an even number of <a>s, for small screens where they appear in two columns. -->

From 5b3e474d1d4c23f0dcfc88cca9e1d4ed9fd262fd Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 21 Apr 2022 10:18:55 +0100
Subject: [PATCH 10/42] several clarifications

a document is conforming without a h1, but it is not recommended.
a document is conforming without a h1 as the first heading in the DOM, but it is not recommended.
sectioning content does not effect heading levels, but authors are encouraged to match heading level and sectioning content nesting level.
Thanks to @mtrootyy for feedback
---
 source | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/source b/source
index 71892f6c8fa..55aa0f6fbaa 100644
--- a/source
+++ b/source
@@ -17526,7 +17526,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <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
+  data-x="concept-heading">heading</span> within <span>document headings</span> should have a
   <span>heading level</span> of 1.</p>
 
   <p>Each <span data-x="concept-heading">heading</span> following another <span
@@ -17534,10 +17534,10 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
   <span>heading level</span>.</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>
+  <p class="note">The nesting level of a <span data-x="concept-heading">heading</span> within 
+  <span>sectioning content</span> elements does not effect the <span>heading level</span>, but authors are 
+  encouraged to match the <span>heading level</span> of a <span data-x="concept-heading">heading</span> 
+  of <span>sectioning content</span> with the nesting level of <span>sectioning content</span>.</p>
 
   <div class="example">
    <p>The following example is non-conforming:</p>
@@ -17663,7 +17663,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div class="example">
-   <p>The following example is non-conforming as it has no <span
+   <p>The following example is conforming, but not recommended 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>
@@ -17680,7 +17680,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div class="example">
-   <p>The following example is non-conforming as the first <span
+   <p>The following example is conforming, but not recommended 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>

From 09e8490e78eb24427fd2d38ca3c900277f8ebc7b Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 21 Apr 2022 10:27:16 +0100
Subject: [PATCH 11/42] fix linting errors

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

diff --git a/source b/source
index 55aa0f6fbaa..9cd248e0352 100644
--- a/source
+++ b/source
@@ -17534,9 +17534,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
   <span>heading level</span>.</p>
 
-  <p class="note">The nesting level of a <span data-x="concept-heading">heading</span> within 
-  <span>sectioning content</span> elements does not effect the <span>heading level</span>, but authors are 
-  encouraged to match the <span>heading level</span> of a <span data-x="concept-heading">heading</span> 
+  <p class="note">The nesting level of a <span data-x="concept-heading">heading</span> within
+  <span>sectioning content</span> elements does not effect the <span>heading level</span>, but authors are
+  encouraged to match the <span>heading level</span> of a <span data-x="concept-heading">heading</span>
   of <span>sectioning content</span> with the nesting level of <span>sectioning content</span>.</p>
 
   <div class="example">
@@ -17663,7 +17663,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div class="example">
-   <p>The following example is conforming, but not recommended as it has no <span
+   <p>The following example is conforming, but not encouraged 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>
@@ -17680,7 +17680,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div class="example">
-   <p>The following example is conforming, but not recommended as the first <span
+   <p>The following example is conforming, but not encouraged 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>

From 71cd1d147209751b5230d595c0ba599d8133dd85 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 21 Apr 2022 17:56:45 +0100
Subject: [PATCH 12/42] remove rank in reference to headings

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

diff --git a/source b/source
index 7535dee1e0a..bda795f97d2 100644
--- a/source
+++ b/source
@@ -17033,9 +17033,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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>
+  <p>These elements have a <span>heading level</span> given by the number in their name. The <code>h1</code>
+  element is said to have the most importance, the <code>h6</code> element has the lowest importance, and
+  two elements with the same <span>heading level</span> have equal importance.</p>
 
   <div class="example">
 

From cce47978eac9228bf185f0589992b1737ed22e0a Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 09:48:39 +0100
Subject: [PATCH 13/42] WIP Some updates based on code review

- updated in response to https://github.com/whatwg/html/pull/7829#discussion_r858996209
- added hgroup back with a caveat https://github.com/whatwg/html/pull/7829#discussion_r858997750
- added back in response to https://github.com/whatwg/html/pull/7829#discussion_r859001046
- updated in response to https://github.com/whatwg/html/pull/7829#discussion_r859003509
---
 source | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/source b/source
index bda795f97d2..661649a22f4 100644
--- a/source
+++ b/source
@@ -10290,7 +10290,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
  &lt;h2&gt;The leaders in arbitrary fast delivery since 1920&lt;/h2&gt;
  ...</code></pre>
 
-   <p>The <code>p</code> element may be used for these kinds of situations:</p>
+   <p>The <code>hgroup</code> element can be used for these kinds of situations:</p>
 
    <pre><code class="html">&lt;body&gt;
  &lt;hgroup&gt;
@@ -11186,6 +11186,7 @@ console.assert(image.height === 200);</code></pre>
    <li><code>h4</code></li>
    <li><code>h5</code></li>
    <li><code>h6</code></li>
+   <li><code>hgroup</code> (if it has a descendant <code>h1</code> to <code>h6</code> element)
   </ul>
 
 
@@ -16540,7 +16541,9 @@ interface <dfn interface>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.</p>
+  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>
 
   <div class="example">
 
@@ -17070,9 +17073,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;/section>
 &lt;/body></code></pre>
 
-   <p>Authors might prefer the former style for its terseness, or the latter style for its
-   convenience in the face of heavy editing; which is best is purely an issue of preferred authoring
-   style.</p>
+   <p>Authors might prefer the former style for its terseness, or the latter style 
+   for its additional styling hooks (E.g. it allows putting <code>position: sticky</code> 
+   on each <code>section</code>) which is best is purely an issue of preferred authoring style.</p>
  </div>
 
 

From 4b5a5d3c9b8ae8354d65de9411b534ac48fb7010 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 09:51:56 +0100
Subject: [PATCH 14/42] fix linting error

---
 source | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source b/source
index 661649a22f4..822972dfa32 100644
--- a/source
+++ b/source
@@ -17073,7 +17073,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;/section>
 &lt;/body></code></pre>
 
-   <p>Authors might prefer the former style for its terseness, or the latter style 
+   <p>Authors might prefer the former style for its terseness, or the latter style
    for its additional styling hooks (E.g. it allows putting <code>position: sticky</code> 
    on each <code>section</code>) which is best is purely an issue of preferred authoring style.</p>
  </div>

From 91f864c8405ba2729b0da896957663092ca224a4 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 14:33:52 +0100
Subject: [PATCH 15/42] remove mention of CSS sticky

- update in response to https://github.com/whatwg/html/pull/7829#discussion_r859555857
---
 source | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source b/source
index 822972dfa32..d1e7bf6a195 100644
--- a/source
+++ b/source
@@ -17074,8 +17074,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;/body></code></pre>
 
    <p>Authors might prefer the former style for its terseness, or the latter style
-   for its additional styling hooks (E.g. it allows putting <code>position: sticky</code> 
-   on each <code>section</code>) which is best is purely an issue of preferred authoring style.</p>
+   for its additional styling hooks, which is best is purely an issue of preferred authoring style.</p>
  </div>
 
 

From 7ac13735c4f489782f92c793721dbd4080a45a7c Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 16:02:28 +0100
Subject: [PATCH 16/42] restored hr note

- in response to https://github.com/whatwg/html/pull/7829#discussion_r859024588
---
 source | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source b/source
index d1e7bf6a195..bcc6a9f4798 100644
--- a/source
+++ b/source
@@ -18137,6 +18137,9 @@ observatory in all weather and seasons, including the metre-deep snow
 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 element><code>pre</code></dfn> element</h4>
 

From 0fbbc0d049112581c27acee5dac53b460681b205 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 16:28:47 +0100
Subject: [PATCH 17/42] removed Generic

- in response to https://github.com/whatwg/html/pull/7829#discussion_r859025074
---
 source | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source b/source
index bcc6a9f4798..a4f4997b8b8 100644
--- a/source
+++ b/source
@@ -122400,7 +122400,7 @@ interface <dfn interface>External</dfn> {
 
     <tr>
      <th><code>hgroup</code></th>
-     <td>Generic Heading container</td>
+     <td>Heading container</td>
      <td><span data-x="Flow content">flow</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td>
@@ -128203,4 +128203,3 @@ INSERT INTERFACES HERE
   should view the <a href="/review-drafts/2022-01/">Living Standard Review Draft</a>.</p>
  </body>
 </html>
-

From 817c59ad47f5f852a1cfe96809690f5966fbc005 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 16:42:33 +0100
Subject: [PATCH 18/42] replace document headings with outline

- in response to https://github.com/whatwg/html/pull/7829#discussion_r859026232
---
 source | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/source b/source
index a4f4997b8b8..00b06d1a395 100644
--- a/source
+++ b/source
@@ -17519,23 +17519,23 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</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>The <dfn>document headings</dfn> are all <span data-x="concept-heading">headings</span> in a
+  <p>The <dfn>outline</dfn> is 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
+  <p>The <span>outline</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>
 
   <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> should have a
+  data-x="concept-heading">heading</span> within the <span>outline</span> should 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
+  data-x="concept-heading">heading</span> <var>lead</var> in the <span>outline</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>
 
@@ -17584,7 +17584,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   &lt;p>Some intro to the first section.&lt;/p>
 &lt;/body></code></pre>
 
-   <p>...results in 3 <span>document headings</span>:</p>
+   <p>...results in 3 document headings:</p>
 
    <ol class="brief">
     <li><p><code data-x="">&lt;hgroup id="document-title">...&lt;/hgroup></code> consisting of <code
@@ -17596,7 +17596,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
     <li><p><code data-x="">&lt;h2>First section&lt;/h2></code>.</p></li>
    </ol>
 
-   <p>A rendered view of the <span>document headings</span> might look like:</p>
+   <p>A rendered view of the <span>outline</span> might look like:</p>
 
    <p><img src="/images/outline.svg" width="465" height="120" alt="Top-level section with the
    heading and associated text &quot;HTML: Living Standard — Last Updated 12 August 2016&quot; and two
@@ -17627,7 +17627,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &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>Its <span>document headings</span> could be presented as follows:</p>
+   <p>Its <span>outline</span> could be presented as follows:</p>
 
    <ol class="brief">
     <li> The Tax Book
@@ -17698,7 +17698,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div class="example">
-   <p><code>header</code> elements do not influence the <span>document headings</span> of a
+   <p><code>header</code> elements do not influence the <span>outline</span> of a
    document:</p>
 
    <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
@@ -17720,7 +17720,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;/article>
 &lt;/html></code></pre>
 
-   <p>The document's <span>document headings</span> could be presented as follows:</p>
+   <p>The document's <span>outline</span> could be presented as follows:</p>
 
    <ol class="brief">
     <li> Ray's blog

From b2207d30576cb6c440030421f0101f06f8043415 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 21:57:54 +0100
Subject: [PATCH 19/42] fix lint error

---
 source | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source b/source
index 00b06d1a395..565a397ead6 100644
--- a/source
+++ b/source
@@ -18203,7 +18203,6 @@ interface <dfn interface>HTMLPreElement</dfn> : <span>HTMLElement</span> {
 
   <p class="note">This element <a href="#bidireq">has rendering requirements involving the
   bidirectional algorithm</a>.</p>
-
   </div>
 
   <div class="example">

From 03d27be494dce653f4b423a6c83edc820d0d2855 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Apr 2022 22:18:38 +0100
Subject: [PATCH 20/42] added back heading content category

in response to https://github.com/whatwg/html/pull/7829#pullrequestreview-955199949
---
 source | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source b/source
index 565a397ead6..9c74b5aa4c6 100644
--- a/source
+++ b/source
@@ -17084,6 +17084,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
+   <dd><span>Heading content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>

From b595cbdf5fc547bc458b500ede367d2665873667 Mon Sep 17 00:00:00 2001
From: "Michael[tm] Smith" <mike@w3.org>
Date: Thu, 28 Apr 2022 20:25:03 +0900
Subject: [PATCH 21/42] Zap trailing whitespace (unbreak CI)

---
 source | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source b/source
index 9c74b5aa4c6..d2ec7487cf7 100644
--- a/source
+++ b/source
@@ -18138,7 +18138,7 @@ observatory in all weather and seasons, including the metre-deep snow
 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>
 

From 5f7ae31f7567679612476bb6dc27a946db09fb15 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 28 Apr 2022 20:31:46 +0100
Subject: [PATCH 22/42] update hgroup content model

in response to https://github.com/whatwg/html/pull/7829#discussion_r860797407
---
 source | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source b/source
index d2ec7487cf7..63acf49e748 100644
--- a/source
+++ b/source
@@ -17088,8 +17088,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>One <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
-   <code>h5</code>, <code>h6</code> element, optionally with one or more <code>p</code> elements,
+   <dd>Zero or more <code>p</code> elements, followed by one <code>h1</code>, <code>h2</code>, <code>h3</code>,
+   <code>h4</code>, <code>h5</code>, <code>h6</code> element, followed by zero or more <code>p</code> elements,
    optionally intermixed with <span>script-supporting elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>

From 0c072859d7ea03ca7bd98fa74b2c230b7419e0ae Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Mon, 2 May 2022 12:13:39 +0100
Subject: [PATCH 23/42] replaced important term

in response to
- https://github.com/whatwg/html/pull/7829#discussion_r859506524
- https://github.com/whatwg/html/pull/7829#pullrequestreview-954513175
---
 source | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/source b/source
index 63acf49e748..136ea5ca93c 100644
--- a/source
+++ b/source
@@ -17036,9 +17036,10 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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 <span>heading level</span> given by the number in their name. The <code>h1</code>
-  element is said to have the most importance, the <code>h6</code> element has the lowest importance, and
-  two elements with the same <span>heading level</span> have equal importance.</p>
+  <p>These elements have a <span>heading level</span> given by the number in their name. The
+  <span>heading level</span> corresponds to the levels of nested sections. The <code>h1</code>
+  element is for a top-level section, <code>h2</code> for a subsection, <code>h3</code> for a
+  sub-subsection, and so on.</p>
 
   <div class="example">
 
@@ -17517,8 +17518,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <p>A <span>heading content</span> element <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>
+  data-x="concept-heading">heading</span>'s <span>heading level</span> is, the
+  less parent sections the <span data-x="concept-heading">heading</span> has.</p>
 
   <p>The <dfn>outline</dfn> is all <span data-x="concept-heading">headings</span> in a
   document, in <span>tree order</span>.</p>

From e841164d013639d7e868cd42227f7016bba528e9 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Tue, 3 May 2022 16:57:30 -0400
Subject: [PATCH 24/42] Minor editorial fixes

---
 source | 66 ++++++++++++++++++++++++++++++----------------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/source b/source
index 136ea5ca93c..b97ee54afeb 100644
--- a/source
+++ b/source
@@ -57,13 +57,15 @@
     <h2 w-nosnap w-noreview id="living-standard" class="no-num no-toc">Living Standard &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
     <h2 w-nohtml w-noreview id="living-standard" class="no-num no-toc">Commit Snapshot &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
     <h2 w-nohtml w-nosnap id="living-standard" class="no-num no-toc">Review Draft &mdash; Published <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
+    <!-- FIXME: once the spec is changed to allow p elements in hgroup to pass validation,
+         the h2s above needs to be changed to p elements, and the appropriate style sheets updated.
+    -->
    </hgroup>
    <hgroup w-dev>
     <h1><a href="/dev/" rel=home>HTML: The Living Standard</a></h1>
     <h2 class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></h2>
-    <!-- FIXME: once the spec is changed to allow p elements as in hgroup,
-         the h2 above needs to be changed to a p element; like this:
-    <p class="no-num no-toc" id="dev-edition-h2">Edition for Web Developers &mdash; Last Updated <span class="pubdate">[DATE: 01 Jan 1901]</span></p>
+    <!-- FIXME: once the spec is changed to allow p elements in hgroup to pass validation,
+         the h2 above needs to be changed to p elements, and the appropriate style sheets updated.
     -->
    </hgroup>
    <nav w-nosplit w-nodev w-noreview>
@@ -2089,9 +2091,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     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 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>
+    <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
+    <span data-x="concept-heading">headings</span> would not be conforming.</p>
    </dd>
 
 
@@ -10290,7 +10292,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
  &lt;h2&gt;The leaders in arbitrary fast delivery since 1920&lt;/h2&gt;
  ...</code></pre>
 
-   <p>The <code>hgroup</code> element can be used for these kinds of situations:</p>
+   <p>The <code>hgroup</code> element can is intended for these kinds of situations:</p>
 
    <pre><code class="html">&lt;body&gt;
  &lt;hgroup&gt;
@@ -17074,9 +17076,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;/section>
 &lt;/body></code></pre>
 
-   <p>Authors might prefer the former style for its terseness, or the latter style
-   for its additional styling hooks, which is best is purely an issue of preferred authoring style.</p>
- </div>
+   <p>Authors might prefer the former style for its terseness, or the latter style for its
+   additional styling hooks. Which is best is purely an issue of preferred authoring style.</p>
+  </div>
 
 
   <h4>The <dfn element><code>hgroup</code></dfn> element</h4>
@@ -17084,14 +17086,15 @@ interface <dfn interface>HTMLHeadingElement</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>Palpable content</span>.</dd>
    <dd><span>Heading 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>heading content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or more <code>p</code> elements, followed by one <code>h1</code>, <code>h2</code>, <code>h3</code>,
-   <code>h4</code>, <code>h5</code>, <code>h6</code> element, followed by zero or more <code>p</code> elements,
-   optionally intermixed with <span>script-supporting elements</span>.</dd>
+   <dd>Zero or more <code>p</code> elements, followed by one <code>h1</code>, <code>h2</code>,
+   <code>h3</code>, <code>h4</code>, <code>h5</code>, or <code>h6</code> element, followed by zero
+   or more <code>p</code> elements, optionally intermixed with <span>script-supporting
+   elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -17120,7 +17123,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;h1&gt;Dr. Strangelove&lt;/h1&gt;
  &lt;p&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/p&gt;
 &lt;/hgroup&gt;</code></pre>
- </div>
+
+  </div>
 
   <h4>The <dfn element><code>header</code></dfn> element</h4>
 
@@ -17137,9 +17141,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span>
-   element is <span>the body element</span>: <a
-   href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
+   <dd>If the nearest ancestor <span>sectioning content</span> element is <span>the body
+   element</span>: <a href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
@@ -17232,9 +17235,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span>
-   element is <span>the body element</span>: <a
-   href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
+   <dd>If the nearest ancestor <span>sectioning content</span> element is <span>the body
+   element</span>: <a href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
@@ -17262,8 +17264,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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>
-  element is <span>the body element</span>, then it applies to the whole page.</p>
+  <p>When the nearest ancestor <span>sectioning content</span> 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>
@@ -17549,7 +17551,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <div class="example">
    <p>The following example is non-conforming:</p>
 
-   <pre><code class="html" data-x="">&lt;body&gt;
+   <pre class="bad"><code class="html">&lt;body&gt;
  &lt;h4&gt;Apples&lt;/h4&gt;
  &lt;p&gt;Apples are fruit.&lt;/p&gt;
  &lt;section&gt;
@@ -17560,7 +17562,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <p>It could be written as follows and then it would be conforming:</p>
 
-   <pre><code class="html" data-x="">&lt;body&gt;
+   <pre><code class="html">&lt;body&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;p&gt;Apples are fruit.&lt;/p&gt;
  &lt;section&gt;
@@ -17574,7 +17576,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <div class="example">
    <p>The following markup fragment:</p>
 
-   <pre><code class="html" data-x="">&lt;body>
+   <pre><code class="html">&lt;body>
   &lt;hgroup id="document-title">
     &lt;h1>HTML&lt;/h1>
     &lt;p>Living Standard — Last Updated 12 August 2016&lt;/p>
@@ -17608,7 +17610,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <div class="example">
    <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>
+   <pre><code class="html">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
 &lt;title>The Tax Book (all in one page)&lt;/title>
 &lt;h1>The Tax Book&lt;/h1>
@@ -17658,7 +17660,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <div class="example">
    <p>A document can contain multiple top-level headings:</p>
 
-   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+   <pre><code class="html">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
 &lt;title>Alphabetic Fruit&lt;/title>
 &lt;h1>Apples&lt;/h1>
@@ -17673,7 +17675,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>The following example is conforming, but not encouraged 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>
+   <pre><code class="html">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
 &lt;title>Alphabetic Fruit&lt;/title>
 &lt;section>
@@ -17690,7 +17692,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>The following example is conforming, but not encouraged 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>
+   <pre><code class="html">&lt;!DOCTYPE HTML>
 &lt;html lang=en>
 &lt;title>Feathers on The Site of Encyclopedic Knowledge&lt;/title>
  &lt;h2>A plea from our caretakers&lt;/h2>
@@ -17703,7 +17705,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p><code>header</code> elements do not influence the <span>outline</span> of a
    document:</p>
 
-   <pre><code class="html" data-x="">&lt;!DOCTYPE HTML>
+   <pre><code class="html">&lt;!DOCTYPE HTML>
 &lt;html lang="en">
 &lt;title>We're adopting a child! &mdash; Ray's blog&lt;/title>
 &lt;h1>Ray's blog&lt;/h1>
@@ -122218,7 +122220,7 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>dialog</code></th>
      <td>Dialog box or window</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="Flow content">flow</span></td>
      <td><span data-x="global attributes">globals</span>;

From 5543e9caa02a082fd60184432e44211f0f8c0017 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Wed, 4 May 2022 21:54:59 +0100
Subject: [PATCH 25/42] updated example and svg

in response to https://github.com/whatwg/html/pull/7829#discussion_r859028136
---
 images/outline.svg |  2 +-
 source             | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/images/outline.svg b/images/outline.svg
index e5c66e34684..ffb18d020d7 100644
--- a/images/outline.svg
+++ b/images/outline.svg
@@ -12,7 +12,7 @@
     }
   ]]></style>
 
-  <text x="20" y="36">HTML: Living Standard — Last Updated 12 August 2016</text>
+  <text x="20" y="36">HTML: Living Standard</text>
   <text x="70" y="70">Table of contents</text>
   <text x="70" y="104">First section</text>
 
diff --git a/source b/source
index b97ee54afeb..1511a4d4d36 100644
--- a/source
+++ b/source
@@ -17578,8 +17578,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <pre><code class="html">&lt;body>
   &lt;hgroup id="document-title">
-    &lt;h1>HTML&lt;/h1>
-    &lt;p>Living Standard — Last Updated 12 August 2016&lt;/p>
+    &lt;h1>HTML: Living Standard&lt;/h1>
+    &lt;p>Last Updated 12 August 2016&lt;/p>
   &lt;/hgroup>
   &lt;p>Some intro to the document.&lt;/p>
   &lt;h2>Table of contents&lt;/h2>
@@ -17592,8 +17592,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
    <ol class="brief">
     <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;p>Living Standard — Last Updated 12 August 2016&lt;/p></code>.</p></li>
+    data-x="">&lt;h1>HTML: Living Standard&lt;/h1></code> and <code
+    data-x="">&lt;p>Last Updated 12 August 2016&lt;/p></code>.</p></li>
 
     <li><p><code data-x="">&lt;h2>Table of contents&lt;/h2></code>.</p></li>
 
@@ -17603,7 +17603,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>A rendered view of the <span>outline</span> might look like:</p>
 
    <p><img src="/images/outline.svg" width="465" height="120" alt="Top-level section with the
-   heading and associated text &quot;HTML: Living Standard — Last Updated 12 August 2016&quot; and two
+   heading &quot;HTML: Living Standard&quot; and two
    subsections; &quot;Table of contents&quot; and &quot;First section&quot;."></p>
   </div>
 

From 00964418731e8db470b36ba95811dd57a9f2784c Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 5 May 2022 18:28:18 +0100
Subject: [PATCH 26/42] reworked hgroup definition

in response to https://github.com/whatwg/html/pull/7829/files/d7a8d508f2ef794f7dbdfba5f0472a4dbc2a5800#r859004921
---
 source | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source b/source
index 1511a4d4d36..d7716e6208c 100644
--- a/source
+++ b/source
@@ -17105,10 +17105,10 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>hgroup</code> element <span>represents</span> its children. It otherwise has no
-  special meaning at all. The element may be used to group <code>h1</code>&ndash;<code>h6</code>
-  elements, for styling purposes, with one or more <code>p</code> elements containing text
-  representing its subheading, alternative title, or tagline.</p>
+  <p>The <code>hgroup</code> element <span>represents</span> a heading and related content.
+  The element may be used to group a <code>h1</code>&ndash;<code>h6</code> element,
+  with one or more <code>p</code> elements containing content representing a subheading,
+  alternative title, or tagline.</p>
 
   <div class="example">
 

From efbe168f384c497e896c07dcb62ff5ab6a486bdf Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 5 May 2022 18:35:26 +0100
Subject: [PATCH 27/42] added back header clarification

in response to https://github.com/whatwg/html/pull/7829/files/d7a8d508f2ef794f7dbdfba5f0472a4dbc2a5800#r859007333
---
 source | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source b/source
index d7716e6208c..effd07f71cf 100644
--- a/source
+++ b/source
@@ -17194,7 +17194,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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.</p>
+  <code>header</code> element, because the <code>header</code> element doesn't take part in the
+  <span>outline</span> algorithm.</p>
 
    <pre><code class="html">&lt;body>
  &lt;header>

From 8c1cb5efa936da0b56df9dc43f71e1765724c6a2 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 5 May 2022 22:18:46 +0100
Subject: [PATCH 28/42] add example

- lint fix
- grammatical fix
- outline example in response to https://github.com/whatwg/html/pull/7829/files/d7a8d508f2ef794f7dbdfba5f0472a4dbc2a5800#r859016942
---
 source | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/source b/source
index effd07f71cf..b066663e1e9 100644
--- a/source
+++ b/source
@@ -10292,7 +10292,7 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
  &lt;h2&gt;The leaders in arbitrary fast delivery since 1920&lt;/h2&gt;
  ...</code></pre>
 
-   <p>The <code>hgroup</code> element can is intended for these kinds of situations:</p>
+   <p>The <code>hgroup</code> element can be used for these kinds of situations:</p>
 
    <pre><code class="html">&lt;body&gt;
  &lt;hgroup&gt;
@@ -17106,7 +17106,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </dl>
 
   <p>The <code>hgroup</code> element <span>represents</span> a heading and related content.
-  The element may be used to group a <code>h1</code>&ndash;<code>h6</code> element,
+  The element may be used to group an <code>h1</code>&ndash;<code>h6</code> element,
   with one or more <code>p</code> elements containing content representing a subheading,
   alternative title, or tagline.</p>
 
@@ -17687,6 +17687,18 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;h2>Carambola&lt;/h2>
  &lt;p>Star.&lt;/p>
 &lt;/section></code></pre>
+  
+  <p>The document's <span>outline</span> could be presented as follows:</p>
+
+  <ol class="brief">
+    <li>
+     <ol class="brief">
+      <li> Apples
+      <li> Bananas
+      <li> Carambola
+     </ol>
+   </ol>
+  
   </div>
 
   <div class="example">

From 2242b9d3157e618fd4096b0336b0d5a5fc9aba85 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 5 May 2022 22:24:58 +0100
Subject: [PATCH 29/42] added example

in response to https://github.com/whatwg/html/pull/7829/files/d7a8d508f2ef794f7dbdfba5f0472a4dbc2a5800#r859016942
---
 source | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/source b/source
index b066663e1e9..f5ad62f808b 100644
--- a/source
+++ b/source
@@ -17670,6 +17670,14 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;p>Edible.&lt;/p>
 &lt;h1>Carambola&lt;/h1>
 &lt;p>Star.&lt;/p></code></pre>
+
+  <p>The document's <span>outline</span> could be presented as follows:</p>
+
+  <ol class="brief">
+    <li> Apples
+    <li> Bananas
+    <li> Carambola
+  </ol>
   </div>
 
   <div class="example">

From 2d0b9bb6d7cc0ee1d84a23cf11bca68ae38444d7 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Thu, 5 May 2022 22:29:36 +0100
Subject: [PATCH 30/42] removed trailing whitespace

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

diff --git a/source b/source
index f5ad62f808b..84a6bb10c54 100644
--- a/source
+++ b/source
@@ -17695,7 +17695,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;h2>Carambola&lt;/h2>
  &lt;p>Star.&lt;/p>
 &lt;/section></code></pre>
-  
+
   <p>The document's <span>outline</span> could be presented as follows:</p>
 
   <ol class="brief">
@@ -17706,7 +17706,6 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
       <li> Carambola
      </ol>
    </ol>
-  
   </div>
 
   <div class="example">

From 045cf00fe5d501d701327b459eb2b74b98a94dd4 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 8 May 2022 13:36:09 +0100
Subject: [PATCH 31/42] various updates

- added sectioning root back, but only for body element.

- updated acc considerations for header/footer
-- https://github.com/whatwg/html/pull/7829#discussion_r865747640
https://github.com/whatwg/html/pull/7829#pullrequestreview-958974997
---
 source | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/source b/source
index d4f03604e85..f3a0e85ce67 100644
--- a/source
+++ b/source
@@ -16341,7 +16341,8 @@ console.log(style.disabled); // false</code></pre>
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd>None.</dd>
+   <dd><span data-x="sectioning root">sectioning
+  root</span>.</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>
@@ -16383,6 +16384,10 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
   </dl>
 
   <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
+  
+  <p>The <code>body</code> element is the <df data-x="sectioning root">sectioning
+  root</df> of a document. The <span data-x="sectioning root">sectioning
+  root</span> delineates the scope of the <span>outline</span>.</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
@@ -17225,7 +17230,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> element is <span>the body
+   <dd>If the nearest ancestor is <span>the body
    element</span>: <a href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a
@@ -17238,7 +17243,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <p>The <code>header</code> element <span>represents</span> a group of introductory or navigational
   aids.</p>
 
-  <p class="note">A <code>header</code> element is intended to usually contain the section's heading
+  <p class="note">A <code>header</code> element is intended to usually contain a heading
   (an <code>h1</code>&ndash;<code>h6</code> element or an <code>hgroup</code> element), but this is
   not required. The <code>header</code> element can also be used to wrap a section's table of
   contents, a search form, or any relevant logos.</p>
@@ -17320,7 +17325,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> element is <span>the body
+   <dd>If the nearest ancestor is <span>the body
    element</span>: <a href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a

From d07cf54191bae0a37929c03c8c5dea958217b071 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 8 May 2022 13:42:48 +0100
Subject: [PATCH 32/42] lint fix

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

diff --git a/source b/source
index f3a0e85ce67..bb9d8f89ae2 100644
--- a/source
+++ b/source
@@ -16341,8 +16341,7 @@ console.log(style.disabled); // false</code></pre>
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd><span data-x="sectioning root">sectioning
-  root</span>.</dd>
+   <dd><span data-x="sectioning root">sectioning root</span>.</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>
@@ -16384,7 +16383,7 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
   </dl>
 
   <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
-  
+
   <p>The <code>body</code> element is the <df data-x="sectioning root">sectioning
   root</df> of a document. The <span data-x="sectioning root">sectioning
   root</span> delineates the scope of the <span>outline</span>.</p>

From ea5492b06ced19b13401d2f8d2a7e94adc521bb6 Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 8 May 2022 13:45:43 +0100
Subject: [PATCH 33/42] typo fix

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

diff --git a/source b/source
index bb9d8f89ae2..2c5c287013d 100644
--- a/source
+++ b/source
@@ -16384,8 +16384,8 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
   <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
 
-  <p>The <code>body</code> element is the <df data-x="sectioning root">sectioning
-  root</df> of a document. The <span data-x="sectioning root">sectioning
+  <p>The <code>body</code> element is the <dfn data-x="sectioning root">sectioning
+  root</dfn> of a document. The <span data-x="sectioning root">sectioning
   root</span> delineates the scope of the <span>outline</span>.</p>
 
   <p>In conforming documents, there is only one <code>body</code> element. The <code

From 559d70bbf9feab2689bba98d419273e27e14162e Mon Sep 17 00:00:00 2001
From: stevefaulkner <faulkner.steve@gmail.com>
Date: Sun, 8 May 2022 14:22:33 +0100
Subject: [PATCH 34/42] removed note

in response to https://github.com/whatwg/html/pull/7829#discussion_r859016196
---
 source | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/source b/source
index 2c5c287013d..68f07a0aacd 100644
--- a/source
+++ b/source
@@ -17632,11 +17632,6 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
   <span>heading level</span>.</p>
 
-  <p class="note">The nesting level of a <span data-x="concept-heading">heading</span> within
-  <span>sectioning content</span> elements does not effect the <span>heading level</span>, but authors are
-  encouraged to match the <span>heading level</span> of a <span data-x="concept-heading">heading</span>
-  of <span>sectioning content</span> with the nesting level of <span>sectioning content</span>.</p>
-
   <div class="example">
    <p>The following example is non-conforming:</p>
 

From 052efb0a50f9a8e6fc7bad69e607396fe7a6ed1a Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 22 Jun 2022 15:28:44 -0400
Subject: [PATCH 35/42] Minor fixes

---
 source | 77 +++++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 46 insertions(+), 31 deletions(-)

diff --git a/source b/source
index 68f07a0aacd..539a5c25f29 100644
--- a/source
+++ b/source
@@ -11259,7 +11259,7 @@ console.assert(image.height === 200);</code></pre>
    <li><code>h4</code></li>
    <li><code>h5</code></li>
    <li><code>h6</code></li>
-   <li><code>hgroup</code> (if it has a descendant <code>h1</code> to <code>h6</code> element)
+   <li><code>hgroup</code> (if it has a descendant <code>h1</code> to <code>h6</code> element)</li>
   </ul>
 
 
@@ -17193,13 +17193,12 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>hgroup</code> element <span>represents</span> a heading and related content.
-  The element may be used to group an <code>h1</code>&ndash;<code>h6</code> element,
-  with one or more <code>p</code> elements containing content representing a subheading,
-  alternative title, or tagline.</p>
+  <p>The <code>hgroup</code> element <span>represents</span> a heading and related content. The
+  element may be used to group an <code>h1</code>&ndash;<code>h6</code> element with one or more
+  <code>p</code> elements containing content representing a subheading, alternative title, or
+  tagline.</p>
 
   <div class="example">
-
    <p>Here are some examples of valid headings contained within an <code>hgroup</code> element.</p>
 
     <pre><code class="html">&lt;hgroup&gt;
@@ -17211,7 +17210,6 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;h1&gt;Dr. Strangelove&lt;/h1&gt;
  &lt;p&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/p&gt;
 &lt;/hgroup&gt;</code></pre>
-
   </div>
 
   <h4>The <dfn element><code>header</code></dfn> element</h4>
@@ -17617,9 +17615,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <div w-nodev>
 
-  <p>The <span>outline</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>
+  <p>The <span>outline</span> should 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>
 
@@ -17675,9 +17673,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>...results in 3 document headings:</p>
 
    <ol class="brief">
-    <li><p><code data-x="">&lt;hgroup id="document-title">...&lt;/hgroup></code> consisting of <code
-    data-x="">&lt;h1>HTML: Living Standard&lt;/h1></code> and <code
-    data-x="">&lt;p>Last Updated 12 August 2016&lt;/p></code>.</p></li>
+    <li><p><code data-x="">&lt;h1>HTML: Living Standard&lt;/h1></code></li>
 
     <li><p><code data-x="">&lt;h2>Table of contents&lt;/h2></code>.</p></li>
 
@@ -17718,22 +17714,29 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>Its <span>outline</span> could be presented as follows:</p>
 
    <ol class="brief">
-    <li> The Tax Book
+    <li>
+     The Tax Book
      <ol class="brief">
-      <li> Earning money
+      <li>
+       Earning money
        <ol class="brief">
-        <li> Getting a job
+        <li>Getting a job</li>
        </ol>
-      <li> Spending money
+      </li>
+      <li>
+       Spending money
        <ol class="brief">
-        <li> Cheap things
-        <li> Expensive things
+        <li>Cheap things</li>
+        <li>Expensive things</li>
        </ol>
-      <li> Investing money
-      <li> Losing money
+      </li>
+      <li>Investing money</li>
+      <li>
+       Losing money
        <ol class="brief">
-        <li> Poor judgement
+        <li>Poor judgement</li>
        </ol>
+      </li>
      </ol>
    </ol>
 
@@ -17754,13 +17757,13 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;h1>Carambola&lt;/h1>
 &lt;p>Star.&lt;/p></code></pre>
 
-  <p>The document's <span>outline</span> could be presented as follows:</p>
+   <p>The document's <span>outline</span> could be presented as follows:</p>
 
-  <ol class="brief">
-    <li> Apples
-    <li> Bananas
-    <li> Carambola
-  </ol>
+   <ol class="brief">
+     <li>Apples</li>
+     <li>Bananas</li>
+     <li>Carambola</li>
+   </ol>
   </div>
 
   <div class="example">
@@ -17784,10 +17787,11 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <ol class="brief">
     <li>
      <ol class="brief">
-      <li> Apples
-      <li> Bananas
-      <li> Carambola
+      <li>Apples</li>
+      <li>Bananas</li>
+      <li>Carambola</li>
      </ol>
+    </li>
    </ol>
   </div>
 
@@ -17802,6 +17806,17 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
  &lt;p>Please, we beg of you, send help! We're stuck in the server room!&lt;/p>
 &lt;h1>Feathers&lt;/h1>
 &lt;p>Epidermal growths.&lt;/p></code></pre>
+
+  <p>The document's <span>outline</span> could be presented as follows:</p>
+
+  <ol class="brief">
+    <li>
+     <ol class="brief">
+      <li>A plea from our caretakers</li>
+     </ol>
+    </li>
+    <li>Feathers</li>
+   </ol>
   </div>
 
   <div class="example">

From becd7b3993872008416148d4b0ce34d2107bc7b4 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Thu, 23 Jun 2022 16:14:56 -0400
Subject: [PATCH 36/42] Attempt to fix remaining review comments

---
 source | 61 +++++++++++++++-------------------------------------------
 1 file changed, 16 insertions(+), 45 deletions(-)

diff --git a/source b/source
index 539a5c25f29..dfb0bc99d74 100644
--- a/source
+++ b/source
@@ -11232,8 +11232,8 @@ console.assert(image.height === 200);</code></pre>
 
   <h6>Sectioning content</h6>
 
-  <p><dfn export>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>
+  <p><dfn export>Sectioning content</dfn> is content that defines the scope of <code>header</code>
+  and <code>footer</code> elements.</p>
 
   <!-- when updating this also update the category index -->
   <ul class="brief category-list">
@@ -17227,8 +17227,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor is <span>the body
-   element</span>: <a href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
+   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
+   element is <span>the body element</span>: <a
+   href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
@@ -17322,8 +17323,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor is <span>the body
-   element</span>: <a href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
+   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
+   element is <span>the body element</span>: <a
+   href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
@@ -17351,8 +17353,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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> 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 <span>sectioning root</span>
+  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>
@@ -17575,52 +17577,21 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <h4><dfn>Headings and sections</dfn></h4>
 
-  <p><span>Heading content</span> elements have a <dfn>heading level</dfn>, which is an unsigned
-  integer. It is determined as follows for a given <span>heading content</span> element
-  <var>heading</var>:</p>
-
-  <ol>
-   <li>
-    <p>Switch on <var>heading</var>:</p>
-
-    <dl class="switch">
-     <dt><code>h1</code></dt>
-     <dd>Return 1.</dd>
-
-     <dt><code>h2</code></dt>
-     <dd>Return 2.</dd>
-
-     <dt><code>h3</code></dt>
-     <dd>Return 3.</dd>
-
-     <dt><code>h4</code></dt>
-     <dd>Return 4.</dd>
+  <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is given
+  by the number in the element's name.</p>
 
-     <dt><code>h5</code></dt>
-     <dd>Return 5.</dd>
-
-     <dt><code>h6</code></dt>
-     <dd>Return 6.</dd>
-    </dl>
-   </li>
-  </ol>
-
-  <p>A <span>heading content</span> element <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
-  less parent sections the <span data-x="concept-heading">heading</span> has.</p>
+  <p>These elements <span data-x="represents">represent</span> <dfn
+  data-x="concept-heading">headings</dfn>. The lower a <span
+  data-x="concept-heading">heading</span>'s <span>heading level</span> is, the fewer parent sections
+  the <span data-x="concept-heading">heading</span> has.</p>
 
   <p>The <dfn>outline</dfn> is all <span data-x="concept-heading">headings</span> in a
   document, in <span>tree order</span>.</p>
 
-  <div w-nodev>
-
   <p>The <span>outline</span> should 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>
-
   <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 the <span>outline</span> should have a
   <span>heading level</span> of 1.</p>

From a1b9930ed7521a43c8b399a02e16c04f31ab7977 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Thu, 23 Jun 2022 16:20:09 -0400
Subject: [PATCH 37/42] This link no longer seems relevant

---
 source | 2 --
 1 file changed, 2 deletions(-)

diff --git a/source b/source
index dfb0bc99d74..03008210e0b 100644
--- a/source
+++ b/source
@@ -11243,8 +11243,6 @@ console.assert(image.height === 200);</code></pre>
    <li><code>section</code></li>
   </ul>
 
-  <p>See the section on <span>headings and sections</span> for further details.</p>
-
 
   <h6>Heading content</h6>
 

From 9014ace4b5d598c1cb18c689be91fb127464a594 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 29 Jun 2022 14:30:54 +0900
Subject: [PATCH 38/42] Updates from zcorpan's review

---
 source | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/source b/source
index 03008210e0b..bdd05793777 100644
--- a/source
+++ b/source
@@ -16339,7 +16339,7 @@ console.log(style.disabled); // false</code></pre>
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd><span data-x="sectioning root">sectioning root</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>As the second element in an <code>html</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
@@ -16382,9 +16382,9 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
   <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
 
-  <p>The <code>body</code> element is the <dfn data-x="sectioning root">sectioning
-  root</dfn> of a document. The <span data-x="sectioning root">sectioning
-  root</span> delineates the scope of the <span>outline</span>.</p>
+  <p>The <code>body</code> element is the <dfn>sectioning root</dfn> of a document. The <span
+  data-x="sectioning root">sectioning root</span> delineates the scope of the
+  <span>outline</span>.</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
@@ -17333,7 +17333,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   </dl>
 
   <p>The <code>footer</code> element <span>represents</span> a footer for its nearest ancestor
-  <span>sectioning content</span> element. A footer typically
+  <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>
 
@@ -17580,8 +17580,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <p>These elements <span data-x="represents">represent</span> <dfn
   data-x="concept-heading">headings</dfn>. The lower a <span
-  data-x="concept-heading">heading</span>'s <span>heading level</span> is, the fewer parent sections
-  the <span data-x="concept-heading">heading</span> has.</p>
+  data-x="concept-heading">heading</span>'s <span>heading level</span> is, the fewer ancestor
+  sections the <span data-x="concept-heading">heading</span> has.</p>
 
   <p>The <dfn>outline</dfn> is all <span data-x="concept-heading">headings</span> in a
   document, in <span>tree order</span>.</p>
@@ -17590,13 +17590,13 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   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>
 
-  <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 the <span>outline</span> should have a
-  <span>heading level</span> of 1.</p>
+  <p>If a document has one or more <span data-x="concept-heading">headings</span>, at least a
+  single <span data-x="concept-heading">heading</span> within the <span>outline</span> should 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 the <span>outline</span> must
-  have a <span>heading level</span> that is less, equal, or 1 greater than <var>lead</var>'s
+  have a <span>heading level</span> that is less than, equal to, or 1 greater than <var>lead</var>'s
   <span>heading level</span>.</p>
 
   <div class="example">
@@ -122113,7 +122113,7 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>body</code></th>
      <td>Document body</td>
-     <td>none</td>
+     <td><span>sectioning root</span></td>
      <td><code>html</code></td>
      <td><span data-x="Flow content">flow</span></td>
      <td><span data-x="global attributes">globals</span>;
@@ -123684,6 +123684,13 @@ interface <dfn interface>External</dfn> {
      <td>
       &mdash;
 
+   <tr>
+     <td> <span data-x="sectioning root">Sectioning roots</span>
+     <td>
+      <code>body</code>
+     <td>
+      &mdash;
+
     <tr>
      <td> <span>Heading content</span>
      <td>

From 71928c0a3dd6e69373d03f81e338e65a37d10e66 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 29 Jun 2022 14:36:30 +0900
Subject: [PATCH 39/42] Remove "sectioning root" again

---
 source | 44 +++++++++++++++-----------------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/source b/source
index bdd05793777..1a4064a74a0 100644
--- a/source
+++ b/source
@@ -16339,7 +16339,7 @@ console.log(style.disabled); // false</code></pre>
 
   <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>
@@ -16382,10 +16382,6 @@ interface <dfn interface>HTMLBodyElement</dfn> : <span>HTMLElement</span> {
 
   <p>The <code>body</code> element <span>represents</span> the contents of the document.</p>
 
-  <p>The <code>body</code> element is the <dfn>sectioning root</dfn> of a document. The <span
-  data-x="sectioning root">sectioning root</span> delineates the scope of the
-  <span>outline</span>.</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
   a document's <code>body</code> element.</p>
@@ -17225,13 +17221,12 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
-   element is <span>the body element</span>: <a
+   <dd>If there is an ancestor <span>sectioning content</span> element: <a
    href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
-   href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
+   href="https://w3c.github.io/html-aam/#el-header">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-header">for authors</a>; <a
-   href="https://w3c.github.io/html-aam/#el-header">for implementers</a>.</dd>
+   href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers</a>.</dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
@@ -17321,21 +17316,20 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If the nearest ancestor <span>sectioning content</span> or <span>sectioning root</span>
-   element is <span>the body element</span>: <a
+   <dd>If there is an ancestor ancestor <span>sectioning content</span> element: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
-   href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
+   href="https://w3c.github.io/html-aam/#el-footer">for implementers</a>.</dd>
    <dd>Otherwise: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
-   href="https://w3c.github.io/html-aam/#el-footer">for implementers</a>.</dd>
+   href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers</a>.</dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
    <dd>Uses <code>HTMLElement</code>.</dd>
   </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> element, or for <span>the body element</span> if there is no such
+  ancestor. 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, indices, long colophons, verbose license
@@ -17351,11 +17345,11 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
   <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 there is no ancestor <span>sectioning content</span> element, 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 itself <span>sectioning content</span>; it
+  doesn't introduce a new section.</p>
 
   <div class="example">
 
@@ -41522,7 +41516,6 @@ interface <dfn interface>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>
@@ -122113,7 +122106,7 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>body</code></th>
      <td>Document body</td>
-     <td><span>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>;
@@ -123684,13 +123677,6 @@ interface <dfn interface>External</dfn> {
      <td>
       &mdash;
 
-   <tr>
-     <td> <span data-x="sectioning root">Sectioning roots</span>
-     <td>
-      <code>body</code>
-     <td>
-      &mdash;
-
     <tr>
      <td> <span>Heading content</span>
      <td>

From de7ac7ba35a98dce26bf7bd421ab9f397959edb0 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 29 Jun 2022 14:56:59 +0900
Subject: [PATCH 40/42] Add back "Exposing outlines to users"; various example
 tweaks

---
 source | 105 ++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 70 insertions(+), 35 deletions(-)

diff --git a/source b/source
index 1a4064a74a0..25698aa6c19 100644
--- a/source
+++ b/source
@@ -17117,8 +17117,8 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <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>The semantics and meaning of these elements are defined in the section on <a
+  href="#headings-and-outlines">headings and outlines</a>.</p>
 
   <p>These elements have a <span>heading level</span> given by the number in their name. The
   <span>heading level</span> corresponds to the levels of nested sections. The <code>h1</code>
@@ -17567,7 +17567,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
 
 
-  <h4><dfn>Headings and sections</dfn></h4>
+  <h4><span id="headings-and-outlines"></span><span id="outlines"></span>Headings and outlines</h4>
 
   <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is given
   by the number in the element's name.</p>
@@ -17618,6 +17618,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+
+  <h5>Sample outlines</h5>
+
   <div class="example">
    <p>The following markup fragment:</p>
 
@@ -17723,12 +17726,47 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <p>The document's <span>outline</span> could be presented as follows:</p>
 
    <ol class="brief">
-     <li>Apples</li>
-     <li>Bananas</li>
-     <li>Carambola</li>
+    <li>Apples</li>
+    <li>Bananas</li>
+    <li>Carambola</li>
    </ol>
   </div>
 
+  <div class="example">
+   <p><code>header</code> elements do not influence the <span>outline</span> of a
+   document:</p>
+
+   <pre><code class="html">&lt;!DOCTYPE HTML>
+&lt;html lang="en">
+&lt;title>We're adopting a child! &mdash; Ray's blog&lt;/title>
+&lt;h1>Ray's blog&lt;/h1>
+&lt;article>
+ &lt;header>
+  &lt;nav>
+   &lt;a href="?t=-1d">Yesterday&lt;/a>;
+   &lt;a href="?t=-7d">Last week&lt;/a>;
+   &lt;a href="?t=-1m">Last month&lt;/a>
+  &lt;/nav>
+  &lt;h2>We're adopting a child!&lt;/h2>
+ &lt;/header>
+ &lt;p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.&lt;/p>
+&lt;/article>
+&lt;/html></code></pre>
+
+   <p>The document's <span>outline</span> could be presented as follows:</p>
+
+   <ol class="brief">
+    <li> Ray's blog
+     <ol class="brief">
+      <li> We're adopting a child!
+     </ol>
+   </ol>
+  </div>
+
+  <hr>
+
   <div class="example">
    <p>The following example is conforming, but not encouraged as it has no <span
    data-x="concept-heading">heading</span> whose <span>heading level</span> is 1:</p>
@@ -17739,15 +17777,19 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 &lt;section>
  &lt;h2>Apples&lt;/h2>
  &lt;p>Pomaceous.&lt;/p>
+&lt;/section>
+&lt;section>
  &lt;h2>Bananas&lt;/h2>
  &lt;p>Edible.&lt;/p>
+&lt;/section>
+&lt;section>
  &lt;h2>Carambola&lt;/h2>
  &lt;p>Star.&lt;/p>
 &lt;/section></code></pre>
 
-  <p>The document's <span>outline</span> could be presented as follows:</p>
+   <p>The document's <span>outline</span> could be presented as follows:</p>
 
-  <ol class="brief">
+   <ol class="brief">
     <li>
      <ol class="brief">
       <li>Apples</li>
@@ -17782,37 +17824,30 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    </ol>
   </div>
 
+
+  <h5>Exposing outlines to users</h5>
+
+  <p>User agents are encouraged to expose page <span data-x="outline">outlines</span> to users to
+  aid in navigation. This is especially true for non-visual media, e.g. screen readers.</p>
+
   <div class="example">
-   <p><code>header</code> elements do not influence the <span>outline</span> of a
-   document:</p>
+   <p>For instance, a user agent could map the arrow keys as follows:</p>
 
-   <pre><code class="html">&lt;!DOCTYPE HTML>
-&lt;html lang="en">
-&lt;title>We're adopting a child! &mdash; Ray's blog&lt;/title>
-&lt;h1>Ray's blog&lt;/h1>
-&lt;article>
- &lt;header>
-  &lt;nav>
-   &lt;a href="?t=-1d">Yesterday&lt;/a>;
-   &lt;a href="?t=-7d">Last week&lt;/a>;
-   &lt;a href="?t=-1m">Last month&lt;/a>
-  &lt;/nav>
-  &lt;h2>We're adopting a child!&lt;/h2>
- &lt;/header>
- &lt;p>As of today, Janine and I have signed the papers to become
- the proud parents of baby Diane! We've been looking forward to
- this day for weeks.&lt;/p>
-&lt;/article>
-&lt;/html></code></pre>
+   <dl>
+    <dt><kbd><kbd>Shift</kbd> + <kbd>&larr; Left</kbd></kbd></dt>
+    <dd>Go to previous heading</dd>
 
-   <p>The document's <span>outline</span> could be presented as follows:</p>
+    <dt><kbd><kbd>Shift</kbd> + <kbd>&rarr; Right</kbd></kbd></dt>
+    <dd>Go to next heading</dd>
 
-   <ol class="brief">
-    <li> Ray's blog
-     <ol class="brief">
-      <li> We're adopting a child!
-     </ol>
-   </ol>
+    <dt><kbd><kbd>Shift</kbd> + <kbd>&uarr; Up</kbd></kbd></dt>
+    <dd>Go to next heading whose <span data-x="heading level">level</span> is one less than the
+    current heading's level</dd>
+
+    <dt><kbd><kbd>Shift</kbd> + <kbd>&darr; Down</kbd></kbd></dt>
+    <dd>Go to next heading whose <span data-x="heading level">level</span> is the same as the
+    current heading's level</dd>
+   </dl>
   </div>
 
 

From a7004a980f132e26ae85b15a938a270d5a7c6221 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 29 Jun 2022 17:23:54 +0900
Subject: [PATCH 41/42] Fix extra "ancestor"

---
 source | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source b/source
index 25698aa6c19..c15af0f28c9 100644
--- a/source
+++ b/source
@@ -17316,7 +17316,7 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Global attributes</span></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
-   <dd>If there is an ancestor ancestor <span>sectioning content</span> element: <a
+   <dd>If there is an ancestor <span>sectioning content</span> element: <a
    href="https://w3c.github.io/html-aria/#el-footer">for authors</a>; <a
    href="https://w3c.github.io/html-aam/#el-footer">for implementers</a>.</dd>
    <dd>Otherwise: <a

From dd8136167b7a23c57111df32399363b7fbb45c5a Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Fri, 1 Jul 2022 13:17:18 +0900
Subject: [PATCH 42/42] Add missing "None" for td category

---
 source | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source b/source
index c15af0f28c9..2e415206a49 100644
--- a/source
+++ b/source
@@ -41445,6 +41445,7 @@ interface <dfn interface>HTMLTableRowElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
+   <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>