docs: improve examples of semantic comparison modifiers

Author: egil

docs/site/docs/verification/semantic-html-comparison.md

@@ -26,6 +26,16 @@ The [AngleSharp Diffing](https://github.com/AngleSharp/AngleSharp.Diffing/) libr
 
 The [AngleSharp Diffing](https://github.com/AngleSharp/AngleSharp.Diffing/) library also allows us to customize the comparison process by adding special attributes to the _"control" markup_, i.e. the expected markup we want to use in verification.
 
+All the customization options below will match with the following markup:
+
+```html
+<header>
+  <h1 id="head-1">
+    Hello    <em>world</em>
+  </h1>
+</header>
+```
+
 Here are the customization options you have available to you:
 
 - **Ignore comments (enabled by default):** Comments in markup and inside `<style>` tags are automatically ignored and not part of the comparison process.
@@ -34,39 +44,39 @@ Here are the customization options you have available to you:
 
   ```html
   <header>
-    <h1 class="heading-1" diff:ignore>Hello world</h1>
+    <h1 diff:ignore></h1>
   </header>
   ```
 
-- **Ignore attribute:** To ignore an attribute during comparison, add the `:ignore` modifier to the attribute (no value is needed). For example, to ignore the `class` attribute:
+- **Ignore attribute:** To ignore an attribute during comparison, add the `:ignore` modifier to the attribute (no value is needed). For example, to ignore the `id` attribute:
 
   ```html
   <header>
-    <h1 class:ignore>Hello world</h1>
+    <h1 id:ignore>Hello <em>world</em></h1>
   </header>
   ```
 
 - **Ignore children:** Use the `diff:ignoreChildren` attribute (no value is needed) to ignore all child nodes/elements of an element. This does not include attributes. For example, to ignore all child nodes of the `h1` element, do the following:
 
   ```html
   <header>
-    <h1 diff:ignoreChildren>Hello <span>world</span></h1>
+    <h1 id="head-1" diff:ignoreChildren></h1>
   </header>
   ```
 
 - **Ignore all attributes:** Use the `diff:ignoreAttributes` attribute (no value is needed) to ignore all attributes of an element. For example:
 
   ```html
   <header>
-    <h1 diff:ignoreAttributes>Hello world</h1>
+    <h1 diff:ignoreAttributes>Hello <em>world</em></h1>
   </header>
   ```
 
   > [!NOTE]
   > The `diff:ignoreChildren` and `diff:ignoreAttributes` attributes can be combined to ignore all child nodes/element *and* attributes of an element, but still verify that the element itself exists. For example:
   ```html
   <header>
-    <h1 diff:ignoreChildren diff:ignoreAttributes>Hello world</h1>
+    <h1 diff:ignoreChildren diff:ignoreAttributes></h1>
   </header>
 
 - **Configure whitespace handling:** By default, all nodes and elements are compared using the `Normalize` whitespace handling option. The `Normalize` option will trim all text nodes and replace two or more whitespace characters with a single space character. The other options are `Preserve`, which will leave all whitespace unchanged, and `RemoveWhitespaceNodes`, which will only remove empty text nodes.
@@ -75,41 +85,51 @@ Here are the customization options you have available to you:
 
   ```html
   <header>
-    <h1 diff:whitespace="preserve">Hello <em> woooorld</em></h1>
+    <h1 id="head-1" diff:whitespace="preserve">
+      Hello    <em>world</em>
+    </h1>
   </header>
   ```
 
   > [!NOTE]
   > The default for `<pre>` and `<script>` elements is the `Preserve` option. To change that, use the `diff:whitespace` attribute. For example:
 
   ```html
-  <pre diff:whitespace="RemoveWhitespaceNodes">...</pre>
+  <header>
+    <h1 id="head-1" diff:whitespace="RemoveWhitespaceNodes">Hello<em>world</em></pre>
+  </header>
   ```
 
 - **Perform case-insensitive comparison:** By default, all text comparison is case sensitive, but if you want to perform a case-insensitive comparison of text inside elements or attributes, use the `diff:ignoreCase` attribute on elements and `:ignoreCase` modifier on attributes. For example, to perform a case insensitive comparison of the text in the following `h1` element , do the following:
 
   ```html
-  <h1 diff:ignoreCase>HellO WoRlD</h1>
+  <header>
+    <h1 id="head-1" diff:ignoreCase>HeLLo <em>world</em></h1>
+  </header
   ```
 
-  To perform case insensitive comparison of the text inside the `title` attribute, do the following:
+  To perform case insensitive comparison of the text inside the `id` attribute, do the following:
 
   ```html
-  <h1 title:ignoreCase="HeaDinG">...</h1>
+  <header>
+    <h1 id:ignoreCase="HeAD-1">Hello <em>world</em></h1>
+  </header>
   ```
 
 - **Use RegEx during comparison:** To use a regular expression when comparing the text inside an element or inside an attribute, use the `diff:regex` attribute on elements and the `:regex` modifier on attributes.
 
-  For example, to use a regular expression during comparison of the text in the `h1` element, add the `diff:regex` attribute to the element and place the regular expression in the body of the element:
+  For example, to use a regular expression during comparison of the text in the `em` element, add the `diff:regex` attribute to the element and place the regular expression in the body of the element:
 
   ```html
-  <h1 diff:regex diff:ignoreCase>Hello World \d{4}</h1>
+  <header>
+    <h1 id="head-1">Hello <em diff:regex>\w</em></h1>
+  </header>  
   ```
 
-  To use a regular expression during comparison of the text inside the `title` attribute, add the `:regex` modifier to the attribute and add the regular expression in the attribute's value:
+  To use a regular expression during comparison of the text inside the `id` attribute, add the `:regex` modifier to the attribute and add the regular expression in the attribute's value:
 
   ```html
-  <h1 title:regex="Heading-\d{4}">...</h1>
+  <h1 id:regex="head-\d{1}">...</h1>
   ```
 
   > [!NOTE]