HTML Formatterhtmlformatteronline.com

Single-file landing page

A complete landing page in one file — hero, features, call to action.

landingpageherostartermarketing
<header class="nav">
  <a class="logo" href="/">Acme</a>
  <nav>
    <a href="#features">Features</a>
    <a href="#pricing">Pricing</a>
    <a class="btn small" href="#cta">Get started</a>
  </nav>
</header>

<section class="hero">
  <h1>Ship your side project this weekend</h1>
  <p>Everything you need to get a static site online, without a build step or a framework to learn first.</p>
  <div class="hero-actions">
    <a class="btn" href="#cta">Start building</a>
    <a class="btn ghost" href="#features">See how it works</a>
  </div>
</section>

<section class="features" id="features">
  <article>
    <h2>No build step</h2>
    <p>One HTML file, one stylesheet. Open it in a browser and it works. Deploy it by copying it to a server.</p>
  </article>
  <article>
    <h2>Fast by default</h2>
    <p>Nothing to download before the page renders. No framework, no hydration, no waiting for JavaScript.</p>
  </article>
  <article>
    <h2>Yours to edit</h2>
    <p>Plain HTML and CSS with no abstractions in the way. Change a colour by changing a colour.</p>
  </article>
</section>

<section class="cta" id="cta">
  <h2>Start with the boilerplate</h2>
  <p>Copy the code, change the words, put it online.</p>
  <a class="btn" href="#">Copy the template</a>
</section>

<footer class="foot">
  <p>&copy; 2026 Acme</p>
</footer>

How it works

One file, no dependencies. Open it in a browser and it works; upload it and it is a website.

The grid needs no media query. repeat(auto-fit, minmax(260px, 1fr)) fits as many 260-pixel columns as will go and stretches them to fill. Three across on a desktop, two on a tablet, one on a phone — all from one line, and it adapts to whatever number of cards you put in.

The heading scales with the viewport. clamp(2rem, 1.2rem + 3.2vw, 3.4rem) sets a floor, a ceiling and a rate of change between them. The vw unit is paired with a rem so the text still responds to a reader's browser font-size setting — a pure vw value ignores it, which is an accessibility failure.

text-wrap: balance evens out the lines of the headline so you do not get five words on the first line and one on the second. Browsers without support ignore it and nothing is lost.

Custom properties at the top. Six values control the whole page. Change --brand and every button, link and accent follows.

Accessibility notes

Every interactive element here is a real link, so keyboard navigation and focus outlines work without any extra code.

If you replace the buttons with <div> elements and click handlers — and people do — you lose keyboard access, focus rings, and the announcement that tells a screen reader user this is something they can activate.

Making it yours

Replace the copy first, then the colours, then the structure. The fastest way to make this look like someone else's template is to keep the words.

For the colour palette, the gradient generator will build a hero background, and the shadow generator gives you a consistent elevation scale for the cards.

Related templates

Minimal HTML5 boilerplate

The shortest document that is still correct. Nine lines, nothing optional.

HTML

SEO-ready HTML boilerplate

A full head block with meta, Open Graph, Twitter cards and structured data.

HTMLCSS

HTML email boilerplate

A table-based email shell that survives Outlook and Gmail.

HTML

Centered hero

Headline, sub, two buttons and a trust row. The default that earns its place.

HTMLCSSTailwind

Check your version

Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.

HTML Formatter HTML Beautifier HTML Pretty Printer JSON Formatter