diff --git a/extension/js/background.js b/extension/js/background.js
index 40172d6..0c38b1b 100755
--- a/extension/js/background.js
+++ b/extension/js/background.js
@@ -8,34 +8,51 @@ const defaultPaths = [
   '^/actuator/prometheus'
 ]
 
-const formatPrometheusMetrics = (body) => body
-  .split(/\r?\n/)
-  .map(line => {
-    // line is a comment
-    if (/^#/.test(line)) {
-      return `<span class="comment">${line}</span>`
-    }
+// https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html
+const formatPrometheusMetrics = (body) => {
+  let previousMetricName = ''
+  return body
+    .split(/\r?\n/)
+    .map(line => {
+      let tmp
+
+      // line is a comment
+      tmp = line.match(/^# (?:HELP|TYPE) ([^ ]+)/)
+      if (tmp && tmp.length > 1) {
+        let metricName = tmp[1]
+
+        // First comment, don't render closing </section>
+        if (previousMetricName == '') {
+          previousMetricName = metricName
+          return `<section aria-label="${metricName}">\n<span class="comment">${line}</span>`
+        }
 
-    // line is a metric
-    // Named RegExp groups not supported by Firefox:
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1362154
-    // const tmp = line.match(/^(?<metric>[\w_]+)(?:\{(?<tags>.*)\})?\x20(?<value>.+)/)
-    const tmp = line.match(/^([\w_]+)(?:\{(.*)\})?\x20(.+)/)
+        if (metricName != previousMetricName) {
+          previousMetricName = metricName
+          return `</section>\n<section aria-label="${metricName}">\n<span class="comment">${line}</span>`
+        }
 
-    if (tmp && tmp.length > 1) {
-      let [_, metric, tags, value] = tmp // eslint-disable-line no-unused-vars
-      if (tags) {
-        tags = tags.replace(/([^,]+?)="(.*?)"/g, '<span class="label-key">$1</span>="<span class="label-value">$2</span>"')
-        tags = `{${tags}}`
+        return `<span class="comment">${line}</span>`
       }
 
-      return `<span class="metric">${metric}</span>${tags || ''} <span class="value">${value}</span>`
-    }
+      // line is a metric
+      tmp = line.match(/^([\w_]+)(?:\{(.*)\})?\x20(.+)/)
+      if (tmp && tmp.length > 1) {
+        let [_, metricName, labels, value] = tmp // eslint-disable-line no-unused-vars
 
-    // line is something else, do nothing
-    return line
-  })
-  .join('<br>')
+        if (labels) {
+          labels = labels.replace(/([^,]+?)="(.*?)",?/g, '<dt class="label-key" role="associationlistitemkey">$1</dt><dd class="label-value" role="associationlistitemvalue">$2</dd>')
+          labels = `<dl class="labels" role="associationlist">${labels}</dl>`
+        }
+
+        return `<span class="metric-name">${metricName}</span>${labels || ''} <span class="value">${value}</span>`
+      }
+
+      // line is something else, do nothing
+      return line
+    })
+    .join('<br>') + '</section>'
+  }
 
 // Listen for requests from content pages wanting to set up a port
 chrome.runtime.onConnect.addListener(port => {
diff --git a/extension/js/content.js b/extension/js/content.js
index 25b855c..5ead750 100755
--- a/extension/js/content.js
+++ b/extension/js/content.js
@@ -102,23 +102,31 @@ const renderFormattedHTML = (html) => {
     #promformat {
       font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
       word-wrap: break-word;
-      white-space: pre-wrap;
     }
 
     .comment {
       display: inline-block;
     }
 
-    br + .comment {
-      padding-top: 1em;
+    section {
+      padding-block-end: 1.5em;
     }
 
-    .comment + br + .comment {
-      padding-top: 0;
+    dl,dt,dd {
+      display: initial;
+      padding: initial;
+      margin: initial;
     }
 
+    .labels::before                { color: var(--fg); content: '{' }
+    .labels::after                 { color: var(--fg); content: '}' }
+    .label-key::after              { color: var(--fg); content: '="' }
+    .label-value::after            { color: var(--fg); content: '",' }
+    .label-value:last-child::after { content: '"' }
+
+    html         { color-scheme: light dark }
     body         { background-color: var(--bg); color: var(--fg) }
-    .metric      { color: var(--red-1) }
+    .metric-name { color: var(--red-1) }
     .value       { color: var(--purple) }
     .label-key   { color: var(--blue) }
     .label-value { color: var(--green) }
@@ -132,6 +140,8 @@ const renderFormattedHTML = (html) => {
 
   // Insert HTML content
   const doc = d.parseFromString(html, 'text/html')
+  document.documentElement.lang = 'en'
+  document.title = 'Prometheus metrics'
   document.body = doc.body
   document.body.id = 'promformat'
 }
diff --git a/extension/manifest.json b/extension/manifest.json
index 6a485ef..6f75915 100755
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Prometheus Formatter",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "manifest_version": 3,
   "description": "Makes plain Prometheus/OpenMetrics endpoints easier to read.",
   "homepage_url": "https://github.com/fhemberger/prometheus-formatter",
diff --git a/package-lock.json b/package-lock.json
index 52f4927..9d78581 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "prometheus-formatter",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "prometheus-formatter",
-      "version": "3.0.1",
+      "version": "3.1.0",
       "license": "MIT",
       "devDependencies": {
         "addons-linter": "^6.13.0",
@@ -6113,7 +6113,7 @@
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
           "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 5ac382c..98cc2c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prometheus-formatter",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Browser extension which makes plain Prometheus/OpenMetrics endpoints easier to read.",
   "scripts": {
     "test": "standard --fix",