diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 56ac017a8..ca255b92a 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -113,14 +113,14 @@ export default defineConfig({
           link: '/configuration/',
         },
         {
-          label: 'Rules',
+          label: 'Usage',
           collapsed: true,
-          autogenerate: { directory: 'rules' },
+          autogenerate: { directory: 'usage' },
         },
         {
-          label: 'Usage',
+          label: 'Rules',
           collapsed: true,
-          autogenerate: { directory: 'usage' },
+          autogenerate: { directory: 'rules' },
         },
         {
           label: 'VS Code Extension',
diff --git a/website/src/content/docs/rules/alt-require.mdx b/website/src/content/docs/rules/alt-require.mdx
index fc88af90c..65049e407 100644
--- a/website/src/content/docs/rules/alt-require.mdx
+++ b/website/src/content/docs/rules/alt-require.mdx
@@ -19,7 +19,7 @@ Level: <Badge text="Warning" variant="caution" />
 - `true`: enable rule
 - `false`: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <img src="test.png" alt="test" />
@@ -27,7 +27,7 @@ Level: <Badge text="Warning" variant="caution" />
 <area shape="circle" coords="180,139,14" href="test.html" alt="test" />
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <img src="test.png" />
diff --git a/website/src/content/docs/rules/attr-no-duplication.mdx b/website/src/content/docs/rules/attr-no-duplication.mdx
index 54a5fbe8e..672c5d062 100644
--- a/website/src/content/docs/rules/attr-no-duplication.mdx
+++ b/website/src/content/docs/rules/attr-no-duplication.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <img src="a.png" />
diff --git a/website/src/content/docs/rules/attr-no-unnecessary-whitespace.mdx b/website/src/content/docs/rules/attr-no-unnecessary-whitespace.mdx
index fc8af8e5d..dc82bb9d6 100644
--- a/website/src/content/docs/rules/attr-no-unnecessary-whitespace.mdx
+++ b/website/src/content/docs/rules/attr-no-unnecessary-whitespace.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <div title="a"></div>
diff --git a/website/src/content/docs/rules/attr-sorted.mdx b/website/src/content/docs/rules/attr-sorted.mdx
index 4c0555271..c06c1450c 100644
--- a/website/src/content/docs/rules/attr-sorted.mdx
+++ b/website/src/content/docs/rules/attr-sorted.mdx
@@ -27,7 +27,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <div img="image" meta="meta" font="font"></div>
diff --git a/website/src/content/docs/rules/attr-unsafe-chars.mdx b/website/src/content/docs/rules/attr-unsafe-chars.mdx
index b996d7c1b..a4c89be2a 100644
--- a/website/src/content/docs/rules/attr-unsafe-chars.mdx
+++ b/website/src/content/docs/rules/attr-unsafe-chars.mdx
@@ -17,7 +17,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <li>
diff --git a/website/src/content/docs/rules/attr-value-double-quotes.mdx b/website/src/content/docs/rules/attr-value-double-quotes.mdx
index edd81cf5f..9a931cee2 100644
--- a/website/src/content/docs/rules/attr-value-double-quotes.mdx
+++ b/website/src/content/docs/rules/attr-value-double-quotes.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <a href="" title="abc"></a>
diff --git a/website/src/content/docs/rules/attr-value-not-empty.mdx b/website/src/content/docs/rules/attr-value-not-empty.mdx
index f6b13613e..c992ad5e5 100644
--- a/website/src/content/docs/rules/attr-value-not-empty.mdx
+++ b/website/src/content/docs/rules/attr-value-not-empty.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <input type="button" disabled="disabled" />
diff --git a/website/src/content/docs/rules/attr-value-single-quotes.mdx b/website/src/content/docs/rules/attr-value-single-quotes.mdx
index 079e8ddc2..c60f3802e 100644
--- a/website/src/content/docs/rules/attr-value-single-quotes.mdx
+++ b/website/src/content/docs/rules/attr-value-single-quotes.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <a href='' title='abc'></a>
diff --git a/website/src/content/docs/rules/attr-whitespace.mdx b/website/src/content/docs/rules/attr-whitespace.mdx
index 32c928f1e..9f2fdb083 100644
--- a/website/src/content/docs/rules/attr-whitespace.mdx
+++ b/website/src/content/docs/rules/attr-whitespace.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <div title="a"></div>
diff --git a/website/src/content/docs/rules/button-type-require.mdx b/website/src/content/docs/rules/button-type-require.mdx
index 8c3c1a13d..87081fa60 100644
--- a/website/src/content/docs/rules/button-type-require.mdx
+++ b/website/src/content/docs/rules/button-type-require.mdx
@@ -17,7 +17,7 @@ Level: <Badge text="Warning" variant="caution" />
 - `true`: enable rule
 - `false`: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <button type="button">Click me</button>
@@ -25,7 +25,7 @@ Level: <Badge text="Warning" variant="caution" />
 <button type="reset">Reset form</button>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <button>No type specified</button>
diff --git a/website/src/content/docs/rules/doctype-first.mdx b/website/src/content/docs/rules/doctype-first.mdx
index 12b01a1ed..936888b3c 100644
--- a/website/src/content/docs/rules/doctype-first.mdx
+++ b/website/src/content/docs/rules/doctype-first.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <!DOCTYPE html>
@@ -28,7 +28,7 @@ Level: <Badge text="Error" variant="danger" />
 <html></html>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <html></html>
diff --git a/website/src/content/docs/rules/doctype-html5.mdx b/website/src/content/docs/rules/doctype-html5.mdx
index f95c47c38..bd58c4a30 100644
--- a/website/src/content/docs/rules/doctype-html5.mdx
+++ b/website/src/content/docs/rules/doctype-html5.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following pattern is **not** considered a rule violations:
+### The following pattern is **not** considered a rule violations
 
 ```html
 <!DOCTYPE html>
diff --git a/website/src/content/docs/rules/empty-tag-not-self-closed.mdx b/website/src/content/docs/rules/empty-tag-not-self-closed.mdx
index ea487876e..948807cfd 100644
--- a/website/src/content/docs/rules/empty-tag-not-self-closed.mdx
+++ b/website/src/content/docs/rules/empty-tag-not-self-closed.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <br>
diff --git a/website/src/content/docs/rules/h1-require.mdx b/website/src/content/docs/rules/h1-require.mdx
index bc002f4dd..9cc2e5460 100644
--- a/website/src/content/docs/rules/h1-require.mdx
+++ b/website/src/content/docs/rules/h1-require.mdx
@@ -17,13 +17,13 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <html><body><h1>Title</h1></body></html>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <html><body><p>No heading</p></body></html>
diff --git a/website/src/content/docs/rules/head-script-disabled.mdx b/website/src/content/docs/rules/head-script-disabled.mdx
index cf5a27fad..0b8725c4a 100644
--- a/website/src/content/docs/rules/head-script-disabled.mdx
+++ b/website/src/content/docs/rules/head-script-disabled.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <body>
diff --git a/website/src/content/docs/rules/href-abs-or-rel.mdx b/website/src/content/docs/rules/href-abs-or-rel.mdx
index b247ff322..875b35094 100644
--- a/website/src/content/docs/rules/href-abs-or-rel.mdx
+++ b/website/src/content/docs/rules/href-abs-or-rel.mdx
@@ -16,10 +16,10 @@ Level: <Badge text="Warning" variant="caution" />
 2. rel: relative mode
 3. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
-abs: <a href="https://www.htmlhint.com/">test1</a> <a href="https://www.github.com/">test2</a>
+abs: <a href="https://htmlhint.com/">test1</a> <a href="https://github.com/">test2</a>
 rel: <a href="test.html">test1</a> <a href="../test.html">test2</a>
 
 ```
diff --git a/website/src/content/docs/rules/html-lang-require.mdx b/website/src/content/docs/rules/html-lang-require.mdx
index 45f62ac22..ef63c4f4e 100644
--- a/website/src/content/docs/rules/html-lang-require.mdx
+++ b/website/src/content/docs/rules/html-lang-require.mdx
@@ -17,13 +17,13 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following pattern is **not** considered rule violations:
+### The following pattern is **not** considered rule violations
 
 ```html
 <html lang="en"></html>
 ```
 
-### The following patterns are considered a rule violations:
+### The following patterns are considered a rule violations
 
 ```html
 <!-- missing lang tag -->
diff --git a/website/src/content/docs/rules/id-class-ad-disabled.mdx b/website/src/content/docs/rules/id-class-ad-disabled.mdx
index 4226eb000..e7db356ba 100644
--- a/website/src/content/docs/rules/id-class-ad-disabled.mdx
+++ b/website/src/content/docs/rules/id-class-ad-disabled.mdx
@@ -15,13 +15,13 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <div id="adcontainer"></div>
 ```
 
-### The following pattern is considered a rule violation:
+### The following patterns are considered rule violations
 
 ```html
 <div id="ad-container"></div>
diff --git a/website/src/content/docs/rules/id-class-value.mdx b/website/src/content/docs/rules/id-class-value.mdx
index 78ea53777..e1e7d86c9 100644
--- a/website/src/content/docs/rules/id-class-value.mdx
+++ b/website/src/content/docs/rules/id-class-value.mdx
@@ -17,7 +17,7 @@ Level: <Badge text="Warning" variant="caution" />
 3. hump: enable rule ( aaaBbb )
 4. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 underline: <div id="aaa_bbb">
diff --git a/website/src/content/docs/rules/id-unique.mdx b/website/src/content/docs/rules/id-unique.mdx
index 7953f0890..97a1a676c 100644
--- a/website/src/content/docs/rules/id-unique.mdx
+++ b/website/src/content/docs/rules/id-unique.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <div id="id1"></div><div id="id2"></div>
diff --git a/website/src/content/docs/rules/inline-script-disabled.mdx b/website/src/content/docs/rules/inline-script-disabled.mdx
index ff5986bca..e825345c7 100644
--- a/website/src/content/docs/rules/inline-script-disabled.mdx
+++ b/website/src/content/docs/rules/inline-script-disabled.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following pattern are considered violations:
+### The following pattern are considered violations
 
 ```html
 <img src="test.gif" onclick="alert(1);">
diff --git a/website/src/content/docs/rules/input-requires-label.mdx b/website/src/content/docs/rules/input-requires-label.mdx
index cf6d15146..17321e5a8 100644
--- a/website/src/content/docs/rules/input-requires-label.mdx
+++ b/website/src/content/docs/rules/input-requires-label.mdx
@@ -19,7 +19,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <input type="password">
@@ -28,7 +28,7 @@ Level: <Badge text="Warning" variant="caution" />
 <input type="password" /> <label for="something"/>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <label for="some-id"/><input id="some-id" type="password" />
diff --git a/website/src/content/docs/rules/main-require.mdx b/website/src/content/docs/rules/main-require.mdx
index 60ba53c7b..26fd78025 100644
--- a/website/src/content/docs/rules/main-require.mdx
+++ b/website/src/content/docs/rules/main-require.mdx
@@ -17,7 +17,7 @@ Level: <Badge text="Warning" variant="caution" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <html><body><main>Content</main></body></html>
@@ -27,7 +27,7 @@ Level: <Badge text="Warning" variant="caution" />
 <html><body><header>Header</header><main>Content</main><footer>Footer</footer></body></html>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <html><body><p>No main tag</p></body></html>
diff --git a/website/src/content/docs/rules/meta-description-require.mdx b/website/src/content/docs/rules/meta-description-require.mdx
index c8819c0fb..cce537e07 100644
--- a/website/src/content/docs/rules/meta-description-require.mdx
+++ b/website/src/content/docs/rules/meta-description-require.mdx
@@ -17,13 +17,13 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <html><head><meta name="description" content="A description of the page"></head></html>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <!-- Missing meta description -->
diff --git a/website/src/content/docs/rules/meta-viewport-require.mdx b/website/src/content/docs/rules/meta-viewport-require.mdx
index 6ceda7e49..520df0a74 100644
--- a/website/src/content/docs/rules/meta-viewport-require.mdx
+++ b/website/src/content/docs/rules/meta-viewport-require.mdx
@@ -17,13 +17,13 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head></html>
 ```
 
-### The following patterns are considered rule violations:
+### The following patterns are considered rule violations
 
 ```html
 <!-- Missing meta viewport -->
diff --git a/website/src/content/docs/rules/space-tab-mixed-disabled.mdx b/website/src/content/docs/rules/space-tab-mixed-disabled.mdx
index 7059e7e9d..f20c448cd 100644
--- a/website/src/content/docs/rules/space-tab-mixed-disabled.mdx
+++ b/website/src/content/docs/rules/space-tab-mixed-disabled.mdx
@@ -27,7 +27,7 @@ Level: <Badge text="Warning" variant="caution" />
 }
 ```
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
       <img src="tab.png" />
diff --git a/website/src/content/docs/rules/spec-char-escape.mdx b/website/src/content/docs/rules/spec-char-escape.mdx
index d9ce83b2e..afc33d131 100644
--- a/website/src/content/docs/rules/spec-char-escape.mdx
+++ b/website/src/content/docs/rules/spec-char-escape.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered violations:
+### The following patterns are **not** considered violations
 
 ```html
 <span>aaa&gt;bbb&lt;ccc</span>
diff --git a/website/src/content/docs/rules/src-not-empty.mdx b/website/src/content/docs/rules/src-not-empty.mdx
index 1142d59ed..58bebb671 100644
--- a/website/src/content/docs/rules/src-not-empty.mdx
+++ b/website/src/content/docs/rules/src-not-empty.mdx
@@ -17,7 +17,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <img src="test.png" />
@@ -29,7 +29,7 @@ Level: <Badge text="Error" variant="danger" />
 <object data="test.swf">
 ```
 
-### The following patterns are considered violations:
+### The following patterns are considered violations
 
 ```html
 <img src />
diff --git a/website/src/content/docs/rules/tag-pair.mdx b/website/src/content/docs/rules/tag-pair.mdx
index 7bc47a43d..546d7b28f 100644
--- a/website/src/content/docs/rules/tag-pair.mdx
+++ b/website/src/content/docs/rules/tag-pair.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <ul><li></li></ul>
diff --git a/website/src/content/docs/rules/tagname-lowercase.mdx b/website/src/content/docs/rules/tagname-lowercase.mdx
index 7c0bc8c73..83e40ef2c 100644
--- a/website/src/content/docs/rules/tagname-lowercase.mdx
+++ b/website/src/content/docs/rules/tagname-lowercase.mdx
@@ -16,7 +16,7 @@ Level: <Badge text="Error" variant="danger" />
 2. false: disable rule
 3. ['clipPath', 'test']: Ignore some tagname name
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <span><div>
diff --git a/website/src/content/docs/rules/tagname-specialchars.mdx b/website/src/content/docs/rules/tagname-specialchars.mdx
index aace7a69a..ba1c7bd27 100644
--- a/website/src/content/docs/rules/tagname-specialchars.mdx
+++ b/website/src/content/docs/rules/tagname-specialchars.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <a href=""></a><span>test</span>
diff --git a/website/src/content/docs/rules/title-require.mdx b/website/src/content/docs/rules/title-require.mdx
index 579566bb0..490fe0cb0 100644
--- a/website/src/content/docs/rules/title-require.mdx
+++ b/website/src/content/docs/rules/title-require.mdx
@@ -15,7 +15,7 @@ Level: <Badge text="Error" variant="danger" />
 1. true: enable rule
 2. false: disable rule
 
-### The following patterns are **not** considered rule violations:
+### The following patterns are **not** considered rule violations
 
 ```html
 <html><head><title>test</title></head></html>
diff --git a/website/src/custom.css b/website/src/custom.css
index 62ef4cd10..184edba61 100644
--- a/website/src/custom.css
+++ b/website/src/custom.css
@@ -105,16 +105,18 @@ h3[id^='the-following-patterns-are-not']::before {
 img[src='/img/htmlhint-vscode-extension.png'] {
   background-color: #000;
 }
-
-.level-h3:has(h3[id^='the-following-patterns-are-not']) ~ .expressive-code pre {
+.level-h3:has(h3[id^='the-following-pattern-is-not']) ~ .expressive-code figure,
+.level-h3:has(h3[id^='the-following-patterns-are-not'])
+  ~ .expressive-code
+  figure {
   border-left: 4px solid green !important;
 }
 
 .level-h3:has(h3[id^='the-following-pattern-is-considered'])
   ~ .expressive-code
-  pre,
+  figure,
 .level-h3:has(h3[id^='the-following-patterns-are-considered'])
   ~ .expressive-code
-  pre {
+  figure {
   border-left: 4px solid red !important;
 }