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.



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:


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:


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.



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.