Showcase
Each example shows real output produced by html-conform itself, from files in the project repository. Input on the left, output on the right.
A conforming page
examples/showcase/valid-document.htmlDetail: A conforming page →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Release notes</title>
</head>
<body>
<main>
<h1>Release notes</h1>
<p>Version 0.2.1 was released on <time datetime="2026-09-04">4 September 2026</time>.</p>
<img src="bench.png" srcset="bench.png 1x, bench@2x.png 2x" alt="Benchmark results" width="640" height="360">
</main>
</body>
</html>no findings report.findings is emptyParser errors
examples/showcase/parse-errors.htmlDetail: Parser errors →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parse errors</title>
</head>
<body>
<p>Fish &chips; for dinner.</p>
<p class="intro" class="lead">Duplicate attribute</p>
</body>
</html>error 8:17 parser.html5 an unknown named character reference error 9:25 parser.html5 a duplicate attribute on a tag 2 errors, 0 warnings
Content model
examples/showcase/content-model.htmlDetail: Content model →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Content model</title>
</head>
<body>
<ul>
<li>Allowed</li>
<span>Not a list item</span>
</ul>
<p align="center">Obsolete attribute</p>
<footer><footer>Nested footer</footer></footer>
<p><img src="chart.png"></p>
<a href="/order"><button>Order</button></a>
</body>
</html>error 10:5 schema.html5 unexpected element `{http://www.w3.org/1999/xhtml}span` at 10:5 error 12:3 schema.html5 unexpected attribute `align` at 12:3 error 13:11 assertion.elements.no-footer-in-header-footer The element "footer" must not appear as a descendant of the "footer" or "header" element. error 14:6 assertion.elements.img-missing-alt An "img" element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. error 15:20 assertion.elements.button-in-a The element "button" must not appear as a descendant of the "a" element. 5 errors, 0 warnings
Attribute values
examples/showcase/attribute-values.htmlDetail: Attribute values →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Attribute values</title>
<link rel="stylesheet" href="print.css" media="print and (">
</head>
<body>
<p lang="en_US">Underscore in a language tag.</p>
<p>Published <time datetime="2026-13-01">in month thirteen</time>.</p>
<img src="hero.png" srcset="hero.png 1x, hero@2x.png 2y" alt="Hero">
<a href="https://exa mple.com/">Space in the host</a>
<input type="colour" name="accent" aria-label="Accent">
</body>
</html>error 6:3 schema.html5 invalid value `print and (` for attribute `media` at 6:3 error 9:3 schema.html5 invalid value `en_US` for attribute `{http://www.w3.org/XML/1998/namespace}lang` at 9:3 error 10:16 schema.html5 invalid value `2026-13-01` for attribute `datetime` at 10:16 error 11:3 schema.html5 invalid value `hero.png 1x, hero@2x.png 2y` for attribute `srcset` at 11:3 error 12:3 schema.html5 invalid value `https://exa mple.com/` for attribute `href` at 12:3 error 13:3 schema.html5 invalid value `colour` for attribute `type` at 13:3 6 errors, 0 warnings
ARIA and IDs
examples/showcase/aria-and-ids.htmlDetail: ARIA and IDs →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ARIA and IDs</title>
</head>
<body>
<div aria-hidden="true" tabindex="0">Hidden but focusable</div>
<span role="checkbox" tabindex="0">Remember me</span>
<p id="intro">First paragraph</p>
<p id="intro">Second paragraph, same id</p>
</body>
</html>error 9:3 schema.html5 missing required content at 9:3 error 8:3 assertion.aria.hidden-not-focusable An element with aria-hidden="true" must not also have a tabindex attribute. error 10:3 assertion.ids.duplicate Duplicate ID. error 11:3 assertion.ids.duplicate Duplicate ID. 4 errors, 0 warnings
Table cell grid
examples/showcase/table-grid.htmlDetail: Table cell grid →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table grid</title>
</head>
<body>
<table>
<caption>Build matrix</caption>
<tr><th scope="rows">Target</th><th>Status</th></tr>
<tr><td>linux</td><td rowspan="2">ok</td></tr>
<tr><td colspan="2">macos</td></tr>
</table>
</body>
</html>error 10:9 schema.html5 invalid value `rows` for attribute `scope` at 10:9 error 10:9 assertion.tables.th-scope-enum A th element's scope attribute must be one of row, col, rowgroup, or colgroup. error 11:23 tables.integrity Table cell is overlapped by later table cell. error 12:9 tables.integrity Table cell overlaps an earlier table cell. 4 errors, 0 warnings
CSP and script contents
examples/showcase/csp-and-scripts.htmlDetail: CSP and script contents →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<title>CSP and scripts</title>
<script type="importmap">{ "imports": { "app": "./app.js" }, "scope": {} }</script>
</head>
<body>
<script>document.body.classList.add("js");</script>
<script type="speculationrules">{ "prerender": [{ "source": "list", "urls": "/next/" }] }</script>
</body>
</html>error 7:3 scripts.import-map A "script" element with a "type" attribute whose value is "importmap" must contain a JSON object with no properties other than "imports", "scopes", and "integrity". error 11:3 scripts.speculation-rules The "urls" property in a speculation rule must be a JSON array. warning 7:3 csp.meta-enforcement Inline script violates Content Security Policy (meta tag): blocked by "script-src" directive (missing "'unsafe-inline'" or nonce/hash). warning 10:3 csp.meta-enforcement Inline script violates Content Security Policy (meta tag): blocked by "script-src" directive (missing "'unsafe-inline'" or nonce/hash). warning 11:3 csp.meta-enforcement Inline script violates Content Security Policy (meta tag): blocked by "script-src" directive (missing "'unsafe-inline'" or nonce/hash). 2 errors, 3 warnings