Include grouping (#28)

* Include grouping

* Rebuild docs

Author: ericwbailey

docs/index.html

@@ -100,6 +100,73 @@ <h2 id="title-about">About</h2>
 <!-- Start of #main -->
 <main id="main" tabindex="-1">
 
+<!-- Start of #section-grouping -->
+<section id="section-grouping" aria-labelledby="title-grouping">
+  <h2 id="title-grouping">Grouping</h2>
+
+  <address aria-labelledby="subsection-address">
+    <h3 id="subsection-address">Address</h3>
+    <p><cite>Represents the contact information for its enclosing section. If it is a child of the body element, then it applies to the document as a whole.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-address-element/">HTML5 Doctor prognosis of <code translate="no">&lt;address&gt;</code></a>.</p>
+  </address>
+
+  <article aria-labelledby="subsection-article">
+    <h3 id="subsection-article">Article</h3>
+    <p><cite>Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-article-element/">HTML5 Doctor prognosis of <code translate="no">&lt;article&gt;</code></a>.</p>
+  </article>
+
+  <aside aria-labelledby="subsection-aside">
+    <h3 id="subsection-aside">Aside</h3>
+    <p><cite>Represents a section of a page consisting of content that is tangentially related to the content around the <code translate="no">&lt;aside&gt;</code> element, and which could be considered separate from that content.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/aside-revisited/">HTML5 Doctor prognosis of <code translate="no">&lt;aside&gt;</code></a>.</p>
+  </aside>
+
+  <footer aria-labelledby="subsection-footer">
+    <h3 id="subsection-footer">Footer</h3>
+    <p><cite>Represents the &ldquo;footer&rdquo; of a document or section of a document. The footer element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-footer-element-update/">HTML5 Doctor prognosis of <code translate="no">&lt;footer&gt;</code></a>.</p>
+  </footer>
+
+  <form aria-labelledby="subsection-form">
+    <h3 id="subsection-form">Form</h3>
+    <p><cite>The &ldquo;form&rdquo; element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.</cite></p>
+  </form>
+
+  <header aria-labelledby="subsection-header">
+    <h3 id="subsection-header">Header</h3>
+    <p><cite>Represents the &ldquo;header&rdquo; of a document or section of a document. The header element is typically used to group a set of <code translate="no">h1</code>–<code translate="no">h6</code> elements to mark up a page's title with its subtitle or tagline.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-header-element/">HTML5 Doctor prognosis of <code translate="no">&lt;header&gt;</code></a>.</p>
+  </header>
+
+  <nav aria-labelledby="subsection-nav">
+    <h3 id="subsection-nav">Nav</h3>
+    <p><cite>Represents navigation for a document. The <code translate="no">&lt;nav&gt;</code> element is a section containing links to other documents or to parts within the current document.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/nav-element/">HTML5 Doctor prognosis of <code translate="no">&lt;nav&gt;</code></a>.</p>
+  </nav>
+
+  <search aria-labelledby="subsection-search">
+    <h3 id="subsection-search">Search</h3>
+    <p><cite>A region that contains a collection of items and objects that, as a whole, combine to create a search facility.</cite></p>
+  </search>
+
+  <section aria-labelledby="subsection-section">
+    <h3 id="subsection-section">Section</h3>
+    <p><cite>Represents a generic document or application section.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-section-element/">HTML5 Doctor prognosis of <code translate="no">&lt;section&gt;</code></a>.</p>
+  </section>
+
+  <h2 id="notes-sections">Notes:</h2>
+  <ul>
+    <li><small><code translate="no">&lt;body&gt;</code> is intentionally left out, as it can only be declared once per document.</small></li>
+    <li><small><code translate="no">&lt;main&gt;</code> is also intentionally left out, as <a rel="external noopener" href="https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html">best practice is to only declare it once per document</a>.</small></li>
+    <li><small><code translate="no">aria-label</code> and <code translate="no">aria-labelledby</code> can be used to disambiguate landmarks when more than one is present. You may not need to do this <a rel="external noopener" href="https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html">if only one landmark is present</a>.</small></li>
+    <li><small><code translate="no">&lt;search&gt;</code>’s use may <a rel="external noopener" href="https://www.scottohara.me/blog/2023/03/24/search-element.html">require testing for support</a>.</small></li>
+  </ul>
+</section><!-- End of #section-grouping -->
+
+<hr />
+
 <!-- Start of #section-headings -->
 <section id="section-headings" aria-labelledby="title-headings">
   <h2 id="title-headings">Headings</h2>

views/index.hbs

@@ -20,6 +20,10 @@
 <!-- Start of #main -->
 <main id="main" tabindex="-1">
 
+{{> section.grouping}}
+
+<hr />
+
 {{> section.headings}}
 
 <hr />