SeoTools

HTML template generator

Generate an HTML boilerplate that follows the HTML Living Standard. Pick presets and options to add Open Graph, canonical and structured data. Everything runs in your browser.

Preset

Basic information

Head options

Body structure

Content layout

Output

<!-- doctype: makes browsers render in standards mode. Without it they fall back to quirks mode -->
<!DOCTYPE html>
<!-- html lang: the page language. Used by screen readers, translation tools and search engines -->
<html lang="en">
  <head>
    <!-- meta charset: the character encoding. Keep it first in head (within the first 1024 bytes) and use UTF-8 -->
    <meta charset="utf-8">
    <!-- viewport: stops phones from shrinking a desktop-width layout; the base for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- title: shown in search results, browser tabs and bookmarks. Required, and should be unique per page -->
    <title>Page title</title>
    <!-- description: a candidate for the snippet in search results. Write a unique summary per page -->
    <meta name="description" content="Write a page description here.">
  </head>
  <!-- body: everything visible on the page. Replace what is below with your own content -->
  <body>
    <!-- h1: the main topic of the page. Aim for one per page -->
    <h1>Page title</h1>
    <p>Write your content here.</p>
  </body>
</html>

Related tools

HTML5 and the HTML Living Standard

"HTML5" was the 2014 W3C Recommendation. Today the specification is developed continuously as the HTML Living Standard by WHATWG, and browsers implement that. Documents that start with <!DOCTYPE html> are all handled the same way, so a template written for HTML5 is also a Living Standard template. What changed is mostly what you can drop: IE conditional comments, X-UA-Compatible, type="text/javascript" and the trailing slash on void elements are no longer needed.

The minimum tags every HTML page needs

<!DOCTYPE html>

Switches the browser to standards mode. Without it the page renders in quirks mode and layouts can break.

<html lang="en">

Declares the page language. Screen readers choose the right pronunciation, browsers offer translation correctly, and search engines understand the language of the page.

<meta charset="utf-8">

Declares the character encoding. Put it first in <head>, within the first 1024 bytes, to prevent garbled text.

<meta name="viewport" content="width=device-width, initial-scale=1">

Makes mobile browsers use the device width. It is the prerequisite for responsive design and for mobile-friendly pages.

<title>

The only required element in <head> besides charset. It appears in tabs, bookmarks and search results, so make it unique for every page.

FAQ

Is an "HTML5 template" different from a basic HTML template?
No. HTML is maintained as the HTML Living Standard, and every document starting with <!DOCTYPE html> is parsed by the same specification. There is no need to write separate templates for "HTML5" and "the latest".
Does a lowercase doctype work?
Yes. The DOCTYPE keyword is case-insensitive. <!DOCTYPE html> is simply the common convention, and this tool uses it.
What happens without the viewport meta tag?
Phones lay the page out at a desktop width (about 980px) and then scale it down, so text becomes tiny and responsive CSS does not behave as intended.
Do I need X-UA-Compatible or IE conditional comments?
No. Support for Internet Explorer has ended, and this tool never outputs them. Delete them if you copied an older boilerplate.
Can I publish the generated HTML as it is?
Treat it as a starting skeleton. Replace the title, description, URLs, images and measurement ID with your own, and prepare the favicon image files separately.