diff --git a/src/Generators/HTML.php b/src/Generators/HTML.php
index 681699ba65..4e63e4fc0a 100644
--- a/src/Generators/HTML.php
+++ b/src/Generators/HTML.php
@@ -53,6 +53,19 @@ class HTML extends Generator
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -100,6 +113,13 @@ class HTML extends Generator
         }
     </style>';
 
+    /**
+     * List of seen slugified anchors to ensure uniqueness.
+     *
+     * @var array<string, true>
+     */
+    private $seenAnchors = [];
+
 
     /**
      * Generates the documentation for a standard.
@@ -119,6 +139,10 @@ public function generate()
         $content = ob_get_contents();
         ob_end_clean();
 
+        // Clear anchor cache after Documentation generation.
+        // The anchor generation for the TOC anchor links will use the same logic, so should end up with the same unique slugs.
+        $this->seenAnchors = [];
+
         if (trim($content) !== '') {
             echo $this->getFormattedHeader();
             echo $this->getFormattedToc();
@@ -215,7 +239,7 @@ protected function getFormattedToc()
             $doc->load($file);
             $documentation = $doc->getElementsByTagName('documentation')->item(0);
             $title         = $this->getTitle($documentation);
-            $output       .= sprintf($listItemTemplate, str_replace(' ', '-', $title), $title);
+            $output       .= sprintf($listItemTemplate, $this->titleToAnchor($title), $title);
         }
 
         $output .= '  </ul>'.PHP_EOL;
@@ -290,14 +314,46 @@ public function processSniff(DOMNode $doc)
 
         if (trim($content) !== '') {
             $title = $this->getTitle($doc);
-            echo '  <a name="'.str_replace(' ', '-', $title).'" />'.PHP_EOL;
-            echo '  <h2>'.$title.'</h2>'.PHP_EOL;
+            printf(
+                '  <h2 id="%1$s">%2$s<a class="sniffanchor" href="#%1$s"> &sect; </a></h2>'.PHP_EOL,
+                $this->titleToAnchor($title),
+                $title
+            );
             echo $content;
         }
 
     }//end processSniff()
 
 
+    /**
+     * Transform a title to a string which can be used as an HTML anchor.
+     *
+     * @param string $title The title.
+     *
+     * @since 3.12.0
+     *
+     * @return string
+     */
+    private function titleToAnchor($title)
+    {
+        // Slugify the text.
+        $title = strtolower($title);
+        $title = preg_replace('`[^a-z0-9\._-]`', '-', $title);
+
+        if (isset($this->seenAnchors[$title]) === true) {
+            // Try to find a unique anchor for this title.
+            for ($i = 2; (isset($this->seenAnchors[$title.'-'.$i]) === true); $i++);
+            $title .= '-'.$i;
+        }
+
+        // Add to "seen" list.
+        $this->seenAnchors[$title] = true;
+
+        return $title;
+
+    }//end titleToAnchor()
+
+
     /**
      * Print a text block found in a standard.
      *
diff --git a/tests/Core/Generators/AnchorLinksTest.xml b/tests/Core/Generators/AnchorLinksTest.xml
new file mode 100644
index 0000000000..0e66fabc9f
--- /dev/null
+++ b/tests/Core/Generators/AnchorLinksTest.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="GeneratorTest" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/PHPCSStandards/PHP_CodeSniffer/master/phpcs.xsd">
+
+    <config name="installed_paths" value="./tests/Core/Generators/Fixtures/"/>
+
+    <rule ref="StandardWithDocs.Content.DocumentationTitleToAnchorSlug1"/>
+    <rule ref="StandardWithDocs.Content.DocumentationTitleToAnchorSlug2"/>
+    <rule ref="StandardWithDocs.Content.DocumentationTitleToAnchorSlug3"/>
+
+</ruleset>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html
index 7726809fea..a51ad92a86 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-blank-lines" />
-  <h2>Code Comparison, blank lines</h2>
+  <h2 id="code-comparison--blank-lines">Code Comparison, blank lines<a class="sniffanchor" href="#code-comparison--blank-lines"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html
index 5897d87131..881bac305f 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-block-length" />
-  <h2>Code Comparison, block length</h2>
+  <h2 id="code-comparison--block-length">Code Comparison, block length<a class="sniffanchor" href="#code-comparison--block-length"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html
index dbf5100ba7..a325def172 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-char-encoding" />
-  <h2>Code Comparison, char encoding</h2>
+  <h2 id="code-comparison--char-encoding">Code Comparison, char encoding<a class="sniffanchor" href="#code-comparison--char-encoding"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html
index d1b3483535..b1e83a42b3 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-line-length" />
-  <h2>Code Comparison, line length</h2>
+  <h2 id="code-comparison--line-length">Code Comparison, line length<a class="sniffanchor" href="#code-comparison--line-length"> &sect; </a></h2>
   <p class="text">Ensure there is no PHP &quot;Warning: str_repeat(): Second argument has to be greater than or equal to 0&quot;.<br/>
 Ref: squizlabs/PHP_CodeSniffer#2522</p>
   <table class="code-comparison">
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html
index a2e7c6a97f..dbe9966de5 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Title,-line-wrapping" />
-  <h2>Code Title, line wrapping</h2>
+  <h2 id="code-title--line-wrapping">Code Title, line wrapping<a class="sniffanchor" href="#code-title--line-wrapping"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html
index 88eab60199..65a5a25f31 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Title,-whitespace-handling" />
-  <h2>Code Title, whitespace handling</h2>
+  <h2 id="code-title--whitespace-handling">Code Title, whitespace handling<a class="sniffanchor" href="#code-title--whitespace-handling"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html
index e1a11f7bde..e722651973 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="lowercase-title" />
-  <h2>lowercase title</h2>
+  <h2 id="lowercase-title">lowercase title<a class="sniffanchor" href="#lowercase-title"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html
index b4963bea4f..2640a6bfd6 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="This-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title" />
-  <h2>This is a very very very very very very very very very very very long title</h2>
+  <h2 id="this-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title">This is a very very very very very very very very very very very long title<a class="sniffanchor" href="#this-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html
index c9abcb1cba..b83b5e6795 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Documentation-Title-PCRE-Fallback" />
-  <h2>Documentation Title PCRE Fallback</h2>
+  <h2 id="documentation-title-pcre-fallback">Documentation Title PCRE Fallback<a class="sniffanchor" href="#documentation-title-pcre-fallback"> &sect; </a></h2>
   <p class="text">Testing the document title can get determined from the sniff name if missing.</p>
   <p class="text">This file name contains an acronym on purpose to test the word splitting.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleToAnchorSlug.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleToAnchorSlug.html
new file mode 100644
index 0000000000..1d99239917
--- /dev/null
+++ b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleToAnchorSlug.html
@@ -0,0 +1,107 @@
+<html>
+ <head>
+  <title>GeneratorTest Coding Standards</title>
+  <style>
+        body {
+            background-color: #FFFFFF;
+            font-size: 14px;
+            font-family: Arial, Helvetica, sans-serif;
+            color: #000000;
+        }
+
+        h1 {
+            color: #666666;
+            font-size: 20px;
+            font-weight: bold;
+            margin-top: 0px;
+            background-color: #E6E7E8;
+            padding: 20px;
+            border: 1px solid #BBBBBB;
+        }
+
+        h2 {
+            color: #00A5E3;
+            font-size: 16px;
+            font-weight: normal;
+            margin-top: 50px;
+        }
+
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
+        .code-comparison {
+            width: 100%;
+        }
+
+        .code-comparison td {
+            border: 1px solid #CCCCCC;
+        }
+
+        .code-comparison-title, .code-comparison-code {
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 12px;
+            color: #000000;
+            vertical-align: top;
+            padding: 4px;
+            width: 50%;
+            background-color: #F1F1F1;
+            line-height: 15px;
+        }
+
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
+        .code-comparison-code {
+            font-family: Courier;
+            background-color: #F9F9F9;
+        }
+
+        .code-comparison-highlight {
+            background-color: #DDF1F7;
+            border: 1px solid #00A5E3;
+            line-height: 15px;
+        }
+
+        .tag-line {
+            text-align: center;
+            width: 100%;
+            margin-top: 30px;
+            font-size: 12px;
+        }
+
+        .tag-line a {
+            color: #000000;
+        }
+    </style>
+ </head>
+ <body>
+  <h1>GeneratorTest Coding Standards</h1>
+  <h2>Table of Contents</h2>
+  <ul class="toc">
+   <li><a href="#url-enc-de-non---sc-----chars">URL enc@de non-àscíï chars</a></li>
+   <li><a href="#url-enc-de-non---sc-----chars-2">URL enc@de non-àscíï chars</a></li>
+   <li><a href="#url-enc-de-non---sc-----chars-3">URL enc@de non-àscíï chars</a></li>
+  </ul>
+  <h2 id="url-enc-de-non---sc-----chars">URL enc@de non-àscíï chars<a class="sniffanchor" href="#url-enc-de-non---sc-----chars"> &sect; </a></h2>
+  <p class="text">The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.</p>
+  <h2 id="url-enc-de-non---sc-----chars-2">URL enc@de non-àscíï chars<a class="sniffanchor" href="#url-enc-de-non---sc-----chars-2"> &sect; </a></h2>
+  <p class="text">The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.<br/>
+A duplicate anchor link will get a numeric suffix.</p>
+  <h2 id="url-enc-de-non---sc-----chars-3">URL enc@de non-àscíï chars<a class="sniffanchor" href="#url-enc-de-non---sc-----chars-3"> &sect; </a></h2>
+  <p class="text">The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.<br/>
+A duplicate anchor link will get a numeric suffix.</p>
+  <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
+ </body>
+</html>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html
index 3176ce9dee..59fcc7eb97 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-mismatched-code-blocks" />
-  <h2>Code Comparison, mismatched code blocks</h2>
+  <h2 id="code-comparison--mismatched-code-blocks">Code Comparison, mismatched code blocks<a class="sniffanchor" href="#code-comparison--mismatched-code-blocks"> &sect; </a></h2>
   <p class="text">This doc has two code elements, one only has a title, one has actual code. Unbalanced</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html
index 1f63a58591..9f29d6af63 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-missing-code-element" />
-  <h2>Code Comparison, missing code element</h2>
+  <h2 id="code-comparison--missing-code-element">Code Comparison, missing code element<a class="sniffanchor" href="#code-comparison--missing-code-element"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html
index 964e800232..35d9144ac9 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-no-code" />
-  <h2>Code Comparison, no code</h2>
+  <h2 id="code-comparison--no-code">Code Comparison, no code<a class="sniffanchor" href="#code-comparison--no-code"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html
index 0cbe32caf2..b09f3ccf73 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-no-content" />
-  <h2>Code Comparison, no content</h2>
+  <h2 id="code-comparison--no-content">Code Comparison, no content<a class="sniffanchor" href="#code-comparison--no-content"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html
index 14ad04ad85..7ee4bee477 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-one-empty-code-element" />
-  <h2>Code Comparison, one empty code element</h2>
+  <h2 id="code-comparison--one-empty-code-element">Code Comparison, one empty code element<a class="sniffanchor" href="#code-comparison--one-empty-code-element"> &sect; </a></h2>
   <p class="text">This doc has two code elements, but only one of them has a title and actual code.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html
index fcf0131ccc..4cc553d4c0 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Comparison,-two-empty-code-elements" />
-  <h2>Code Comparison, two empty code elements</h2>
+  <h2 id="code-comparison--two-empty-code-elements">Code Comparison, two empty code elements<a class="sniffanchor" href="#code-comparison--two-empty-code-elements"> &sect; </a></h2>
   <p class="text">This doc has two code elements, but neither of them contain any information.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html
index 6e2af6ae8f..0efa0572fc 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Title,-empty" />
-  <h2>Code Title, empty</h2>
+  <h2 id="code-title--empty">Code Title, empty<a class="sniffanchor" href="#code-title--empty"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html
index 8988712a03..755f5a18e1 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Code-Title,-missing" />
-  <h2>Code Title, missing</h2>
+  <h2 id="code-title--missing">Code Title, missing<a class="sniffanchor" href="#code-title--missing"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleEmpty.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleEmpty.html
index 727e0e0706..7d0d9aa554 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleEmpty.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleEmpty.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Documentation-Title-Empty" />
-  <h2>Documentation Title Empty</h2>
+  <h2 id="documentation-title-empty">Documentation Title Empty<a class="sniffanchor" href="#documentation-title-empty"> &sect; </a></h2>
   <p class="text">The above &quot;documentation&quot; element has an empty title attribute.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleMissing.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleMissing.html
index 2da51a0f0d..2f51fd4741 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleMissing.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidDocumentationTitleMissing.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Documentation-Title-Missing" />
-  <h2>Documentation Title Missing</h2>
+  <h2 id="documentation-title-missing">Documentation Title Missing<a class="sniffanchor" href="#documentation-title-missing"> &sect; </a></h2>
   <p class="text">The above &quot;documentation&quot; element is missing the title attribute.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidStandardNoContent.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidStandardNoContent.html
index 9f216091f9..2eecc8ae8c 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputInvalidStandardNoContent.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputInvalidStandardNoContent.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Standard-Element,-no-content" />
-  <h2>Standard Element, no content</h2>
+  <h2 id="standard-element--no-content">Standard Element, no content<a class="sniffanchor" href="#standard-element--no-content"> &sect; </a></h2>
   <table class="code-comparison">
    <tr>
     <th class="code-comparison-title">Valid: Lorem ipsum dolor sit amet.</th>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputOneDoc.html b/tests/Core/Generators/Expectations/ExpectedOutputOneDoc.html
index 30bcd76501..798ae63733 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputOneDoc.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputOneDoc.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="One-Standard-Block,-No-Code" />
-  <h2>One Standard Block, No Code</h2>
+  <h2 id="one-standard-block--no-code">One Standard Block, No Code<a class="sniffanchor" href="#one-standard-block--no-code"> &sect; </a></h2>
   <p class="text">Documentation contains one standard block and no code comparison.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputStandardBlankLines.html b/tests/Core/Generators/Expectations/ExpectedOutputStandardBlankLines.html
index b23f86921a..ceaab32a68 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputStandardBlankLines.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputStandardBlankLines.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Standard-Element,-blank-line-handling" />
-  <h2>Standard Element, blank line handling</h2>
+  <h2 id="standard-element--blank-line-handling">Standard Element, blank line handling<a class="sniffanchor" href="#standard-element--blank-line-handling"> &sect; </a></h2>
   <p class="text">There is a blank line at the start of this standard.</p>
   <p class="text">And the above blank line is also deliberate to test part of the logic.</p>
   <p class="text">Let&#039;s also end on a blank line to test that too.</p>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputStandardEncoding.html b/tests/Core/Generators/Expectations/ExpectedOutputStandardEncoding.html
index 09b98765e2..93a77d455c 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputStandardEncoding.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputStandardEncoding.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Standard-Element,-handling-of-HTML-tags" />
-  <h2>Standard Element, handling of HTML tags</h2>
+  <h2 id="standard-element--handling-of-html-tags">Standard Element, handling of HTML tags<a class="sniffanchor" href="#standard-element--handling-of-html-tags"> &sect; </a></h2>
   <p class="text">The use of <em>tags</em> in standard descriptions is allowed and their handling should be <em>safeguarded</em>.<br/>
 Other tags, like &lt;a href=&quot;example.com&quot;&gt;link&lt;/a&gt;, &lt;b&gt;bold&lt;/bold&gt;, &lt;script&gt;&lt;/script&gt; are not allowed and will be encoded for display when the HTML or Markdown report is used.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputStandardIndent.html b/tests/Core/Generators/Expectations/ExpectedOutputStandardIndent.html
index a5ae0dbecf..8cf7c3419c 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputStandardIndent.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputStandardIndent.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Standard-Element,-indentation-should-be-ignored" />
-  <h2>Standard Element, indentation should be ignored</h2>
+  <h2 id="standard-element--indentation-should-be-ignored">Standard Element, indentation should be ignored<a class="sniffanchor" href="#standard-element--indentation-should-be-ignored"> &sect; </a></h2>
   <p class="text">This line has no indentation.<br/>
 This line has 4 spaces indentation.<br/>
 This line has 8 spaces indentation.<br/>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputStandardLineWrapping.html b/tests/Core/Generators/Expectations/ExpectedOutputStandardLineWrapping.html
index 66ebcb091f..b9f4038a1f 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputStandardLineWrapping.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputStandardLineWrapping.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Standard-Element,-line-wrapping-handling" />
-  <h2>Standard Element, line wrapping handling</h2>
+  <h2 id="standard-element--line-wrapping-handling">Standard Element, line wrapping handling<a class="sniffanchor" href="#standard-element--line-wrapping-handling"> &sect; </a></h2>
   <p class="text">This line has to be exactly 99 chars to test part of the logic.------------------------------------<br/>
 And this line has to be exactly 100 chars.----------------------------------------------------------<br/>
 And here we have a line which should start wrapping as it is longer than 100 chars. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque iaculis enim quis hendrerit. Morbi ultrices in odio pharetra commodo.</p>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputStructureDocs.html b/tests/Core/Generators/Expectations/ExpectedOutputStructureDocs.html
index a7324d80fa..9aa1d6209b 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputStructureDocs.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputStructureDocs.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -77,17 +90,16 @@
   <h1>GeneratorTest Coding Standards</h1>
   <h2>Table of Contents</h2>
   <ul class="toc">
-   <li><a href="#No-Content">No Content</a></li>
-   <li><a href="#Code-Comparison-Only,-Missing-Standard-Block">Code Comparison Only, Missing Standard Block</a></li>
-   <li><a href="#One-Standard-Block,-Code-Comparison">One Standard Block, Code Comparison</a></li>
-   <li><a href="#One-Standard-Block,-No-Code">One Standard Block, No Code</a></li>
-   <li><a href="#One-Standard-Block,-Two-Code-Comparisons">One Standard Block, Two Code Comparisons</a></li>
-   <li><a href="#Two-Standard-Blocks,-No-Code">Two Standard Blocks, No Code</a></li>
-   <li><a href="#Two-Standard-Blocks,-One-Code-Comparison">Two Standard Blocks, One Code Comparison</a></li>
-   <li><a href="#Two-Standard-Blocks,-Three-Code-Comparisons">Two Standard Blocks, Three Code Comparisons</a></li>
+   <li><a href="#no-content">No Content</a></li>
+   <li><a href="#code-comparison-only--missing-standard-block">Code Comparison Only, Missing Standard Block</a></li>
+   <li><a href="#one-standard-block--code-comparison">One Standard Block, Code Comparison</a></li>
+   <li><a href="#one-standard-block--no-code">One Standard Block, No Code</a></li>
+   <li><a href="#one-standard-block--two-code-comparisons">One Standard Block, Two Code Comparisons</a></li>
+   <li><a href="#two-standard-blocks--no-code">Two Standard Blocks, No Code</a></li>
+   <li><a href="#two-standard-blocks--one-code-comparison">Two Standard Blocks, One Code Comparison</a></li>
+   <li><a href="#two-standard-blocks--three-code-comparisons">Two Standard Blocks, Three Code Comparisons</a></li>
   </ul>
-  <a name="Code-Comparison-Only,-Missing-Standard-Block" />
-  <h2>Code Comparison Only, Missing Standard Block</h2>
+  <h2 id="code-comparison-only--missing-standard-block">Code Comparison Only, Missing Standard Block<a class="sniffanchor" href="#code-comparison-only--missing-standard-block"> &sect; </a></h2>
   <table class="code-comparison">
    <tr>
     <th class="code-comparison-title">Valid: Lorem ipsum dolor sit amet.</th>
@@ -98,8 +110,7 @@ <h2>Code Comparison Only, Missing Standard Block</h2>
     <td class="code-comparison-code"><span class="code-comparison-highlight">class&nbsp;Comparison</span>&nbsp;{}</td>
    </tr>
   </table>
-  <a name="One-Standard-Block,-Code-Comparison" />
-  <h2>One Standard Block, Code Comparison</h2>
+  <h2 id="one-standard-block--code-comparison">One Standard Block, Code Comparison<a class="sniffanchor" href="#one-standard-block--code-comparison"> &sect; </a></h2>
   <p class="text">Documentation contains one standard block and one code comparison.</p>
   <table class="code-comparison">
    <tr>
@@ -111,11 +122,9 @@ <h2>One Standard Block, Code Comparison</h2>
     <td class="code-comparison-code"><span class="code-comparison-highlight">class&nbsp;Comparison</span>&nbsp;{}</td>
    </tr>
   </table>
-  <a name="One-Standard-Block,-No-Code" />
-  <h2>One Standard Block, No Code</h2>
+  <h2 id="one-standard-block--no-code">One Standard Block, No Code<a class="sniffanchor" href="#one-standard-block--no-code"> &sect; </a></h2>
   <p class="text">Documentation contains one standard block and no code comparison.</p>
-  <a name="One-Standard-Block,-Two-Code-Comparisons" />
-  <h2>One Standard Block, Two Code Comparisons</h2>
+  <h2 id="one-standard-block--two-code-comparisons">One Standard Block, Two Code Comparisons<a class="sniffanchor" href="#one-standard-block--two-code-comparisons"> &sect; </a></h2>
   <p class="text">Documentation contains one standard block and two code comparisons.</p>
   <table class="code-comparison">
    <tr>
@@ -137,12 +146,10 @@ <h2>One Standard Block, Two Code Comparisons</h2>
     <td class="code-comparison-code"><span class="code-comparison-highlight">$a</span>&nbsp;=&nbsp;10;</td>
    </tr>
   </table>
-  <a name="Two-Standard-Blocks,-No-Code" />
-  <h2>Two Standard Blocks, No Code</h2>
+  <h2 id="two-standard-blocks--no-code">Two Standard Blocks, No Code<a class="sniffanchor" href="#two-standard-blocks--no-code"> &sect; </a></h2>
   <p class="text">This is standard block one.</p>
   <p class="text">This is standard block two.</p>
-  <a name="Two-Standard-Blocks,-One-Code-Comparison" />
-  <h2>Two Standard Blocks, One Code Comparison</h2>
+  <h2 id="two-standard-blocks--one-code-comparison">Two Standard Blocks, One Code Comparison<a class="sniffanchor" href="#two-standard-blocks--one-code-comparison"> &sect; </a></h2>
   <p class="text">This is standard block one.</p>
   <table class="code-comparison">
    <tr>
@@ -155,8 +162,7 @@ <h2>Two Standard Blocks, One Code Comparison</h2>
    </tr>
   </table>
   <p class="text">This is standard block two.</p>
-  <a name="Two-Standard-Blocks,-Three-Code-Comparisons" />
-  <h2>Two Standard Blocks, Three Code Comparisons</h2>
+  <h2 id="two-standard-blocks--three-code-comparisons">Two Standard Blocks, Three Code Comparisons<a class="sniffanchor" href="#two-standard-blocks--three-code-comparisons"> &sect; </a></h2>
   <p class="text">This is standard block one.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedOneElmAtWrongLevel.html b/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedOneElmAtWrongLevel.html
index ff1f5d842e..82fe75004f 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedOneElmAtWrongLevel.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedOneElmAtWrongLevel.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="One-element-correct,-one-element-wrong-level" />
-  <h2>One element correct, one element wrong level</h2>
+  <h2 id="one-element-correct--one-element-wrong-level">One element correct, one element wrong level<a class="sniffanchor" href="#one-element-correct--one-element-wrong-level"> &sect; </a></h2>
   <p class="text">This is a standard block at the correct level.</p>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
  </body>
diff --git a/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedSuperfluousCodeElement.html b/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedSuperfluousCodeElement.html
index 6cd60d0cac..de06568db9 100644
--- a/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedSuperfluousCodeElement.html
+++ b/tests/Core/Generators/Expectations/ExpectedOutputUnsupportedSuperfluousCodeElement.html
@@ -26,6 +26,19 @@
             margin-top: 50px;
         }
 
+        h2 a.sniffanchor,
+        h2 a.sniffanchor {
+            color: #006C95;
+            opacity: 0;
+            padding: 0 3px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        h2:hover a.sniffanchor,
+        h2:focus a.sniffanchor {
+            opacity: 1;
+        }
+
         .code-comparison {
             width: 100%;
         }
@@ -75,8 +88,7 @@
  </head>
  <body>
   <h1>GeneratorTest Coding Standards</h1>
-  <a name="Superfluous-code-element" />
-  <h2>Superfluous code element</h2>
+  <h2 id="superfluous-code-element">Superfluous code element<a class="sniffanchor" href="#superfluous-code-element"> &sect; </a></h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug1Standard.xml b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug1Standard.xml
new file mode 100644
index 0000000000..4edae6918d
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug1Standard.xml
@@ -0,0 +1,7 @@
+<documentation title="URL enc@de non-àscíï chars">
+    <standard>
+    <![CDATA[
+    The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.
+    ]]>
+    </standard>
+</documentation>
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug2Standard.xml b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug2Standard.xml
new file mode 100644
index 0000000000..43956e3fc0
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug2Standard.xml
@@ -0,0 +1,8 @@
+<documentation title="URL enc@de non-àscíï chars">
+    <standard>
+    <![CDATA[
+    The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.
+    A duplicate anchor link will get a numeric suffix.
+    ]]>
+    </standard>
+</documentation>
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug3Standard.xml b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug3Standard.xml
new file mode 100644
index 0000000000..43956e3fc0
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Docs/Content/DocumentationTitleToAnchorSlug3Standard.xml
@@ -0,0 +1,8 @@
+<documentation title="URL enc@de non-àscíï chars">
+    <standard>
+    <![CDATA[
+    The documentation title has non-ascii characters, which will be slugified for use in an HTML anchor link.
+    A duplicate anchor link will get a numeric suffix.
+    ]]>
+    </standard>
+</documentation>
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug1Sniff.php b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug1Sniff.php
new file mode 100644
index 0000000000..472e23648c
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug1Sniff.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * Test fixture.
+ *
+ * @see \PHP_CodeSniffer\Tests\Core\Generators\GeneratorTest
+ */
+
+namespace Fixtures\StandardWithDocs\Sniffs\Content;
+
+use Fixtures\StandardWithDocs\Sniffs\DummySniff;
+
+final class DocumentationTitleToAnchorSlug1Sniff extends DummySniff {}
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug2Sniff.php b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug2Sniff.php
new file mode 100644
index 0000000000..e724eb9ff7
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug2Sniff.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * Test fixture.
+ *
+ * @see \PHP_CodeSniffer\Tests\Core\Generators\GeneratorTest
+ */
+
+namespace Fixtures\StandardWithDocs\Sniffs\Content;
+
+use Fixtures\StandardWithDocs\Sniffs\DummySniff;
+
+final class DocumentationTitleToAnchorSlug2Sniff extends DummySniff {}
diff --git a/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug3Sniff.php b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug3Sniff.php
new file mode 100644
index 0000000000..27b09e762a
--- /dev/null
+++ b/tests/Core/Generators/Fixtures/StandardWithDocs/Sniffs/Content/DocumentationTitleToAnchorSlug3Sniff.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * Test fixture.
+ *
+ * @see \PHP_CodeSniffer\Tests\Core\Generators\GeneratorTest
+ */
+
+namespace Fixtures\StandardWithDocs\Sniffs\Content;
+
+use Fixtures\StandardWithDocs\Sniffs\DummySniff;
+
+final class DocumentationTitleToAnchorSlug3Sniff extends DummySniff {}
diff --git a/tests/Core/Generators/HTMLTest.php b/tests/Core/Generators/HTMLTest.php
index 82f8d7faeb..a8ac84a8ab 100644
--- a/tests/Core/Generators/HTMLTest.php
+++ b/tests/Core/Generators/HTMLTest.php
@@ -242,6 +242,32 @@ public static function dataDocSpecifics()
     }//end dataDocSpecifics()
 
 
+    /**
+     * Test anchor links in the generated docs are slugified and unique.
+     *
+     * @return void
+     */
+    public function testAnchorLinks()
+    {
+        // Set up the ruleset.
+        $standard = __DIR__.'/AnchorLinksTest.xml';
+        $config   = new ConfigDouble(["--standard=$standard"]);
+        $ruleset  = new Ruleset($config);
+
+        $pathToExpected = __DIR__.'/Expectations/ExpectedOutputDocumentationTitleToAnchorSlug.html';
+        $expected       = file_get_contents($pathToExpected);
+        $this->assertNotFalse($expected, 'Output expectation file could not be found');
+
+        // Make the test OS independent.
+        $expected = str_replace("\n", PHP_EOL, $expected);
+        $this->expectOutputString($expected);
+
+        $generator = new HTMLDouble($ruleset);
+        $generator->generate();
+
+    }//end testAnchorLinks()
+
+
     /**
      * Test the generated footer.
      *