HTML5 Boilerplates

HTML5 Boilerplate is a “blank” HTML5 template that provides a rock-solid foundation with minimum tags for your web projects. It includes script and stylesheet definition that you can use as a starting point for your own projects.

Blank HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>HTML5 Blank Template</title>
  <meta name="description" content="Basic HTML boilerplate" />
  <link href="style.css" rel="stylesheet" />
</head>
<body>

  <script src="app.js"></script>
</body>
</html>

Elements in this blank template:

doctype: The doctype tells a browser what kind of document to render. In this blank template, we set html.
html tag: html tag marks the start of html page and wraps all other html tags. It defines a lang attribute, it’s en (English) in our case.
meta charset: Meta charset is used to declare the character encoding that the document is using. This can be useful when there are special characters in the content that need to be handled properly. The most common value for meta charset is utf-8, which will handle most characters correctly. However, if you know that a different encoding is necessary, you can use that instead.
title: title tag is used to set the title of a document. The text between the opening and closing tags will be displayed as the title in most browsers.
meta description: The meta description is a short snippet of text that summarizes the content of a web page. This text is used by search engines to help determine the relevance of a page for specific search queries.
meta viewport: The meta viewport element is a way to control the dimensions and scaling of a web page on mobile devices. The viewport is the area of the mobile device’s screen that displays the web page. By default, a web page will display at 100% of the device’s width, regardless of the size of the device’s screen.
link tag: The link tag is an HTML tag used to link one web page to another. It is placed in the HEAD section of a web page. It is often used to import a CSS file.
script tag: The script tag is an HTML tag used to include a JavaScript file in a web page.

Best HTML5 Boilerplates

HTML5 Boilerplate

With HTML5 Boilerplate, you can quickly build sites that are both fast and modern. This template comes with everything you need to get started, including a robust front-end framework and cross-browser compatibility features. Plus, it’s designed to be easy to adapt and customize for your specific needs.

Features:

A well-designed starter template. Reap the benefits of ten years’ worth of analysis, study, and trial and error by over 200 contributors.
Designed with progressive enhancement in mind.
Includes:
- Normalize.css for CSS normalizations and common bug fixes.
- A custom build of Modernizr for feature detection.
- Apache Server Configs that improve the website’s performance and security.
The Open Graph protocol adds a profile picture, as well as several other components and attributes.
A sample package.json file with WebPack commands is included to help you begin building your application.
The CSS media queries used by the website will determine what elements are visible to users in different screen resolutions.
It includes some important CSS helper classes to get you started.
Print styles optimized for speed and easy implementation.
It also protects against unnecessary console statements, which might cause JavaScript errors in older browsers.
“Delete-key friendly.” It’s simple to remove parts you don’t want.