HTML Static Website Builder

Write the document before decorating it

Begin with one clear page title and a useful reading order. Use a header for introductory site content, a navigation landmark for major links, and a main element for the page’s distinctive content. Use headings to describe the relationships between sections rather than to choose their visual size.

Read the document without its stylesheet. A visitor should still understand the subject and find the next useful page. This simple check also reveals vague link text, misplaced sidebars, and cards that depend on pictures to communicate their purpose.

Give every page a stable address

Use directory-based routes such as /about/ with an index.html inside the corresponding folder. Link to the directory address consistently. This arrangement works with a static host that serves directory index files and keeps navigation independent of custom rewrite rules.

Keep the shared header and footer consistent across documents. For a handful of pages, a careful editing checklist may be enough. When changing navigation becomes repetitive, generate the repeated markup during authoring without adding a runtime application to the published site.

Treat links and images as content

A link should describe its destination. An image needs an alternative description that serves its role in context, along with width and height attributes so the browser can reserve space. Use an empty alternative (alt="") for purely decorative images, or when accompanying text already provides the image’s information and the image adds no further meaning.

Pair the structure with the CSS layout guide and the HTML5 semantics checklist. Then follow the accessible HTML and CSS walkthrough to test the finished reading experience.

Questions about HTML

Should I use buttons or links for navigation?

Use links when the action goes to another page or a section. Use buttons for actions on the current page, such as opening a menu.

Can I reuse a header without a backend?

Yes. A local script or static generator can insert a shared header before publication. The exported files already contain the finished markup.

Primary reference: MDN: HTML reference.