By · Updated

HTML Generator

Meta Tags, Canonical, Favicon and Open Graph in One Copyable HTML5 Template

No ratings yet

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the HTML Generator works

This HTML generator writes a complete starter page. Every project starts with the same twenty lines of HTML, and every time something gets left out: the viewport meta, the lang attribute, the defer on the script tag. Fill in the form and this tool writes the whole document — doctype, head, body skeleton — with the details in the right order and every value escaped. Copy it or download it as index.html and start on the interesting part.

HTML generator: the head every page needs

An HTML5 boilerplate is small but full of details that matter for correctness, performance and accessibility. Getting them right once and reusing the result beats retyping from memory.

Doctype and language. <!doctype html> is the only doctype modern HTML needs and it must be the very first thing in the file to keep the browser in standards mode. The lang attribute on <html> tells screen readers which pronunciation rules to use and lets browsers offer translation; use a BCP 47 tag such as en, en-GB, de or pt-BR.

Head order. The charset declaration goes first so the parser knows how to read everything after it, and it must appear within the first 1024 bytes. The viewport meta follows so mobile browsers lay out the page at device width instead of a zoomed-out desktop canvas. Then the title, which browsers, search engines and bookmark managers all use, followed by the description, links and scripts. The generator always emits these in that order.

Description and social tags. The meta description does not affect ranking, but it is usually the snippet shown under your title in search results, so a missing one means the search engine invents its own. Turning on Open Graph tags adds og:title, og:description, og:type and og:url (when a canonical URL is set) so links pasted into chat and social apps unfurl with the right text. Add an og:image by hand once you have an image.

Stylesheets and scripts. Each stylesheet URL becomes a <link rel="stylesheet"> in the head. Scripts are trickier: a bare <script src> in the head blocks parsing until it downloads and runs. The default defer keeps scripts in the head for early discovery but delays execution until the document is parsed, which is right for almost all application code. module does the same and enables import syntax. end of body is the old-fashioned approach that still works everywhere, and blocking is there for the rare script that must run before the page renders, such as a theme switcher that prevents a flash.

The CSS reset. The optional inline style sets box-sizing: border-box on everything, removes the default body margin and picks the system font stack with a readable line height. It is deliberately tiny — enough to stop the first three CSS surprises without imposing a framework.

Body layout. Choose the landmark structure that matches the page: header, main and footer for a typical site page; the same with a navigation list for a home page; an <article> inside <main> for a blog post; or just a heading and paragraph for a scratch file. Landmarks (header, nav, main, footer) let screen-reader users jump between regions and cost nothing.

Canonical, favicon and theme colour. A canonical link tells search engines which URL is the primary one when the same content is reachable at several addresses. The favicon link points to an icon file; an SVG favicon is a single scalable file that works in every modern browser. Theme colour tints the browser chrome on Android and in installed web apps.

Escaping. Every value you type is HTML-escaped before it is placed in an attribute or element, so a title containing an ampersand or quote produces valid markup rather than a broken tag.

FAQ

Why does the generator put scripts in the head with defer instead of at the end of the body?

Scripts in the head are discovered by the browser's preload scanner immediately, so they start downloading while the HTML is still being parsed. defer stops them from blocking rendering and runs them in order once the document is ready, which combines early download with late execution.

What should the language code be for a bilingual page?

Set lang to the language most of the page is written in, then mark passages in the other language with a lang attribute on the element that contains them. There is no multi-value form of the attribute; one page has one primary language.

Can I leave the description blank?

You can, and the status line will remind you that it is missing. Search engines will then generate their own snippet from the page text, which is often less appealing than one you write. For a scratch file it does not matter; for anything public, fill it in.

Do I need the CSS reset if I use a framework?

No. Frameworks ship their own resets or normalisation and a second one can conflict. Switch the reset off and add the framework's stylesheet URL to the stylesheet list instead so it is linked in the head.

Is the output valid HTML5?

Yes. The document passes the W3C validator with no errors as generated. Check it again after you add content, and use the HTML Validator on this site for a quick local check of the structure.

See also: all Dev Utilities tools, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, Accessibility, AI.

Related tools

HTML Formatter

Indent messy HTML or collapse it safely, keeping pre and script intact.

HTML Validator

Find unclosed tags, duplicate ids and bad nesting in pasted HTML.

Meta Description Generator

Draft meta descriptions from your own page text, trimmed to length.

Canonical URL Generator

Normalise URLs to their canonical form and generate rel=canonical tags.

Emoji Favicon Maker

Any emoji into a one-line SVG favicon, no files.