html1 KB

HTML — Semantic article page

A realistic semantic HTML page with landmark elements (header, nav, main, article, footer), a figure with alt text and caption, and lists — for testing HTML parsers, accessibility tooling, and highlighters.

Syntax highlighting Code parsing Editor testing

Preview — first 38 lineshtml

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Semantic Article - Sample Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav aria-label="Primary">
        <a href="/">Home</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>Testing Semantic HTML</h1>
        <p>
          A short article built from landmark elements, a
          <a href="https://example.com">sample link</a>, and a figure with a caption.
        </p>
        <figure>
          <img src="chart.png" alt="A bar chart of monthly totals" width="480" height="270" />
          <figcaption>Monthly totals for the sample dataset.</figcaption>
        </figure>
        <ul>
          <li>Accessible landmarks</li>
          <li>Descriptive alt text</li>
        </ul>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Novus Examples</p>
    </footer>
  </body>
</html>

Specifications

Language: HTML
Kind: realistic snippet
Lines: 37
Encoding: UTF-8
Line Endings: LF

Testing contract

Expected to pass

Scenario: Parse the page and run an accessibility or landmark audit over the result.
Expected result: Five landmark elements resolve - header, nav, main, article, footer - the single `<nav>` carries `aria-label="Primary"`, the `<img>` has non-empty alt text plus explicit width 480 and height 270, and the `<figure>` has exactly one `<figcaption>`. There is one `<h1>` and no heading-level skip.

What is a .html file?

HTML (HyperText Markup Language) is the structural markup language of the web, using nested tags to define document content, semantics, and links. It is typically paired with CSS for presentation and JavaScript for behavior. It is the foundational format rendered by browsers.

How to use this file

Use an example HTML file to test parsers, DOM construction, sanitization of untrusted markup, and rendering or scraping pipelines.

How to use this file for testing

“HTML — Semantic article page” is a deterministic Novus Examples fixture for Syntax highlighting, Code parsing, Editor testing. Idiomatic hello-world programs and realistic snippets across sixteen languages, exercising comments, string escapes, interpolation, numeric literals, and language keywords — for testing syntax highlighters, editor themes, and tree-sitter grammars.

Documented properties for this file: HTML · UTF-8 · LF. Compare results against paired or grouped companions on this page when present (clean↔damaged, searchable↔scanned, or format twins) so scores stay reproducible across runs.

Download the file once, keep the path stable in CI or local scripts, and treat the spec table as the contract: dimensions, seeds, field lists, and roles are intentional. Corrupt or invalid samples are labelled as such — expect parsers to fail loudly rather than silently accept them.

This is a short, known-correct source file. Run it through your syntax highlighter, linter, formatter, tree-sitter grammar, or parser, and open it in the in-browser editor to tweak and re-download. Each snippet exercises comments, string escapes, literals, and language keywords.

Generated by generation/code_samples.py. Free for any use, no attribution required — license.