diff --git a/rules/S6850/html/metadata.json b/rules/S6850/html/metadata.json
new file mode 100644
index 00000000000..2874b29fde0
--- /dev/null
+++ b/rules/S6850/html/metadata.json
@@ -0,0 +1,5 @@
+{
+  "tags": [
+    "accessibility"
+  ]
+}
diff --git a/rules/S6850/html/rule.adoc b/rules/S6850/html/rule.adoc
new file mode 100644
index 00000000000..8d85c33bd06
--- /dev/null
+++ b/rules/S6850/html/rule.adoc
@@ -0,0 +1,45 @@
+include::../rule.adoc[tag=header]
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<h1>JavaScript Programming Guide</h1>
+<p>An introduction to JavaScript programming and its applications.</p>
+
+<h2>JavaScript Basics</h2>
+<p>Understanding the basic concepts in JavaScript programming.</p>
+
+<h3>Variables</h3>
+<p>Explanation of what variables are and how to declare them in JavaScript.</p>
+
+<h3 aria-hidden>Data Types</h3> <!-- Noncompliant -->
+<p>Overview of the different data types in JavaScript.</p>
+
+<h3 /> <!-- Noncompliant -->
+<p>Understanding how to declare and use functions in JavaScript.</p>
+----
+
+==== Compliant solution
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<h1>JavaScript Programming Guide</h1>
+<p>An introduction to JavaScript programming and its applications.</p>
+
+<h2>JavaScript Basics</h2>
+<p>Understanding the basic concepts in JavaScript programming.</p>
+
+<h3>Variables</h3>
+<p>Explanation of what variables are and how to declare them in JavaScript.</p>
+
+<h3>Data Types</h3>
+<p>Overview of the different data types in JavaScript.</p>
+
+<h3>Functions</h3>
+<p>Understanding how to declare and use functions in JavaScript.</p>
+----
+
+include::../rule.adoc[tag=footer]
\ No newline at end of file
diff --git a/rules/S6850/javascript/metadata.json b/rules/S6850/javascript/metadata.json
index 70bc4c3e9b9..d79173ef449 100644
--- a/rules/S6850/javascript/metadata.json
+++ b/rules/S6850/javascript/metadata.json
@@ -1,26 +1,6 @@
 {
-  "title": "Header elements should have accessible content",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
   "tags": [
     "accessibility",
     "react"
-  ],
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-6850",
-  "sqKey": "S6850",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "MEDIUM"
-    },
-    "attribute": "CONVENTIONAL"
-  }
+  ]
 }
diff --git a/rules/S6850/javascript/rule.adoc b/rules/S6850/javascript/rule.adoc
index a4948a98181..f283f62f1d3 100644
--- a/rules/S6850/javascript/rule.adoc
+++ b/rules/S6850/javascript/rule.adoc
@@ -1,16 +1,4 @@
-== Why is this an issue?
-
-Header elements are represented by the tags ``++<h1>++`` through ``++<h6>++``, with ``++<h1>++`` being the highest level and ``++<h6>++`` being the lowest. These elements are used to structure the content of the page and create a hierarchical outline that can be followed by users and search engines alike.
-
-In the context of accessibility, header elements play a crucial role. They provide a way for users, especially those using assistive technologies like screen readers, to navigate through the content of a webpage. By reading out the headers, screen readers can give users an overview of the content and allow them to jump to the section they're interested in.
-
-If a header element is empty, it can lead to confusion as it doesn't provide any information about the content that follows. This can make navigation difficult for users relying on screen readers, resulting in a poor user experience and making the website less accessible for people with visual impairments.
-
-Therefore, to ensure your website is accessible to all users, it's important to always include meaningful content in your header elements.
-
-== How to fix it
-
-Do not leave empty your header elements.
+include::../rule.adoc[tag=header]
 
 === Code examples
 
@@ -19,24 +7,24 @@ Do not leave empty your header elements.
 [source,javascript,diff-id=1,diff-type=noncompliant]
 ----
 function JavaScript101() {
-    return (
-        <>
-            <h1>JavaScript Programming Guide</h1>
-            <p>An introduction to JavaScript programming and its applications.</p>
+  return (
+    <>
+      <h1>JavaScript Programming Guide</h1>
+      <p>An introduction to JavaScript programming and its applications.</p>
 
-            <h2>JavaScript Basics</h2>
-            <p>Understanding the basic concepts in JavaScript programming.</p>
+      <h2>JavaScript Basics</h2>
+      <p>Understanding the basic concepts in JavaScript programming.</p>
 
-            <h3>Variables</h3>
-            <p>Explanation of what variables are and how to declare them in JavaScript.</p>
+      <h3>Variables</h3>
+      <p>Explanation of what variables are and how to declare them in JavaScript.</p>
 
-            <h3 aria-hidden>Data Types</h3> // Noncompliant
-            <p>Overview of the different data types in JavaScript.</p>
+      <h3 aria-hidden>Data Types</h3> // Noncompliant
+      <p>Overview of the different data types in JavaScript.</p>
 
-            <h3 /> // Noncompliant
-            <p>Understanding how to declare and use functions in JavaScript.</p>
-        </>
-    );
+      <h3 /> // Noncompliant
+      <p>Understanding how to declare and use functions in JavaScript.</p>
+    </>
+  );
 }
 ----
 
@@ -45,30 +33,25 @@ function JavaScript101() {
 [source,javascript,diff-id=1,diff-type=compliant]
 ----
 function JavaScript101() {
-    return (
-        <>
-            <h1>JavaScript Programming Guide</h1>
-            <p>An introduction to JavaScript programming and its applications.</p>
+  return (
+    <>
+      <h1>JavaScript Programming Guide</h1>
+      <p>An introduction to JavaScript programming and its applications.</p>
 
-            <h2>JavaScript Basics</h2>
-            <p>Understanding the basic concepts in JavaScript programming.</p>
+      <h2>JavaScript Basics</h2>
+      <p>Understanding the basic concepts in JavaScript programming.</p>
 
-            <h3>Variables</h3>
-            <p>Explanation of what variables are and how to declare them in JavaScript.</p>
+      <h3>Variables</h3>
+      <p>Explanation of what variables are and how to declare them in JavaScript.</p>
 
-            <h3>Data Types</h3>
-            <p>Overview of the different data types in JavaScript.</p>
+      <h3>Data Types</h3>
+      <p>Overview of the different data types in JavaScript.</p>
 
-            <h3>Functions</h3>
-            <p>Understanding how to declare and use functions in JavaScript.</p>
-        </>
-    );
+      <h3>Functions</h3>
+      <p>Understanding how to declare and use functions in JavaScript.</p>
+    </>
+  );
 }
 ----
 
-== Resources
-=== Documentation
-
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements[Heading elements]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[aria-hidden]
-* WCAG - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html[Headings and Labels]
+include::../rule.adoc[tag=footer]
diff --git a/rules/S6850/metadata.json b/rules/S6850/metadata.json
index 2c63c085104..7135fdcc6c6 100644
--- a/rules/S6850/metadata.json
+++ b/rules/S6850/metadata.json
@@ -1,2 +1,22 @@
 {
-}
+  "title": "Heading elements should have accessible content",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6850",
+  "sqKey": "S6850",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}
\ No newline at end of file
diff --git a/rules/S6850/rule.adoc b/rules/S6850/rule.adoc
new file mode 100644
index 00000000000..c612b201863
--- /dev/null
+++ b/rules/S6850/rule.adoc
@@ -0,0 +1,30 @@
+:doctype: book
+
+# tag::header[]
+== Why is this an issue?
+
+Heading elements are represented by the tags ``++<h1>++`` through ``++<h6>++``, with ``++<h1>++`` being the highest level and ``++<h6>++`` being the lowest. These elements are used to structure the content of the page and create a hierarchical outline that can be followed by users and search engines alike.
+
+In the context of accessibility, heading elements play a crucial role. They provide a way for users, especially those using assistive technologies like screen readers, to navigate through the content of a webpage. By reading out the headings, screen readers can give users an overview of the content and allow them to jump to the section they're interested in.
+
+If a heading element is empty, it can lead to confusion as it doesn't provide any information about the content that follows. This can make navigation difficult for users relying on screen readers, resulting in a poor user experience and making the website less accessible for people with visual impairments.
+
+Therefore, to ensure your website is accessible to all users, it's important to always include meaningful content in your heading elements.
+
+== How to fix it
+
+Do not leave empty your heading elements.
+
+# end::header[]
+
+=== Code examples
+
+# tag::footer[]
+== Resources
+=== Documentation
+
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements[Heading elements]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[aria-hidden]
+* WCAG - https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html[Headings and Labels]
+
+# end::footer[]