diff --git a/README.md b/README.md
index 2a7aa85..20f9438 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ In lieu of a formal styleguide, take care to maintain the existing coding style.
## Release History
+ * 2018-03-04 v2.1.0 Add filtering and accessibility to the reports
* 2018-03-01 v2.0.0 Change the HTML format to look like Koa11y reports
* 2018-03-01 v1.0.0 Release a stable version using a simple HTML format
* 2018-02-28 v0.2.4 Add \ to the HTML page
diff --git a/index.js b/index.js
index 3c93b69..dc31212 100644
--- a/index.js
+++ b/index.js
@@ -11,15 +11,19 @@ if (!Object.values) {
function formatIssues (issues, panelColor) {
return issues.map(function (issue) {
const extract = issue.extract.split('<').join('<')
- const position = 'line: ' + issue.line + ', column:' + issue.column
+ const message = issue.message.split('<').join('<').split('"').join('"')
+ const line = issue.line
+ const column = issue.column
+ const position = 'line: ' + line + ', column: ' + column
+ const positionAudio = '(at line ' + line + ' and column ' + column + ')'
const entry =
- '
\n' +
+ '
\n' +
'
\n' +
'
\n' +
- issue.message + '
\n' +
+ '
' + message + '
\n' +
'
' + extract + '
\n' +
'
\n' +
- '\n' +
+ '\n' +
'
\n'
return entry
@@ -41,11 +45,11 @@ function formatFile (file) {
'
Notices ' + notices.length + ' '
const content =
- '
\n' +
- '
' + file.name + ' ' +
+ '
\n' +
+ ' ' + file.name + ' ' +
' ' + buttonMarkup + ' \n' +
'
\n' +
- '
' + returnedErrors + returnedWarnings + returnedNotices + '
\n'
+ '
' + returnedErrors + returnedWarnings + returnedNotices + '
\n'
return content
}
@@ -99,10 +103,16 @@ module.exports = function (results) {
'
Warnings ' + warningCount + ' ' +
'
Notices ' + noticeCount + ' '
+ const messageFilter = 'Enter text to filter messages with'
+ const firstOccurrence = 'Warn about the first occurrence only'
const heading =
'
\n' +
- '
HTML Validity Report ' +
+ ' HTML Validity Report ' +
' ' + buttonMarkup + ' \n' +
+ ' \n' +
+ '
\n' +
+ ' \n' +
+ ' ' + firstOccurrence + ' \n' +
'
\n'
const content = Object.values(files)
diff --git a/template.html b/template.html
index 35826ee..dfef321 100644
--- a/template.html
+++ b/template.html
@@ -1,5 +1,5 @@
-
+
HTML Validation Report
@@ -15,41 +15,45 @@
}
body {
background: #FFF;
- margin-top: 17px;
+ margin-top: 0;
color: #2C3E50;
font-family: 'Lato', 'Helvetica Neue', sans-serif;
font-size: 15px;
line-height: 1.42857143;
overflow-y: scroll
}
- h1 {
+ .heading1 {
display: inline-block;
- margin: 21px 0 20px 0;
- font-size: 39px;
+ margin: 6px 0 5px 0;
+ font-size: 32px;
font-weight: 400;
word-break: break-all;
}
- h2 {
+ .heading2 {
display: inline-block;
- margin: 28px 0 13px 0;
- font-size: 25px;
+ margin: 10px 0 9px 0;
+ font-size: 22px;
font-weight: 400;
word-break: break-all;
}
- h4 {
- margin: 0px;
+ .heading3 {
+ margin: 0;
color: #636F79;
font-size: 14.25px;
}
+ .message {
+ margin: 0 0 15px 0;
+ padding: 5px;
+ }
pre {
display: block;
background-color: #ECF0F1;
border: 1px solid #CCC;
border-radius: 4px;
- margin: 0px 0px 10.5px;
+ margin: 5px 5px 10.5px 5px;
padding: 10px;
- color: #7B8A8B;
- font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
+ color: #6B6A6B;
+ font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'DejaVu Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback';
font-size: 14px;
line-height: 1.42857143;
overflow: auto;
@@ -61,10 +65,10 @@
word-break: break-all;
}
.container {
- max-width: 900px;
+ max-width: 992px;
width: 100%;
- margin: 0px auto;
- padding: 0px 15px;
+ margin: 0 auto;
+ padding: 0 15px 0 15px;
}
.row {
margin-right: -15px;
@@ -75,8 +79,8 @@
background-color: #FFF;
border: 1px solid transparent;
border-radius: 4px;
- margin-bottom: 21px;
- box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
+ margin-bottom: 15px;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.panel-heading {
padding: 10px 15px;
@@ -86,36 +90,57 @@
color: #FFF;
}
.panel-body {
- padding: 15px;
+ padding: 10px;
}
.panel-footer {
- background-color: #ECF0F1;
+ background-color: #EDF1F2;
border-top: 1px solid #ECF0F1;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px 15px;
+ font-size: 12px;
}
.panel-success { border-color: #18BC9C; }
- .panel-danger { border-color: #E74C3C; }
- .panel-warning { border-color: #F39C12; }
+ .panel-danger { border-color: #D83D2D; }
+ .panel-warning { border-color: #A86700; }
.panel-primary { border-color: #2C3E50; }
.panel-success>.panel-heading { background-color: #18BC9C; border-color: #18BC9C; }
- .panel-danger>.panel-heading { background-color: #E74C3C; border-color: #E74C3C; }
- .panel-warning>.panel-heading { background-color: #F39C12; border-color: #F39C12; }
+ .panel-danger>.panel-heading { background-color: #D83D2D; border-color: #D83D2D; }
+ .panel-warning>.panel-heading { background-color: #A86700; border-color: #A86700; }
.panel-primary>.panel-heading { background-color: #2C3E50; border-color: #2C3E50; }
.hide {
display: none;
}
- .row > a > h2::before {
+ .row.summary,
+ .row.page {
+ display: flex;
+ }
+ .row.page {
+ border-top: 1px solid #2C3E50;
+ }
+ .row > button {
+ flex-grow: 1;
+ border: none;
+ background: none;
+ margin: 15px 0 15px 0;
+ text-align: left;
+ color: #2C3E50;
+ cursor: pointer;
+ }
+ .row > button > .heading1::before,
+ .row > button > .heading2::before {
content: '\25b2';
}
- .row.close > a > h2::before {
+ .row.close > button > .heading1::before,
+ .row.close > button > .heading2::before {
content: '\25bc';
}
.buttons {
- display: inline-block;
- margin-top: 30px;
- float: right;
+ margin: 5px 0 5px 15px;
+ align-self: center;
+ }
+ .buttons button {
+ margin: 3px 0 0 3px;
}
.buttons .disabled {
box-shadow: none;
@@ -125,14 +150,14 @@
pointer-events: auto;
}
.panel-primary i {
- margin: 0px 7px;
+ margin: 0 7px;
}
.btn {
display: inline-block;
background-image: none;
border: 2px solid transparent;
border-radius: 4px;
- margin-bottom: 0px;
+ margin-bottom: 0;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
@@ -151,13 +176,13 @@
line-height: 1.5;
}
.btn-danger {
- background-color: #E74C3C;
- border-color: #E74C3C;
+ background-color: #D83D2D;
+ border-color: #D83D2D;
color: #FFF;
}
.btn-warning {
- background-color: #F39C12;
- border-color: #F39C12;
+ background-color: #A86700;
+ border-color: #A86700;
color: #FFF;
}
.btn-primary {
@@ -169,6 +194,15 @@
.btn-warning {
margin-right: 3px;
}
+ button:focus,
+ input:focus,
+ .panel:focus {
+ border-color: #ccc;
+ border-color: rgba(66,152,220,.6);
+ outline: 0;
+ outline: thin dotted;
+ box-shadow: 0 0 15px rgba(66,152,220,.4);
+ }
.badge {
position: relative;
top: -1px;
@@ -186,10 +220,10 @@
vertical-align: middle;
}
.btn-danger .badge {
- color: #E74C3C;
+ color: #D83D2D;
}
.btn-warning .badge {
- color: #F39C12;
+ color: #A86700;
}
.btn-primary .badge {
color: #2C3E50;
@@ -212,6 +246,37 @@
.glyphicon-ban-circle {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAtNiAzMiAzMiI+PHBhdGggZmlsbD0iI0YzOUMxMiIgZD0iTS4xMDcgOS42cTAtNC4zMiAyLjEzMy03Ljk3M1Q4LjAyNy00LjE2IDE2LTYuMjkzdDcuOTczIDIuMTMzIDUuNzg3IDUuNzg3VDMxLjg5MyA5LjZ0LTIuMTMzIDcuOTczLTUuNzg3IDUuNzg3VDE2IDI1LjQ5MyA4LjAyNyAyMy4zNiAyLjI0IDE3LjU3My4xMDcgOS42em00Ljg1MyAwcTAgMy4wNjcgMS42NTMgNS43MzNMMjEuNzYuMjEzUTE5LjA5My0xLjQ0IDE2LTEuNDRxLTQuNTYgMC03LjggMy4yNFQ0Ljk2IDkuNnptNS40NjcgOS40NjdRMTMuMDE0IDIwLjY0IDE2IDIwLjY0cTQuNTYgMCA3LjgtMy4yNHQzLjI0LTcuOHEwLTIuOTg3LTEuNTczLTUuNTczeiIvPjwvc3ZnPg==');
}
+ .form-group {
+ margin-bottom: 15px;
+ }
+ .form-control {
+ height: 34px;
+ padding: 6px 12px;
+ font-size: 15px;
+ line-height: 1.42857143;
+ color: #2C3E50;
+ border: 1px solid #888;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ }
+ .form-control:focus {
+ border-color: #ccc;
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ outline: thin dotted;
+ box-shadow: 0 0 8px rgba(82,168,236,.6);
+ }
+ .filters {
+ display: flex;
+ }
+ .filters .form-control {
+ flex-grow: 1;
+ }
+ .filters label {
+ margin-left: 15px;
+ align-self: center;
+ }
@@ -220,112 +285,486 @@
diff --git a/tests/results/report.html b/tests/results/report.html
index 77aedd4..bfa6193 100644
--- a/tests/results/report.html
+++ b/tests/results/report.html
@@ -1,5 +1,5 @@
-
+
HTML Validation Report
@@ -15,41 +15,45 @@
}
body {
background: #FFF;
- margin-top: 17px;
+ margin-top: 0;
color: #2C3E50;
font-family: 'Lato', 'Helvetica Neue', sans-serif;
font-size: 15px;
line-height: 1.42857143;
overflow-y: scroll
}
- h1 {
+ .heading1 {
display: inline-block;
- margin: 21px 0 20px 0;
- font-size: 39px;
+ margin: 6px 0 5px 0;
+ font-size: 32px;
font-weight: 400;
word-break: break-all;
}
- h2 {
+ .heading2 {
display: inline-block;
- margin: 28px 0 13px 0;
- font-size: 25px;
+ margin: 10px 0 9px 0;
+ font-size: 22px;
font-weight: 400;
word-break: break-all;
}
- h4 {
- margin: 0px;
+ .heading3 {
+ margin: 0;
color: #636F79;
font-size: 14.25px;
}
+ .message {
+ margin: 0 0 15px 0;
+ padding: 5px;
+ }
pre {
display: block;
background-color: #ECF0F1;
border: 1px solid #CCC;
border-radius: 4px;
- margin: 0px 0px 10.5px;
+ margin: 5px 5px 10.5px 5px;
padding: 10px;
- color: #7B8A8B;
- font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
+ color: #6B6A6B;
+ font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'DejaVu Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback';
font-size: 14px;
line-height: 1.42857143;
overflow: auto;
@@ -61,10 +65,10 @@
word-break: break-all;
}
.container {
- max-width: 900px;
+ max-width: 992px;
width: 100%;
- margin: 0px auto;
- padding: 0px 15px;
+ margin: 0 auto;
+ padding: 0 15px 0 15px;
}
.row {
margin-right: -15px;
@@ -75,8 +79,8 @@
background-color: #FFF;
border: 1px solid transparent;
border-radius: 4px;
- margin-bottom: 21px;
- box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
+ margin-bottom: 15px;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.panel-heading {
padding: 10px 15px;
@@ -86,36 +90,57 @@
color: #FFF;
}
.panel-body {
- padding: 15px;
+ padding: 10px;
}
.panel-footer {
- background-color: #ECF0F1;
+ background-color: #EDF1F2;
border-top: 1px solid #ECF0F1;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px 15px;
+ font-size: 12px;
}
.panel-success { border-color: #18BC9C; }
- .panel-danger { border-color: #E74C3C; }
- .panel-warning { border-color: #F39C12; }
+ .panel-danger { border-color: #D83D2D; }
+ .panel-warning { border-color: #A86700; }
.panel-primary { border-color: #2C3E50; }
.panel-success>.panel-heading { background-color: #18BC9C; border-color: #18BC9C; }
- .panel-danger>.panel-heading { background-color: #E74C3C; border-color: #E74C3C; }
- .panel-warning>.panel-heading { background-color: #F39C12; border-color: #F39C12; }
+ .panel-danger>.panel-heading { background-color: #D83D2D; border-color: #D83D2D; }
+ .panel-warning>.panel-heading { background-color: #A86700; border-color: #A86700; }
.panel-primary>.panel-heading { background-color: #2C3E50; border-color: #2C3E50; }
.hide {
display: none;
}
- .row > a > h2::before {
+ .row.summary,
+ .row.page {
+ display: flex;
+ }
+ .row.page {
+ border-top: 1px solid #2C3E50;
+ }
+ .row > button {
+ flex-grow: 1;
+ border: none;
+ background: none;
+ margin: 15px 0 15px 0;
+ text-align: left;
+ color: #2C3E50;
+ cursor: pointer;
+ }
+ .row > button > .heading1::before,
+ .row > button > .heading2::before {
content: '\25b2';
}
- .row.close > a > h2::before {
+ .row.close > button > .heading1::before,
+ .row.close > button > .heading2::before {
content: '\25bc';
}
.buttons {
- display: inline-block;
- margin-top: 30px;
- float: right;
+ margin: 5px 0 5px 15px;
+ align-self: center;
+ }
+ .buttons button {
+ margin: 3px 0 0 3px;
}
.buttons .disabled {
box-shadow: none;
@@ -125,14 +150,14 @@
pointer-events: auto;
}
.panel-primary i {
- margin: 0px 7px;
+ margin: 0 7px;
}
.btn {
display: inline-block;
background-image: none;
border: 2px solid transparent;
border-radius: 4px;
- margin-bottom: 0px;
+ margin-bottom: 0;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
@@ -151,13 +176,13 @@
line-height: 1.5;
}
.btn-danger {
- background-color: #E74C3C;
- border-color: #E74C3C;
+ background-color: #D83D2D;
+ border-color: #D83D2D;
color: #FFF;
}
.btn-warning {
- background-color: #F39C12;
- border-color: #F39C12;
+ background-color: #A86700;
+ border-color: #A86700;
color: #FFF;
}
.btn-primary {
@@ -169,6 +194,15 @@
.btn-warning {
margin-right: 3px;
}
+ button:focus,
+ input:focus,
+ .panel:focus {
+ border-color: #ccc;
+ border-color: rgba(66,152,220,.6);
+ outline: 0;
+ outline: thin dotted;
+ box-shadow: 0 0 15px rgba(66,152,220,.4);
+ }
.badge {
position: relative;
top: -1px;
@@ -186,10 +220,10 @@
vertical-align: middle;
}
.btn-danger .badge {
- color: #E74C3C;
+ color: #D83D2D;
}
.btn-warning .badge {
- color: #F39C12;
+ color: #A86700;
}
.btn-primary .badge {
color: #2C3E50;
@@ -212,435 +246,844 @@
.glyphicon-ban-circle {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAtNiAzMiAzMiI+PHBhdGggZmlsbD0iI0YzOUMxMiIgZD0iTS4xMDcgOS42cTAtNC4zMiAyLjEzMy03Ljk3M1Q4LjAyNy00LjE2IDE2LTYuMjkzdDcuOTczIDIuMTMzIDUuNzg3IDUuNzg3VDMxLjg5MyA5LjZ0LTIuMTMzIDcuOTczLTUuNzg3IDUuNzg3VDE2IDI1LjQ5MyA4LjAyNyAyMy4zNiAyLjI0IDE3LjU3My4xMDcgOS42em00Ljg1MyAwcTAgMy4wNjcgMS42NTMgNS43MzNMMjEuNzYuMjEzUTE5LjA5My0xLjQ0IDE2LTEuNDRxLTQuNTYgMC03LjggMy4yNFQ0Ljk2IDkuNnptNS40NjcgOS40NjdRMTMuMDE0IDIwLjY0IDE2IDIwLjY0cTQuNTYgMCA3LjgtMy4yNHQzLjI0LTcuOHEwLTIuOTg3LTEuNTczLTUuNTczeiIvPjwvc3ZnPg==');
}
+ .form-group {
+ margin-bottom: 15px;
+ }
+ .form-control {
+ height: 34px;
+ padding: 6px 12px;
+ font-size: 15px;
+ line-height: 1.42857143;
+ color: #2C3E50;
+ border: 1px solid #888;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ }
+ .form-control:focus {
+ border-color: #ccc;
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ outline: thin dotted;
+ box-shadow: 0 0 8px rgba(82,168,236,.6);
+ }
+ .filters {
+ display: flex;
+ }
+ .filters .form-control {
+ flex-grow: 1;
+ }
+ .filters label {
+ margin-left: 15px;
+ align-self: center;
+ }
-
HTML Validity Report Errors 31 Warnings 3 Notices 0
+ HTML Validity Report Errors 31 Warnings 3 Notices 0
+
+
+
+ Warn about the first occurrence only
-
-
snapshots/hmpg.net.html Errors 21 Warnings 0 Notices 0
+
+ snapshots/hmpg.net.html Errors 21 Warnings 0 Notices 0
-
+
-Start tag seen without seeing a doctype first. Expected “”.
+
Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
<html><head>
-
+
-
+
-Attribute “gapi_processed” not allowed on element “script” at this point.
+
Attribute “gapi_processed” not allowed on element “script” at this point.
></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></scri
-
+
-
+
-The “align” attribute on the “p” element is obsolete. Use CSS instead.
+
The “align” attribute on the “p” element is obsolete. Use CSS instead.
d>
<body>
<p align="center"><font
-
+
-
+
-The “font” element is obsolete. Use CSS instead.
+
The “font” element is obsolete. Use CSS instead.
="center"><font size="+4">Congra
-
+
-
+
-The “align” attribute on the “p” element is obsolete. Use CSS instead.
+
The “align” attribute on the “p” element is obsolete. Use CSS instead.
font>
</p><p align="center"><b>You
-
+
-
+
-The “align” attribute on the “p” element is obsolete. Use CSS instead.
+
The “align” attribute on the “p” element is obsolete. Use CSS instead.
rnet.
</p><p align="center">You sh
-
+
-
+
-The “align” attribute on the “p” element is obsolete. Use CSS instead.
+
The “align” attribute on the “p” element is obsolete. Use CSS instead.
/li></ul>
<p align="center"><font
-
+
-
+
-The “font” element is obsolete. Use CSS instead.
+
The “font” element is obsolete. Use CSS instead.
="center"><font size="-1"><i>* P
-
+
-
+
-Attribute “ng-non-bindable” not allowed on element “iframe” at this point.
+
Attribute “ng-non-bindable” not allowed on element “iframe” at this point.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-Attribute “hspace” not allowed on element “iframe” at this point.
+
Attribute “hspace” not allowed on element “iframe” at this point.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-Attribute “vspace” not allowed on element “iframe” at this point.
+
Attribute “vspace” not allowed on element “iframe” at this point.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-Bad value “100%” for attribute “width” on element “iframe”: Expected a digit but saw “%” instead.
+
Bad value “100%” for attribute “width” on element “iframe”: Expected a digit but saw “%” instead.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-The “frameborder” attribute on the “iframe” element is obsolete. Use CSS instead.
+
The “frameborder” attribute on the “iframe” element is obsolete. Use CSS instead.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-The “marginheight” attribute on the “iframe” element is obsolete. Use CSS instead.
+
The “marginheight” attribute on the “iframe” element is obsolete. Use CSS instead.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-The “marginwidth” attribute on the “iframe” element is obsolete. Use CSS instead.
+
The “marginwidth” attribute on the “iframe” element is obsolete. Use CSS instead.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-The “scrolling” attribute on the “iframe” element is obsolete. Use CSS instead.
+
The “scrolling” attribute on the “iframe” element is obsolete. Use CSS instead.
t: 24px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 38px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1511618104254" name="I0_1511618104254" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fhmpg.net&url=http%3A%2F%2Fhmpg.net%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.R4vvmD-bxFg.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNqw3woMCdGPJ1k0Sr5vKTnVpzXbw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1511618104254&_gfid=I0_1511618104254&parent=http%3A%2F%2Fhmpg.net&pfname=&rpctoken=18444644" data-gapiattached="true" title="G+"></ifra
-
+
-
+
-The “align” attribute on the “p” element is obsolete. Use CSS instead.
+
The “align” attribute on the “p” element is obsolete. Use CSS instead.
<p></p>
<p align="center"><img s
-
+
-
+
-An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
+
An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
="center"><img src="downloadwww.gif">
<!--
-
+
-
+
-Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
></iframe><contentxferbho id="87FD7BE7-AD58-4878-9AF6-8540EC34D21C"></cont
-
+
-
+
-Stray start tag “addoninited”.
+
Stray start tag “addoninited”.
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
+
-Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
-
snapshots/wikimedia.org.html Errors 4 Warnings 1 Notices 0
+
+ snapshots/wikimedia.org.html Errors 4 Warnings 1 Notices 0
-
+
-Start tag seen without seeing a doctype first. Expected “”.
+
Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
<html lang="mul" dir="ltr"><head>
-
+
-
+
-Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
</div>
<contentxferbho id="87FD7BE7-AD58-4878-9AF6-8540EC34D21C"></cont
-
+
-
+
-Stray start tag “addoninited”.
+
Stray start tag “addoninited”.
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
+
-Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
+
-Potentially bad value “copyright” for attribute “rel” on element “link”: The keyword “copyright” for the “rel” attribute should not be used. Consider using “license” instead.
+
Potentially bad value “copyright” for attribute “rel” on element “link”: The keyword “copyright” for the “rel” attribute should not be used. Consider using “license” instead.
con.ico">
<link rel="copyright" href="//creativecommons.org/licenses/by-sa/3.0/">
<link
-
+
-
-
snapshots/xkcd.com.html Errors 6 Warnings 2 Notices 0
+
+ snapshots/xkcd.com.html Errors 6 Warnings 2 Notices 0
-
+
-Start tag seen without seeing a doctype first. Expected “”.
+
Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
<html><head>
-
+
-
+
-Duplicate ID “comicLinks”.
+
Duplicate ID “comicLinks”.
div>
<br>
<div id="comicLinks">
Other
-
+
-
+
-The “center” element is obsolete. Use CSS instead.
+
The “center” element is obsolete. Use CSS instead.
div>
<br>
<center>
<div
-
+
-
+
-Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “contentxferbho” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
ode -->
<contentxferbho id="87FD7BE7-AD58-4878-9AF6-8540EC34D21C"></cont
-
+
-
+
-Stray start tag “addoninited”.
+
Stray start tag “addoninited”.
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
+
-Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
+
Element “addoninited” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
ntxferbho></body><addoninited id="addonInited" targetelementname="addonInited"></addo
-
+
-
+
-The first occurrence of ID “comicLinks” was here.
+
The first occurrence of ID “comicLinks” was here.
div>
<br>
<div id="comicLinks">
Comic
-
+
-
+
-This document appears to be written in English but the “html” start tag has “lang="mul"”. Consider using “lang="en"” (or variant) instead.
+
This document appears to be written in English but the “html” start tag has “lang="mul"”. Consider using “lang="en"” (or variant) instead.
<html><head>
-
+