The demo page, running

This is a complete HTML document — doctype, head, semantic body, a table, an inline SVG and a working form — in one file with no dependencies. The panel on the left is the full source; the panel on the right is that source rendered. Edit the code and the preview updates as you type.

Live preview

Nothing you type here is sent anywhere. The preview runs in a sandboxed frame inside your own browser.

What each part of the demo does

If you are reading the source above and wondering why a line is there, this section takes it region by region.

1. The document head

Four lines do most of the work. The doctype puts the browser in standards mode, lang tells screen readers which language to pronounce, charset must appear within the first 1024 bytes, and the viewport tag stops mobile browsers pretending to be 980px wide.

The head of any modern HTML page 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Page — A Complete HTML Example</title>
  <meta name="description" content="A complete, working HTML page.">
</head>

2. The skip link

The first focusable element on the page jumps past the navigation. It is positioned off-screen until it receives keyboard focus, so mouse users never see it and keyboard users get straight to the content.

Skip link markup and CSS 
<a class="skip" href="#main">Skip to main content</a>

<style>
  .skip {
    position: absolute; left: 1rem; top: -3rem;
    background: #2563eb; color: #fff;
    padding: .5rem 1rem; border-radius: 4px;
    transition: top .15s;
  }
  .skip:focus { top: 1rem; }
</style>

3. The semantic skeleton

This is the shape almost every page wants. Note that <main> appears once and holds the content unique to this page, while <header> and <footer> hold what repeats across the site.

Semantic page structure 
<body>
  <header>
    <nav aria-label="Main">
      <ul>
        <li><a href="#main">Home</a></li>
        <li><a href="#features">Features</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <article>
      <h1>Page title</h1>
      <section id="features">
        <h2>A section heading</h2>
        <p>Section content.</p>
      </section>
      <aside>Related but tangential content.</aside>
    </article>
  </main>

  <footer>
    <p>Closing content.</p>
  </footer>
</body>

4. The table

A <caption> names the table for everyone, and scope="col" tells a screen reader which header belongs to which cell. Both are two seconds of work and the difference between a usable table and an unusable one.

An accessible data table 
<table>
  <caption>Page weight by asset type</caption>
  <thead>
    <tr>
      <th scope="col">Asset</th>
      <th scope="col">Size</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>8 KB</td></tr>
    <tr><td>CSS</td><td>0 KB (inline)</td></tr>
  </tbody>
</table>

5. The form

Each <label> points at its input's id, which makes the label text a click target and gives assistive technology the field's name. type="email" and required produce validation and error messages with no JavaScript at all.

A form that validates itself 
<form action="#" method="post">
  <div class="field">
    <label for="email">Email address</label>
    <input type="email" id="email" name="email"
           autocomplete="email" required>
  </div>
  <button type="submit">Send message</button>
</form>

Client-side validation is a convenience, not a security control — always validate on the server too. Our form validation guide covers the full set of attributes and when you genuinely need JavaScript.

Just want the smallest possible demo?

If you only need a file to test that something works, this is the whole thing. Save it as demo.html and open it in a browser.

demo.html — minimal version 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <h1>Hello, world</h1>
  <p>This is the smallest valid HTML page worth writing.</p>
</body>
</html>

How to use this demo

  1. Press Copy Code above to put the full source on your clipboard.
  2. Paste it into a new file and save it as demo.html.
  3. Double-click the file, or drag it into a browser tab, to open it.
  4. Edit it in any text editor and refresh the browser to see changes.

There is no server to run and no build step. A single .html file opened directly from disk is a real web page — that is the whole point of HTML.

Where to go next