Use HTML Templates

A set of HTML templates that are free to use and help you get started. Each of these templates builds on the next, so they follow a progression from very basic starter page to fully fleshed out page with metadata and a skeleton of HTML elements.

Basics

Starter

The first template covers a basic HTML page, which you can use as a template for your index.html. It demonstrates important metadata in the head, including how you give your page a title and how to link to a CSS stylesheet:

Layout

Building on our basic page, this layout template embraces the idea of using semantic HTML to communicate form and meaning through properly tagging primary sections: header, main, and footer. In general, every one of your pages should probably have all three of these sections. Here's how it looks:

Metadata

Building on the basic layout and page, the following template below also has necessary meta tags needed to pass basic SEO requirements of a Chrome lighthouse audit, as well as lang="en" set to English. These additional meta tags tell browsers (and search engines) how to size their screen and give a description of the website.

Metadata with Open Graph

Enriching the original metadata template with additional meta tags to cover the Open Graph specification. The Open Graph protocol is primarily used with social media platforms (like Facebook and Twitter) and tells these sites how to link to, display, and describe your webpage when someone shares a link to it on a social platform.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A meaningful description or synopsis of your page and its contents">
    <meta property="og:title" content="The title of your object as it should appear within the graph">
    <meta property="og:type" content="The type of your object, e.g., webpage. Depending on the type you specify, other properties may also be required">
    <meta property="og:url" content="The canonical URL of your object that will be used as its permanent ID in the graph, e.g. https://www.yourwebsite.com/yourwebpage.html/">
    <meta property="og:image" content="An image URL which should represent your object within the graph">

<title>Title Appears in Browser Tab</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <header>
      Site title here, maybe also a navbar? Header things
    </header>
    <main>
      <h1>This is your H1</h1>
      <p>I'm a placeholder text</p>
    </main>
    <footer>
      Copyright info, site map, other footer things
    </footer>
  </body>
</html>

Utility

Redirect

If you ever need to create a redirect, then here's a template to do it in a bulletproof way, which will work regardless of a user's browser settings, even if they have JavaScript turned off.

Other Sources

There's an awesome project called HTML5 Boilerplate, which gives you a fully fledged boilerplate to start from, including CSS that resets baselines, JS to detect browser features, and an excellent set of HTML defaults.