Improve HTML Report formatting

coliff · coliff · commit 951119b4909c · 2025-06-03T10:50:36.000+09:00
- Ensure valid, semantic HTML
- Nicer fonts
diff --git a/.cspell.json b/.cspell.json
@@ -37,6 +37,7 @@
     "msapplication",
     "nocolor",
     "nodir",
+    "noopener",
     "nomix",
     "npmjs",
     "onttt",
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -18,3 +18,4 @@
 - Rules in src/core/core.ts should be listed alphabetically.
 - Use the provided code snippets as examples for rule documentation.
 - Newly added rules pages for the website should have the frontmatter: sidebar: hidden: true badge: New
+- Always run `npm run build` before running tests or committing changes.
diff --git a/dist/cli/formatters/html.js b/dist/cli/formatters/html.js
diff --git a/src/cli/formatters/html.ts b/src/cli/formatters/html.ts
@@ -3,27 +3,36 @@ import { FormatterCallback } from '../formatter'
 
 const htmlFormatter: FormatterCallback = function (formatter) {
   formatter.on('end', (event) => {
-    let fileContent = '<html>'
-    fileContent += '<head><title>HTML Hint Violation Report</title></head>'
-    fileContent += '<body>'
-    fileContent += '<center><h2>Violation Report</h2></center>'
-
-    fileContent += '<table border="1">'
+    let fileContent = '<!DOCTYPE html><html lang="en">'
+    fileContent += '\n<meta charset="UTF-8">'
+    fileContent +=
+      '\n<meta name="viewport" content="width=device-width, initial-scale=1">'
+    fileContent += '\n<head><title>HTML Hint Violation Report</title>'
+    fileContent += '\n<meta name="generator" content="HTMLHint"></head>'
+    fileContent += '\n<body style="font-family: Arial, helvetica, sans-serif;">'
+    fileContent += '\n<h1>Violation Report</h1>'
+    fileContent += '\n<main>'
+    fileContent += '\n<table>'
     fileContent +=
-      '<tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr>'
+      '\n<tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr>'
 
     for (const { file, messages } of event.arrAllMessages) {
       fileContent += messages
         .map(
           ({ line, message }, i) =>
-            `<tr><td>${
+            `\n<tr><td>${
               i + 1
             }</td><td>${file}</td><td>${line}</td><td>${message}</td></tr>`
         )
         .join('')
     }
 
-    fileContent += '</table></body></html>'
+    fileContent += '</table>'
+    fileContent +=
+      '\n<p><footer><small>Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer></p>'
+    fileContent += '\n</main>'
+    fileContent += '\n</body>'
+    fileContent += '</html>'
     console.log(fileContent)
     writeFileSync('report.html', fileContent)
   })
diff --git a/test/cli/formatters/html.html b/test/cli/formatters/html.html
@@ -1 +1,33 @@
-<html><head><title>HTML Hint Violation Report</title></head><body><center><h2>Violation Report</h2></center><table border="1"><tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr><tr><td>1</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr><tr><td>2</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr><tr><td>3</td><td>{{path}}</td><td>8</td><td>Duplicate of attribute name [ bad ] was found.</td></tr><tr><td>4</td><td>{{path}}</td><td>9</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr><tr><td>5</td><td>{{path}}</td><td>9</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr><tr><td>6</td><td>{{path}}</td><td>9</td><td>Duplicate of attribute name [ bad ] was found.</td></tr><tr><td>7</td><td>{{path}}</td><td>10</td><td>Tag must be paired, no start tag: [ </input> ]</td></tr><tr><td>8</td><td>{{path}}</td><td>11</td><td>Special characters must be escaped : [ < ].</td></tr><tr><td>9</td><td>{{path}}</td><td>11</td><td>Special characters must be escaped : [ > ].</td></tr><tr><td>10</td><td>{{path}}</td><td>13</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr><tr><td>11</td><td>{{path}}</td><td>14</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr><tr><td>12</td><td>{{path}}</td><td>15</td><td>Tag must be paired, no start tag: [ </hello> ]</td></tr><tr><td>13</td><td>{{path}}</td><td>16</td><td>Tag must be paired, no start tag: [ </test> ]</td></tr><tr><td>14</td><td>{{path}}</td><td>17</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr><tr><td>15</td><td>{{path}}</td><td>21</td><td>The value of attribute [ class ] must be in double quotes.</td></tr><tr><td>16</td><td>{{path}}</td><td>21</td><td>The value of attribute [ what ] must be in double quotes.</td></tr><tr><td>17</td><td>{{path}}</td><td>21</td><td>The value of attribute [ something ] must be in double quotes.</td></tr><tr><td>18</td><td>{{path}}</td><td>25</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr><tr><td>19</td><td>{{path}}</td><td>26</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr><tr><td>20</td><td>{{path}}</td><td>27</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr></table></body></html>
+<!DOCTYPE html><html lang="en">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<head><title>HTML Hint Violation Report</title>
+<meta name="generator" content="HTMLHint"></head>
+<body style="font-family: Arial, helvetica, sans-serif;">
+<h1>Violation Report</h1>
+<main>
+<table>
+<tr><th>Number#</th><th>File Name</th><th>Line Number</th><th>Message</th></tr>
+<tr><td>1</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
+<tr><td>2</td><td>{{path}}</td><td>8</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
+<tr><td>3</td><td>{{path}}</td><td>8</td><td>Duplicate of attribute name [ bad ] was found.</td></tr>
+<tr><td>4</td><td>{{path}}</td><td>9</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
+<tr><td>5</td><td>{{path}}</td><td>9</td><td>The value of attribute [ bad ] must be in double quotes.</td></tr>
+<tr><td>6</td><td>{{path}}</td><td>9</td><td>Duplicate of attribute name [ bad ] was found.</td></tr>
+<tr><td>7</td><td>{{path}}</td><td>10</td><td>Tag must be paired, no start tag: [ </input> ]</td></tr>
+<tr><td>8</td><td>{{path}}</td><td>11</td><td>Special characters must be escaped : [ < ].</td></tr>
+<tr><td>9</td><td>{{path}}</td><td>11</td><td>Special characters must be escaped : [ > ].</td></tr>
+<tr><td>10</td><td>{{path}}</td><td>13</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr>
+<tr><td>11</td><td>{{path}}</td><td>14</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr>
+<tr><td>12</td><td>{{path}}</td><td>15</td><td>Tag must be paired, no start tag: [ </hello> ]</td></tr>
+<tr><td>13</td><td>{{path}}</td><td>16</td><td>Tag must be paired, no start tag: [ </test> ]</td></tr>
+<tr><td>14</td><td>{{path}}</td><td>17</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr>
+<tr><td>15</td><td>{{path}}</td><td>21</td><td>The value of attribute [ class ] must be in double quotes.</td></tr>
+<tr><td>16</td><td>{{path}}</td><td>21</td><td>The value of attribute [ what ] must be in double quotes.</td></tr>
+<tr><td>17</td><td>{{path}}</td><td>21</td><td>The value of attribute [ something ] must be in double quotes.</td></tr>
+<tr><td>18</td><td>{{path}}</td><td>25</td><td>Tag must be paired, no start tag: [ </div> ]</td></tr>
+<tr><td>19</td><td>{{path}}</td><td>26</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr>
+<tr><td>20</td><td>{{path}}</td><td>27</td><td>Tag must be paired, no start tag: [ </bad> ]</td></tr></table>
+<p><footer><small>Generated by <a href="https://htmlhint.com" target="_blank" rel="noopener">HTMLHint</a></small></footer></p>
+</main>
+</body></html>
