Landing Page Builder

A landing page is the page someone arrives on after following a single link: from an announcement, a printed card, a message to a mailing list. Unlike a home page, it does not have to introduce everything. It has one reader in mind and one thing to ask of them. That narrowness is its strength, and most of the work of building one well is protecting it.

The temptation runs the other way. Page builders offer carousels, counters, pop-ups and a dozen sections, and each one seems harmless on its own. Together they bury the question the page exists to ask. This essay argues for the opposite habit: structure first, plain words second, decoration last, and the whole thing delivered as one file the owner can read.

One reader, one action

Start with the sentence the page has to earn. Who is reading, and what should they do next? Ask for a sample, book a call, join a list, read the full guide. If the answer has three verbs in it, the page has three jobs, and a reader who came for one of them has to find it among the other two.

The hero, the large first block under the site name, carries that sentence. It holds the main heading, one short paragraph and one button. The rest of the page exists to answer the doubts that stand between the reader and that button: what they get, how it works, what other people said, the questions a hesitant person asks first, and how to get in touch.

A good button names what happens when it is pressed. The W3C’s old and still sound tip on link text says to avoid “click here” and to use words that provide some information when read out of context, explain what the link offers and do not talk about mechanics. “Ask for a sample” passes that test on its own. “Click here” fails it everywhere, and so do “submit”, “more” and “go”.

Structure before decoration

A page that looks organised is not necessarily organised. The HTML Standard gives the structure its own vocabulary. The h1 element is for a top-level section, h2 for a subsection, h3 for a sub-subsection, and so on down. A landing page fits that tree almost exactly: one h1 in the hero, one h2 for each section after it, and an h3 for each feature or step inside a section.

The W3C’s page structure tutorial notes that browsers, plug-ins and assistive technologies can use headings to provide in-page navigation, so a broken tree is felt by the people who rely on it most. The tutorial says skipping heading ranks can be confusing and should be avoided where possible, and gives the example of an h2 followed directly by an h4. Going back up is fine; jumping down two levels is not. A section heading styled to look small but written as an h3 straight under the h1 is exactly that kind of jump, and it is invisible on screen.

Landmarks do for regions what headings do for topics. The HTML Standard defines a header as a group of introductory or navigational aids, a nav as a section with navigation links, and a footer for the page as a whole. It also says a document must not have more than one main element that is not hidden. The W3C regions tutorial adds the habit that makes landmarks useful rather than merely present: label them. A nav named “On this page” and a section labelled by its own heading can each be found by name.

Questions and answers have a native element too. The HTML Standard describes details as a disclosure widget from which the user can obtain additional information, and the first summary element inside it as its summary or legend. The standard’s own support notes list it in all current engines, and it opens and closes with no script at all. That is one less thing to build, test and break.

Pictures need words, or a clear statement that they need none. The W3C images tutorial asks for a short text alternative when a picture carries information the text does not, and an empty alt attribute when a picture is purely decorative, so that assistive technology can ignore it. The choice belongs to the person who knows why the picture is there, which is why a careful tool asks rather than guesses.

Why one plain file is enough

Most landing pages need no script. They show words, a few pictures and a form, and browsers have handled all three without help for a long time. A page with no script has nothing to update, nothing that waits for a library to download and nothing that can be talked into doing something its owner did not intend.

A single file can go further and tell the browser so. Content Security Policy Level 3 lets a page deliver its policy in a meta element, with one caveat worth knowing: policies in meta elements are not applied to content which precedes them, so the element belongs at the top of the head. A strict policy can refuse everything by default, allow only the page’s own style by its hash, allow pictures only from inside the file, and name the one address its form may post to through the form-action directive.

Two more media features make a static page feel considerate. Media Queries Level 5 defines prefers-color-scheme, which reflects whether the reader wants a light or dark theme, and prefers-reduced-motion, which detects a request to minimise non-essential motion. A file can carry both colour sets and switch between them with no script, and it can keep its only small transition inside a rule that applies only when the reader has not asked for less motion.

Writing direction comes almost for free if the layout is described in logical terms. CSS Logical Properties defines flow-relative values such as inline-start and block-end, so a margin or a gap follows the direction of the text rather than the left edge of the screen. Set the page to right to left and the same rules mirror the layout, with no second style sheet to keep in step.

Readability is measurable too. WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for ordinary text and 3:1 for large text, and Success Criterion 1.4.11 asks 3:1 for the visual edges that identify controls. The ratio runs from 1 to 21 and comes from a published formula for relative luminance, so anyone can check it. The W3C ACT rule on minimum contrast lists worked cases, such as dark gray #333 on white at 12.6:1.

Here is a case you can reproduce in the tool. The example page uses #2d6a4f as its main colour and #6a3fa8 as its second, which colours links and the focus ring. Links measure 6.79:1 on the page background and 5.93:1 on the panels. Change the second colour to the lighter #7d55bf and the page background still gives 5.00:1, but the panels drop to 4.37:1, under 4.5:1. The tool marks that pair as failing and will not save until the colour changes or the warning is accepted out loud.

Size and shape matter as much as colour. WCAG 2.2 asks that content work at a width equivalent to 320 CSS pixels without scrolling in two directions, and the Understanding document for reflow notes that this is the same as a 1280 pixel wide window zoomed to 400 percent. It also asks that text can be resized up to 200 percent without loss of content. A layout built from flexible grids, rem units and no fixed heights meets both without special cases.

Honest words and a form you control

Plain language is a discipline, not a style. The U.S. government’s plain language guidance, now kept on Digital.gov, says short paragraphs are easier to read, that writing experts recommend paragraphs of no more than 150 words, and that one topic per paragraph makes information easier to digest. A landing page rarely needs a paragraph half that long.

Honesty is the part a template cannot supply. A quotation must be a real person’s words, used with their agreement; a tool should never offer to write one. A promise in a heading should be one the owner keeps. No layout is optimised for anything in particular, whatever a template gallery says: whether a page persuades depends on the offer, the words and the reader, and a tool that claims otherwise is selling a feeling.

Forms are where a static page meets the rest of the world. The HTML Standard says a form’s action attribute must hold a valid non-empty URL, and it defines get and post as the methods. RFC 9110 describes POST as a request that the target resource process the enclosed representation according to its own semantics. In plain terms, the form hands what people type to whatever server answers at that address. The page builder never sees it.

That makes the address the important choice. It should be a service or a server the owner controls or trusts, and it should start with https, so that what people type is encrypted on its way. The W3C forms tutorial asks for every field to have a label tied to it, preferably with the label element, so a name field is announced as a name field rather than as an anonymous box.

Hosting the file yourself

A single HTML file can live almost anywhere that serves files: a shared web host, a static hosting service, an object store set up for public reading, or a small server of your own. Upload it under its own name, index.html, and open the address the host gives it to check it. If the pictures go beside the file rather than inside it, upload the images folder with it and keep the names as they are.

There are limits to what a builder like this can promise. It checks structure, contrast, addresses and a few habits of plain writing, and it parses the file back to confirm what it wrote.

It cannot tell whether the offer is good, whether the words are true or whether anyone will arrive. Those remain the owner’s job, and they always were.