Update in-page-toc.md

Author: donohuech

common-design-patterns/in-page-toc.md

@@ -3,11 +3,11 @@ altLangPage: https://conception.canada.ca/configurations-conception-communes/tab
 date: null
 dateModified: '2025-08-20'
 description: null
-title: In-page table of contents design pattern
+title: In-page table of contents
 ---
 
 <p>The in-page table of contents pattern is a list of links that lead to subsections of the same page.</p>
-<p><b>On this page</b></p>
+<h2>On this page</h2>
 <ul>
   <li><a href="#when-to-use">When to use</a></li>
   <li><a href="#what-to-avoid">What to avoid</a></li>
@@ -16,7 +16,7 @@ title: In-page table of contents design pattern
   <li><a href="#latest-changes">Latest changes</a></li>
 </ul>
 <section>
-  <h2>When to use</h2>
+  <h2 id="when-to-use">When to use</h2>
   <p>Use the in-page table of contents pattern to:</p>
   <ul>
     <li>provide an outline for the content of a single page that has multiple subsections</li>
@@ -29,11 +29,11 @@ title: In-page table of contents design pattern
   </ul>
 </section>
 <section>
-  <h2>What to avoid</h2>
+  <h2 id="what-to-avoid">What to avoid</h2>
   <p>Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.</p>
 </section>
 <section>
-  <h2>Content and design</h2>
+  <h2 id="content-and-design">Content and design</h2>
   <ul>
     <li>Always position the in-page table of contents pattern at the top of the page, just below the H1 and any introductory text, before the main content begins</li>
     <li>Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site</li>
@@ -43,7 +43,7 @@ title: In-page table of contents design pattern
   </ul>
   <h3>Visual example</h3>
   <figure class="mrgn-bttm-lg">
-   <img alt='The heading "On this page" is written in bold, black font above a list of links. Below the heading is a bulleted vertical list containing three items.' class="img-responsive center-block" src="/images/in-page-toc-01.png"/>
+   <img alt='The heading "On this page" is written in bold, black font above a list of links.' class="img-responsive center-block" src="/images/in-page-toc-01.png"/>
     <details>
       <summary>Image description</summary>
       <p>The heading "On this page" is written in bold, black font above a list of links. Below the heading is a bulleted vertical list containing three items:</p>
@@ -57,15 +57,15 @@ title: In-page table of contents design pattern
   </figure>
 </section>
 <section>
-  <h2>How to implement</h2>
+  <h2 id="how-to-implement">How to implement</h2>
   <h3>GCWeb (WET) theme implementation reference</h3>
   <ul>
     <li><a href="https://wet-boew.github.io/GCWeb/components/gc-toc/toc-en.html">In-page table of contents (GCWeb)</a></li>
   </ul>
 </section>
 <section>
-  <h2>Latest changes</h2>
-  <dl>
+  <h2 id="latest-changes">Latest changes</h2>
+  <dl class="dl-horizontal">
     <dt>2025-08-20</dt>
     <dd>Revised the visual examples and headings on the page to align more closely with our newer guidance pieces. Added links to the GCWeb implementation for easier reference.</dd>
   </dl>